diff --git a/package.json b/package.json
index fb32aa2..c325e45 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
     "vue-amap": "^0.5.9",
     "vue-baidu-map": "^0.21.22",
     "vue-router": "3.0.1",
+    "vue-slide-mini": "^1.0.4",
     "vuex": "3.0.1",
     "wangeditor": "^3.1.1"
   },

diff --git a/package.json b/package.json
index fb32aa2..c325e45 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
     "vue-amap": "^0.5.9",
     "vue-baidu-map": "^0.21.22",
     "vue-router": "3.0.1",
+    "vue-slide-mini": "^1.0.4",
     "vuex": "3.0.1",
     "wangeditor": "^3.1.1"
   },
diff --git a/src/api/callCase.js b/src/api/callCase.js
index cd61986..9da1fc7 100644
--- a/src/api/callCase.js
+++ b/src/api/callCase.js
@@ -126,3 +126,12 @@
     }
   })
 }
+
+// 社会治理事流转步骤接口
+export function eventStepList(data) {
+  return request({
+    url: '/callcenter/api/case/eventStepList',
+    method: 'post',
+    data
+  })
+}

diff --git a/package.json b/package.json
index fb32aa2..c325e45 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
     "vue-amap": "^0.5.9",
     "vue-baidu-map": "^0.21.22",
     "vue-router": "3.0.1",
+    "vue-slide-mini": "^1.0.4",
     "vuex": "3.0.1",
     "wangeditor": "^3.1.1"
   },
diff --git a/src/api/callCase.js b/src/api/callCase.js
index cd61986..9da1fc7 100644
--- a/src/api/callCase.js
+++ b/src/api/callCase.js
@@ -126,3 +126,12 @@
     }
   })
 }
+
+// 社会治理事流转步骤接口
+export function eventStepList(data) {
+  return request({
+    url: '/callcenter/api/case/eventStepList',
+    method: 'post',
+    data
+  })
+}
diff --git a/src/assets/global_images/done.png b/src/assets/global_images/done.png
new file mode 100644
index 0000000..c9a2c5e
--- /dev/null
+++ b/src/assets/global_images/done.png
Binary files differ

diff --git a/package.json b/package.json
index fb32aa2..c325e45 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
     "vue-amap": "^0.5.9",
     "vue-baidu-map": "^0.21.22",
     "vue-router": "3.0.1",
+    "vue-slide-mini": "^1.0.4",
     "vuex": "3.0.1",
     "wangeditor": "^3.1.1"
   },
diff --git a/src/api/callCase.js b/src/api/callCase.js
index cd61986..9da1fc7 100644
--- a/src/api/callCase.js
+++ b/src/api/callCase.js
@@ -126,3 +126,12 @@
     }
   })
 }
+
+// 社会治理事流转步骤接口
+export function eventStepList(data) {
+  return request({
+    url: '/callcenter/api/case/eventStepList',
+    method: 'post',
+    data
+  })
+}
diff --git a/src/assets/global_images/done.png b/src/assets/global_images/done.png
new file mode 100644
index 0000000..c9a2c5e
--- /dev/null
+++ b/src/assets/global_images/done.png
Binary files differ
diff --git a/src/assets/global_images/process.png b/src/assets/global_images/process.png
new file mode 100644
index 0000000..311fe3a
--- /dev/null
+++ b/src/assets/global_images/process.png
Binary files differ

diff --git a/package.json b/package.json
index fb32aa2..c325e45 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
     "vue-amap": "^0.5.9",
     "vue-baidu-map": "^0.21.22",
     "vue-router": "3.0.1",
+    "vue-slide-mini": "^1.0.4",
     "vuex": "3.0.1",
     "wangeditor": "^3.1.1"
   },
diff --git a/src/api/callCase.js b/src/api/callCase.js
index cd61986..9da1fc7 100644
--- a/src/api/callCase.js
+++ b/src/api/callCase.js
@@ -126,3 +126,12 @@
     }
   })
 }
+
+// 社会治理事流转步骤接口
+export function eventStepList(data) {
+  return request({
+    url: '/callcenter/api/case/eventStepList',
+    method: 'post',
+    data
+  })
+}
diff --git a/src/assets/global_images/done.png b/src/assets/global_images/done.png
new file mode 100644
index 0000000..c9a2c5e
--- /dev/null
+++ b/src/assets/global_images/done.png
Binary files differ
diff --git a/src/assets/global_images/process.png b/src/assets/global_images/process.png
new file mode 100644
index 0000000..311fe3a
--- /dev/null
+++ b/src/assets/global_images/process.png
Binary files differ
diff --git a/src/components/NomalTable/index.vue b/src/components/NomalTable/index.vue
index 55a7378..8616987 100644
--- a/src/components/NomalTable/index.vue
+++ b/src/components/NomalTable/index.vue
@@ -55,7 +55,7 @@
         </el-col>
       </el-row>
       <!-- 表格正文-->
-      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="handleSelectionChange">
+      <el-table v-loading="listLoading" :data="data" :height="height" :size="size" class="table" row-class-name="small-row-class" border @selection-change="handleSelectionChange">
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns"/>
         <!--多选选中列-->
@@ -176,7 +176,10 @@
           refresh: false // 是否需要刷新按钮
         }
       }
-    }// 表格工具配置
+    },// 表格工具配置
+    height:{
+      type:String,
+    }
   },
   data() {
     return {

diff --git a/package.json b/package.json
index fb32aa2..c325e45 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
     "vue-amap": "^0.5.9",
     "vue-baidu-map": "^0.21.22",
     "vue-router": "3.0.1",
+    "vue-slide-mini": "^1.0.4",
     "vuex": "3.0.1",
     "wangeditor": "^3.1.1"
   },
diff --git a/src/api/callCase.js b/src/api/callCase.js
index cd61986..9da1fc7 100644
--- a/src/api/callCase.js
+++ b/src/api/callCase.js
@@ -126,3 +126,12 @@
     }
   })
 }
+
+// 社会治理事流转步骤接口
+export function eventStepList(data) {
+  return request({
+    url: '/callcenter/api/case/eventStepList',
+    method: 'post',
+    data
+  })
+}
diff --git a/src/assets/global_images/done.png b/src/assets/global_images/done.png
new file mode 100644
index 0000000..c9a2c5e
--- /dev/null
+++ b/src/assets/global_images/done.png
Binary files differ
diff --git a/src/assets/global_images/process.png b/src/assets/global_images/process.png
new file mode 100644
index 0000000..311fe3a
--- /dev/null
+++ b/src/assets/global_images/process.png
Binary files differ
diff --git a/src/components/NomalTable/index.vue b/src/components/NomalTable/index.vue
index 55a7378..8616987 100644
--- a/src/components/NomalTable/index.vue
+++ b/src/components/NomalTable/index.vue
@@ -55,7 +55,7 @@
         </el-col>
       </el-row>
       <!-- 表格正文-->
-      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="handleSelectionChange">
+      <el-table v-loading="listLoading" :data="data" :height="height" :size="size" class="table" row-class-name="small-row-class" border @selection-change="handleSelectionChange">
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns"/>
         <!--多选选中列-->
@@ -176,7 +176,10 @@
           refresh: false // 是否需要刷新按钮
         }
       }
-    }// 表格工具配置
+    },// 表格工具配置
+    height:{
+      type:String,
+    }
   },
   data() {
     return {
diff --git a/src/components/SelectTree/singleSelect.vue b/src/components/SelectTree/singleSelect.vue
index ba15b20..3336346 100644
--- a/src/components/SelectTree/singleSelect.vue
+++ b/src/components/SelectTree/singleSelect.vue
@@ -6,7 +6,8 @@
     trigger="click"
     class="select-tree scrollbar"
     @show="onShowPopover"
-    @hide="onHidePopover">
+    @hide="onHidePopover"
+  >
     <el-tree
       ref="tree"
       :style="`min-width: ${treeWidth}`"
@@ -14,265 +15,276 @@
       :props="props"
       :expand-on-click-node="false"
       :filter-node-method="filterNode"
-      :default-expand-all="false"
+      :default-expand-all="expandAll"
       class="innerbox"
       highlight-current
       accordion
-      @node-click="onClickNode"/>
+      @node-click="onClickNode"
+    />
     <el-input
       slot="reference"
       ref="input"
       v-model="labelModel"
       :style="`width: ${width}px`"
       :size="size"
-      :class="{ 'rotate': showStatus }"
+      :class="{ rotate: showStatus }"
       :placeholder="placeholder"
       :disabled="disabled"
       clearable
-      suffix-icon="el-icon-arrow-down"/>
+      suffix-icon="el-icon-arrow-down"
+    />
   </el-popover>
 </template>
 
 <script>
-
 export default {
-  name: 'SelectTree',
+  name: "SelectTree",
+
   // 设置绑定参数
   model: {
-    prop: 'value',
-    event: 'selected'
+    prop: "value",
+    event: "selected",
   },
   props: {
+    // 是否默认展开全部
+    expandAll: {
+      type: Boolean,
+      default: false,
+    },
     // 接收绑定参数
     value: {
       type: String,
-      default: ''
+      default: "",
     },
     // 输入框宽度
     width: {
       type: String,
-      default: ''
+      default: "",
     },
     size: {
       type: String,
-      default: ''
+      default: "",
     },
     // 输入框宽度
     disabled: {
       type: Boolean,
-      default: false
+      default: false,
     },
     // 选项数据
     options: {
       type: Array,
-      required: true
+      required: true,
     },
     // 输入框占位符
     placeholder: {
       type: String,
       required: false,
-      default: '请选择'
+      default: "请选择",
     },
     // 树节点配置选项
     props: {
       type: Object,
       required: false,
       default: () => ({
-        parent: 'parentId',
-        value: 'rowGuid',
-        label: 'areaName',
-        children: 'children'
-      })
-    }
+        parent: "parentId",
+        value: "rowGuid",
+        label: "areaName",
+        children: "children",
+      }),
+    },
   },
   data() {
     return {
       // 树状菜单显示状态
       showStatus: false,
       // 菜单宽度
-      treeWidth: 'auto',
+      treeWidth: "auto",
       // 输入框显示值
-      labelModel: '',
+      labelModel: "",
       // 实际请求传值
-      valueModel: ''
-    }
+      valueModel: "",
+    };
   },
   computed: {
     // 是否为树状结构数据
     dataType() {
-      const jsonStr = JSON.stringify(this.options)
-      return jsonStr.indexOf(this.props.children) !== -1
+      const jsonStr = JSON.stringify(this.options);
+      return jsonStr.indexOf(this.props.children) !== -1;
     },
     // 若非树状结构，则转化为树状结构数据
     data() {
       // return this.dataType ? this.options : this.switchTree()
-      return this.options
-    }
+      return this.options;
+    },
   },
   watch: {
     labelModel(val) {
-      console.log('labelModel change:' + val)
+      console.log("labelModel change:" + val);
       if (!val) {
-        if (val === '') {
-          this.valueModel = ''
-          this.onCloseTree()
-          this.$emit('selected', this.valueModel)
+        if (val === "") {
+          this.valueModel = "";
+          this.onCloseTree();
+          this.$emit("selected", this.valueModel);
         }
-        this.valueModel = ''
+        this.valueModel = "";
       }
-      this.$refs.tree.filter(val)
+      this.$refs.tree.filter(val);
     },
     value(val) {
-      this.labelModel = this.queryTree(this.data, val)
-    }
+      this.labelModel = this.queryTree(this.data, val);
+    },
   },
   created() {
     // 检测输入框原有值并显示对应 label
     if (this.value) {
-      this.labelModel = this.queryTree(this.data, this.value)
+      this.labelModel = this.queryTree(this.data, this.value);
     }
     // 获取输入框宽度同步至树状菜单宽度
     this.$nextTick(() => {
-      this.treeWidth = `${(this.width || this.$refs.input.$refs.input.clientWidth) - 24}px`
-    })
+      this.treeWidth = `${
+        (this.width || this.$refs.input.$refs.input.clientWidth) - 24
+      }px`;
+    });
   },
   methods: {
     // 单击节点
     onClickNode(node) {
-      this.labelModel = node[this.props.label]
-      this.valueModel = node[this.props.value]
-      this.onCloseTree()
+      this.labelModel = node[this.props.label];
+      this.valueModel = node[this.props.value];
+      this.onCloseTree();
     },
     // 偏平数组转化为树状层级结构
     switchTree() {
-      return this.cleanChildren(this.buildTree(this.options, '0'))
+      return this.cleanChildren(this.buildTree(this.options, "0"));
     },
     // 隐藏树状菜单
     onCloseTree() {
-      this.$refs.popover.showPopper = false
+      this.$refs.popover.showPopper = false;
     },
     // 显示时触发
     onShowPopover() {
-      this.showStatus = true
-      this.$refs.tree.filter(false)
+      this.showStatus = true;
+      this.$refs.tree.filter(false);
     },
     // 隐藏时触发
     onHidePopover() {
-      this.showStatus = false
-      console.log('onHidePopover:' + this.valueModel)
+      this.showStatus = false;
+      console.log("onHidePopover:" + this.valueModel);
       // if (this.valueModel !== '') {
       //   this.$emit('selected', this.valueModel)
       // }
-      this.$emit('selected', this.valueModel)
+      this.$emit("selected", this.valueModel);
     },
     // 树节点过滤方法
     filterNode(query, data) {
-      if (!query) return true
-      return data[this.props.label].indexOf(query) !== -1
+      if (!query) return true;
+      return data[this.props.label].indexOf(query) !== -1;
     },
     // 搜索树状数据中的 ID
     queryTree(tree, id) {
-      let stark = []
-      stark = stark.concat(tree)
+      let stark = [];
+      stark = stark.concat(tree);
       while (stark.length) {
-        const temp = stark.shift()
+        const temp = stark.shift();
         if (temp[this.props.children]) {
-          stark = stark.concat(temp[this.props.children])
+          stark = stark.concat(temp[this.props.children]);
         }
         if (temp[this.props.value] === id) {
-          return temp[this.props.label]
+          return temp[this.props.label];
         }
       }
-      return ''
+      return "";
     },
     // 将一维的扁平数组转换为多层级对象
-    buildTree(data, id = '0') {
+    buildTree(data, id = "0") {
       const fa = (parentId) => {
-        console.log('parentId:' + parentId)
-        const temp = []
+        console.log("parentId:" + parentId);
+        const temp = [];
         for (let i = 0; i < data.length; i++) {
-          const n = data[i]
+          const n = data[i];
           if (n[this.props.parent] === parentId) {
-            n.children = fa(n.code)
-            temp.push(n)
+            n.children = fa(n.code);
+            temp.push(n);
           }
         }
-        return temp
-      }
-      return fa(id)
+        return temp;
+      };
+      return fa(id);
     },
     // 清除空 children项
     cleanChildren(data) {
       const fa = (list) => {
         list.map((e) => {
           if (e.children.length) {
-            fa(e.children)
+            fa(e.children);
           } else {
-            delete e.children
+            delete e.children;
           }
-          return e
-        })
-        return list
-      }
-      return fa(data)
-    }
-  }
-}
+          return e;
+        });
+        return list;
+      };
+      return fa(data);
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-  .scrollbar {
-    overflow-y: scroll;
-    &::-webkit-scrollbar {
-      z-index: 11;
-      width: 6px;
-    }
-    &::-webkit-scrollbar-track,
-    &::-webkit-scrollbar-corner {
-      background: #fff;
-    }
-    &::-webkit-scrollbar-thumb {
-      // border-radius: 5px;
-      width: 6px;
-      background-color: #eee;
-      &:hover {
-        background-color: #ccc;
-      }
-    }
-    &::-webkit-scrollbar-track-piece {
-      background: #fff;
-      width: 6px;
+.scrollbar {
+  overflow-y: scroll;
+  &::-webkit-scrollbar {
+    z-index: 11;
+    width: 6px;
+  }
+  &::-webkit-scrollbar-track,
+  &::-webkit-scrollbar-corner {
+    background: #fff;
+  }
+  &::-webkit-scrollbar-thumb {
+    // border-radius: 5px;
+    width: 6px;
+    background-color: #eee;
+    &:hover {
+      background-color: #ccc;
     }
   }
-  .select-tree .el-tree {
-    max-height: 350px;
+  &::-webkit-scrollbar-track-piece {
+    background: #fff;
+    width: 6px;
   }
-  .select-tree .el-input.el-input--suffix {
-    cursor: pointer;
-  }
-  .select-tree .el-input.el-input--suffix.rotate .el-input__suffix {
-    transform: rotate(180deg);
-  }
+}
+.select-tree .el-tree {
+  max-height: 350px;
+}
+.select-tree .el-input.el-input--suffix {
+  cursor: pointer;
+}
+.select-tree .el-input.el-input--suffix.rotate .el-input__suffix {
+  transform: rotate(180deg);
+}
 
-  .innerbox::-webkit-scrollbar {/*滚动条整体样式*/
-    width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
-    height: 4px;
-  }
-  .innerbox::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
-    border-radius: 5px;
-    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
-    background: rgba(0,0,0,0.2);
-  }
-  .innerbox::-webkit-scrollbar-track { /*滚动条里面轨道*/
-    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
-    border-radius: 0;
-    background: rgba(0, 0, 0, 0.1);
-  }
+.innerbox::-webkit-scrollbar {
+  /*滚动条整体样式*/
+  width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
+  height: 4px;
+}
+.innerbox::-webkit-scrollbar-thumb {
+  /*滚动条里面小方块*/
+  border-radius: 5px;
+  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  background: rgba(0, 0, 0, 0.2);
+}
+.innerbox::-webkit-scrollbar-track {
+  /*滚动条里面轨道*/
+  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  border-radius: 0;
+  background: rgba(0, 0, 0, 0.1);
+}
 </style>
 <style lang="scss">
-  .el-popover{
-    max-height: 400px;
-    overflow: auto;
-  }
-
+.el-popover {
+  max-height: 400px;
+  overflow: auto;
+}
 </style>

diff --git a/package.json b/package.json
index fb32aa2..c325e45 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
     "vue-amap": "^0.5.9",
     "vue-baidu-map": "^0.21.22",
     "vue-router": "3.0.1",
+    "vue-slide-mini": "^1.0.4",
     "vuex": "3.0.1",
     "wangeditor": "^3.1.1"
   },
diff --git a/src/api/callCase.js b/src/api/callCase.js
index cd61986..9da1fc7 100644
--- a/src/api/callCase.js
+++ b/src/api/callCase.js
@@ -126,3 +126,12 @@
     }
   })
 }
+
+// 社会治理事流转步骤接口
+export function eventStepList(data) {
+  return request({
+    url: '/callcenter/api/case/eventStepList',
+    method: 'post',
+    data
+  })
+}
diff --git a/src/assets/global_images/done.png b/src/assets/global_images/done.png
new file mode 100644
index 0000000..c9a2c5e
--- /dev/null
+++ b/src/assets/global_images/done.png
Binary files differ
diff --git a/src/assets/global_images/process.png b/src/assets/global_images/process.png
new file mode 100644
index 0000000..311fe3a
--- /dev/null
+++ b/src/assets/global_images/process.png
Binary files differ
diff --git a/src/components/NomalTable/index.vue b/src/components/NomalTable/index.vue
index 55a7378..8616987 100644
--- a/src/components/NomalTable/index.vue
+++ b/src/components/NomalTable/index.vue
@@ -55,7 +55,7 @@
         </el-col>
       </el-row>
       <!-- 表格正文-->
-      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="handleSelectionChange">
+      <el-table v-loading="listLoading" :data="data" :height="height" :size="size" class="table" row-class-name="small-row-class" border @selection-change="handleSelectionChange">
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns"/>
         <!--多选选中列-->
@@ -176,7 +176,10 @@
           refresh: false // 是否需要刷新按钮
         }
       }
-    }// 表格工具配置
+    },// 表格工具配置
+    height:{
+      type:String,
+    }
   },
   data() {
     return {
diff --git a/src/components/SelectTree/singleSelect.vue b/src/components/SelectTree/singleSelect.vue
index ba15b20..3336346 100644
--- a/src/components/SelectTree/singleSelect.vue
+++ b/src/components/SelectTree/singleSelect.vue
@@ -6,7 +6,8 @@
     trigger="click"
     class="select-tree scrollbar"
     @show="onShowPopover"
-    @hide="onHidePopover">
+    @hide="onHidePopover"
+  >
     <el-tree
       ref="tree"
       :style="`min-width: ${treeWidth}`"
@@ -14,265 +15,276 @@
       :props="props"
       :expand-on-click-node="false"
       :filter-node-method="filterNode"
-      :default-expand-all="false"
+      :default-expand-all="expandAll"
       class="innerbox"
       highlight-current
       accordion
-      @node-click="onClickNode"/>
+      @node-click="onClickNode"
+    />
     <el-input
       slot="reference"
       ref="input"
       v-model="labelModel"
       :style="`width: ${width}px`"
       :size="size"
-      :class="{ 'rotate': showStatus }"
+      :class="{ rotate: showStatus }"
       :placeholder="placeholder"
       :disabled="disabled"
       clearable
-      suffix-icon="el-icon-arrow-down"/>
+      suffix-icon="el-icon-arrow-down"
+    />
   </el-popover>
 </template>
 
 <script>
-
 export default {
-  name: 'SelectTree',
+  name: "SelectTree",
+
   // 设置绑定参数
   model: {
-    prop: 'value',
-    event: 'selected'
+    prop: "value",
+    event: "selected",
   },
   props: {
+    // 是否默认展开全部
+    expandAll: {
+      type: Boolean,
+      default: false,
+    },
     // 接收绑定参数
     value: {
       type: String,
-      default: ''
+      default: "",
     },
     // 输入框宽度
     width: {
       type: String,
-      default: ''
+      default: "",
     },
     size: {
       type: String,
-      default: ''
+      default: "",
     },
     // 输入框宽度
     disabled: {
       type: Boolean,
-      default: false
+      default: false,
     },
     // 选项数据
     options: {
       type: Array,
-      required: true
+      required: true,
     },
     // 输入框占位符
     placeholder: {
       type: String,
       required: false,
-      default: '请选择'
+      default: "请选择",
     },
     // 树节点配置选项
     props: {
       type: Object,
       required: false,
       default: () => ({
-        parent: 'parentId',
-        value: 'rowGuid',
-        label: 'areaName',
-        children: 'children'
-      })
-    }
+        parent: "parentId",
+        value: "rowGuid",
+        label: "areaName",
+        children: "children",
+      }),
+    },
   },
   data() {
     return {
       // 树状菜单显示状态
       showStatus: false,
       // 菜单宽度
-      treeWidth: 'auto',
+      treeWidth: "auto",
       // 输入框显示值
-      labelModel: '',
+      labelModel: "",
       // 实际请求传值
-      valueModel: ''
-    }
+      valueModel: "",
+    };
   },
   computed: {
     // 是否为树状结构数据
     dataType() {
-      const jsonStr = JSON.stringify(this.options)
-      return jsonStr.indexOf(this.props.children) !== -1
+      const jsonStr = JSON.stringify(this.options);
+      return jsonStr.indexOf(this.props.children) !== -1;
     },
     // 若非树状结构，则转化为树状结构数据
     data() {
       // return this.dataType ? this.options : this.switchTree()
-      return this.options
-    }
+      return this.options;
+    },
   },
   watch: {
     labelModel(val) {
-      console.log('labelModel change:' + val)
+      console.log("labelModel change:" + val);
       if (!val) {
-        if (val === '') {
-          this.valueModel = ''
-          this.onCloseTree()
-          this.$emit('selected', this.valueModel)
+        if (val === "") {
+          this.valueModel = "";
+          this.onCloseTree();
+          this.$emit("selected", this.valueModel);
         }
-        this.valueModel = ''
+        this.valueModel = "";
       }
-      this.$refs.tree.filter(val)
+      this.$refs.tree.filter(val);
     },
     value(val) {
-      this.labelModel = this.queryTree(this.data, val)
-    }
+      this.labelModel = this.queryTree(this.data, val);
+    },
   },
   created() {
     // 检测输入框原有值并显示对应 label
     if (this.value) {
-      this.labelModel = this.queryTree(this.data, this.value)
+      this.labelModel = this.queryTree(this.data, this.value);
     }
     // 获取输入框宽度同步至树状菜单宽度
     this.$nextTick(() => {
-      this.treeWidth = `${(this.width || this.$refs.input.$refs.input.clientWidth) - 24}px`
-    })
+      this.treeWidth = `${
+        (this.width || this.$refs.input.$refs.input.clientWidth) - 24
+      }px`;
+    });
   },
   methods: {
     // 单击节点
     onClickNode(node) {
-      this.labelModel = node[this.props.label]
-      this.valueModel = node[this.props.value]
-      this.onCloseTree()
+      this.labelModel = node[this.props.label];
+      this.valueModel = node[this.props.value];
+      this.onCloseTree();
     },
     // 偏平数组转化为树状层级结构
     switchTree() {
-      return this.cleanChildren(this.buildTree(this.options, '0'))
+      return this.cleanChildren(this.buildTree(this.options, "0"));
     },
     // 隐藏树状菜单
     onCloseTree() {
-      this.$refs.popover.showPopper = false
+      this.$refs.popover.showPopper = false;
     },
     // 显示时触发
     onShowPopover() {
-      this.showStatus = true
-      this.$refs.tree.filter(false)
+      this.showStatus = true;
+      this.$refs.tree.filter(false);
     },
     // 隐藏时触发
     onHidePopover() {
-      this.showStatus = false
-      console.log('onHidePopover:' + this.valueModel)
+      this.showStatus = false;
+      console.log("onHidePopover:" + this.valueModel);
       // if (this.valueModel !== '') {
       //   this.$emit('selected', this.valueModel)
       // }
-      this.$emit('selected', this.valueModel)
+      this.$emit("selected", this.valueModel);
     },
     // 树节点过滤方法
     filterNode(query, data) {
-      if (!query) return true
-      return data[this.props.label].indexOf(query) !== -1
+      if (!query) return true;
+      return data[this.props.label].indexOf(query) !== -1;
     },
     // 搜索树状数据中的 ID
     queryTree(tree, id) {
-      let stark = []
-      stark = stark.concat(tree)
+      let stark = [];
+      stark = stark.concat(tree);
       while (stark.length) {
-        const temp = stark.shift()
+        const temp = stark.shift();
         if (temp[this.props.children]) {
-          stark = stark.concat(temp[this.props.children])
+          stark = stark.concat(temp[this.props.children]);
         }
         if (temp[this.props.value] === id) {
-          return temp[this.props.label]
+          return temp[this.props.label];
         }
       }
-      return ''
+      return "";
     },
     // 将一维的扁平数组转换为多层级对象
-    buildTree(data, id = '0') {
+    buildTree(data, id = "0") {
       const fa = (parentId) => {
-        console.log('parentId:' + parentId)
-        const temp = []
+        console.log("parentId:" + parentId);
+        const temp = [];
         for (let i = 0; i < data.length; i++) {
-          const n = data[i]
+          const n = data[i];
           if (n[this.props.parent] === parentId) {
-            n.children = fa(n.code)
-            temp.push(n)
+            n.children = fa(n.code);
+            temp.push(n);
           }
         }
-        return temp
-      }
-      return fa(id)
+        return temp;
+      };
+      return fa(id);
     },
     // 清除空 children项
     cleanChildren(data) {
       const fa = (list) => {
         list.map((e) => {
           if (e.children.length) {
-            fa(e.children)
+            fa(e.children);
           } else {
-            delete e.children
+            delete e.children;
           }
-          return e
-        })
-        return list
-      }
-      return fa(data)
-    }
-  }
-}
+          return e;
+        });
+        return list;
+      };
+      return fa(data);
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-  .scrollbar {
-    overflow-y: scroll;
-    &::-webkit-scrollbar {
-      z-index: 11;
-      width: 6px;
-    }
-    &::-webkit-scrollbar-track,
-    &::-webkit-scrollbar-corner {
-      background: #fff;
-    }
-    &::-webkit-scrollbar-thumb {
-      // border-radius: 5px;
-      width: 6px;
-      background-color: #eee;
-      &:hover {
-        background-color: #ccc;
-      }
-    }
-    &::-webkit-scrollbar-track-piece {
-      background: #fff;
-      width: 6px;
+.scrollbar {
+  overflow-y: scroll;
+  &::-webkit-scrollbar {
+    z-index: 11;
+    width: 6px;
+  }
+  &::-webkit-scrollbar-track,
+  &::-webkit-scrollbar-corner {
+    background: #fff;
+  }
+  &::-webkit-scrollbar-thumb {
+    // border-radius: 5px;
+    width: 6px;
+    background-color: #eee;
+    &:hover {
+      background-color: #ccc;
     }
   }
-  .select-tree .el-tree {
-    max-height: 350px;
+  &::-webkit-scrollbar-track-piece {
+    background: #fff;
+    width: 6px;
   }
-  .select-tree .el-input.el-input--suffix {
-    cursor: pointer;
-  }
-  .select-tree .el-input.el-input--suffix.rotate .el-input__suffix {
-    transform: rotate(180deg);
-  }
+}
+.select-tree .el-tree {
+  max-height: 350px;
+}
+.select-tree .el-input.el-input--suffix {
+  cursor: pointer;
+}
+.select-tree .el-input.el-input--suffix.rotate .el-input__suffix {
+  transform: rotate(180deg);
+}
 
-  .innerbox::-webkit-scrollbar {/*滚动条整体样式*/
-    width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
-    height: 4px;
-  }
-  .innerbox::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
-    border-radius: 5px;
-    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
-    background: rgba(0,0,0,0.2);
-  }
-  .innerbox::-webkit-scrollbar-track { /*滚动条里面轨道*/
-    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
-    border-radius: 0;
-    background: rgba(0, 0, 0, 0.1);
-  }
+.innerbox::-webkit-scrollbar {
+  /*滚动条整体样式*/
+  width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
+  height: 4px;
+}
+.innerbox::-webkit-scrollbar-thumb {
+  /*滚动条里面小方块*/
+  border-radius: 5px;
+  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  background: rgba(0, 0, 0, 0.2);
+}
+.innerbox::-webkit-scrollbar-track {
+  /*滚动条里面轨道*/
+  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  border-radius: 0;
+  background: rgba(0, 0, 0, 0.1);
+}
 </style>
 <style lang="scss">
-  .el-popover{
-    max-height: 400px;
-    overflow: auto;
-  }
-
+.el-popover {
+  max-height: 400px;
+  overflow: auto;
+}
 </style>
diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss
index 65abe46..8236420 100644
--- a/src/styles/sidebar.scss
+++ b/src/styles/sidebar.scss
@@ -212,3 +212,8 @@
 .is-active>.light-line{
   background-color: $menuActiveText
 }
+
+.el-image-viewer__close{
+  color: #fff !important;
+  font-size: 52px !important;
+}
\ No newline at end of file

diff --git a/package.json b/package.json
index fb32aa2..c325e45 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
     "vue-amap": "^0.5.9",
     "vue-baidu-map": "^0.21.22",
     "vue-router": "3.0.1",
+    "vue-slide-mini": "^1.0.4",
     "vuex": "3.0.1",
     "wangeditor": "^3.1.1"
   },
diff --git a/src/api/callCase.js b/src/api/callCase.js
index cd61986..9da1fc7 100644
--- a/src/api/callCase.js
+++ b/src/api/callCase.js
@@ -126,3 +126,12 @@
     }
   })
 }
+
+// 社会治理事流转步骤接口
+export function eventStepList(data) {
+  return request({
+    url: '/callcenter/api/case/eventStepList',
+    method: 'post',
+    data
+  })
+}
diff --git a/src/assets/global_images/done.png b/src/assets/global_images/done.png
new file mode 100644
index 0000000..c9a2c5e
--- /dev/null
+++ b/src/assets/global_images/done.png
Binary files differ
diff --git a/src/assets/global_images/process.png b/src/assets/global_images/process.png
new file mode 100644
index 0000000..311fe3a
--- /dev/null
+++ b/src/assets/global_images/process.png
Binary files differ
diff --git a/src/components/NomalTable/index.vue b/src/components/NomalTable/index.vue
index 55a7378..8616987 100644
--- a/src/components/NomalTable/index.vue
+++ b/src/components/NomalTable/index.vue
@@ -55,7 +55,7 @@
         </el-col>
       </el-row>
       <!-- 表格正文-->
-      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="handleSelectionChange">
+      <el-table v-loading="listLoading" :data="data" :height="height" :size="size" class="table" row-class-name="small-row-class" border @selection-change="handleSelectionChange">
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns"/>
         <!--多选选中列-->
@@ -176,7 +176,10 @@
           refresh: false // 是否需要刷新按钮
         }
       }
-    }// 表格工具配置
+    },// 表格工具配置
+    height:{
+      type:String,
+    }
   },
   data() {
     return {
diff --git a/src/components/SelectTree/singleSelect.vue b/src/components/SelectTree/singleSelect.vue
index ba15b20..3336346 100644
--- a/src/components/SelectTree/singleSelect.vue
+++ b/src/components/SelectTree/singleSelect.vue
@@ -6,7 +6,8 @@
     trigger="click"
     class="select-tree scrollbar"
     @show="onShowPopover"
-    @hide="onHidePopover">
+    @hide="onHidePopover"
+  >
     <el-tree
       ref="tree"
       :style="`min-width: ${treeWidth}`"
@@ -14,265 +15,276 @@
       :props="props"
       :expand-on-click-node="false"
       :filter-node-method="filterNode"
-      :default-expand-all="false"
+      :default-expand-all="expandAll"
       class="innerbox"
       highlight-current
       accordion
-      @node-click="onClickNode"/>
+      @node-click="onClickNode"
+    />
     <el-input
       slot="reference"
       ref="input"
       v-model="labelModel"
       :style="`width: ${width}px`"
       :size="size"
-      :class="{ 'rotate': showStatus }"
+      :class="{ rotate: showStatus }"
       :placeholder="placeholder"
       :disabled="disabled"
       clearable
-      suffix-icon="el-icon-arrow-down"/>
+      suffix-icon="el-icon-arrow-down"
+    />
   </el-popover>
 </template>
 
 <script>
-
 export default {
-  name: 'SelectTree',
+  name: "SelectTree",
+
   // 设置绑定参数
   model: {
-    prop: 'value',
-    event: 'selected'
+    prop: "value",
+    event: "selected",
   },
   props: {
+    // 是否默认展开全部
+    expandAll: {
+      type: Boolean,
+      default: false,
+    },
     // 接收绑定参数
     value: {
       type: String,
-      default: ''
+      default: "",
     },
     // 输入框宽度
     width: {
       type: String,
-      default: ''
+      default: "",
     },
     size: {
       type: String,
-      default: ''
+      default: "",
     },
     // 输入框宽度
     disabled: {
       type: Boolean,
-      default: false
+      default: false,
     },
     // 选项数据
     options: {
       type: Array,
-      required: true
+      required: true,
     },
     // 输入框占位符
     placeholder: {
       type: String,
       required: false,
-      default: '请选择'
+      default: "请选择",
     },
     // 树节点配置选项
     props: {
       type: Object,
       required: false,
       default: () => ({
-        parent: 'parentId',
-        value: 'rowGuid',
-        label: 'areaName',
-        children: 'children'
-      })
-    }
+        parent: "parentId",
+        value: "rowGuid",
+        label: "areaName",
+        children: "children",
+      }),
+    },
   },
   data() {
     return {
       // 树状菜单显示状态
       showStatus: false,
       // 菜单宽度
-      treeWidth: 'auto',
+      treeWidth: "auto",
       // 输入框显示值
-      labelModel: '',
+      labelModel: "",
       // 实际请求传值
-      valueModel: ''
-    }
+      valueModel: "",
+    };
   },
   computed: {
     // 是否为树状结构数据
     dataType() {
-      const jsonStr = JSON.stringify(this.options)
-      return jsonStr.indexOf(this.props.children) !== -1
+      const jsonStr = JSON.stringify(this.options);
+      return jsonStr.indexOf(this.props.children) !== -1;
     },
     // 若非树状结构，则转化为树状结构数据
     data() {
       // return this.dataType ? this.options : this.switchTree()
-      return this.options
-    }
+      return this.options;
+    },
   },
   watch: {
     labelModel(val) {
-      console.log('labelModel change:' + val)
+      console.log("labelModel change:" + val);
       if (!val) {
-        if (val === '') {
-          this.valueModel = ''
-          this.onCloseTree()
-          this.$emit('selected', this.valueModel)
+        if (val === "") {
+          this.valueModel = "";
+          this.onCloseTree();
+          this.$emit("selected", this.valueModel);
         }
-        this.valueModel = ''
+        this.valueModel = "";
       }
-      this.$refs.tree.filter(val)
+      this.$refs.tree.filter(val);
     },
     value(val) {
-      this.labelModel = this.queryTree(this.data, val)
-    }
+      this.labelModel = this.queryTree(this.data, val);
+    },
   },
   created() {
     // 检测输入框原有值并显示对应 label
     if (this.value) {
-      this.labelModel = this.queryTree(this.data, this.value)
+      this.labelModel = this.queryTree(this.data, this.value);
     }
     // 获取输入框宽度同步至树状菜单宽度
     this.$nextTick(() => {
-      this.treeWidth = `${(this.width || this.$refs.input.$refs.input.clientWidth) - 24}px`
-    })
+      this.treeWidth = `${
+        (this.width || this.$refs.input.$refs.input.clientWidth) - 24
+      }px`;
+    });
   },
   methods: {
     // 单击节点
     onClickNode(node) {
-      this.labelModel = node[this.props.label]
-      this.valueModel = node[this.props.value]
-      this.onCloseTree()
+      this.labelModel = node[this.props.label];
+      this.valueModel = node[this.props.value];
+      this.onCloseTree();
     },
     // 偏平数组转化为树状层级结构
     switchTree() {
-      return this.cleanChildren(this.buildTree(this.options, '0'))
+      return this.cleanChildren(this.buildTree(this.options, "0"));
     },
     // 隐藏树状菜单
     onCloseTree() {
-      this.$refs.popover.showPopper = false
+      this.$refs.popover.showPopper = false;
     },
     // 显示时触发
     onShowPopover() {
-      this.showStatus = true
-      this.$refs.tree.filter(false)
+      this.showStatus = true;
+      this.$refs.tree.filter(false);
     },
     // 隐藏时触发
     onHidePopover() {
-      this.showStatus = false
-      console.log('onHidePopover:' + this.valueModel)
+      this.showStatus = false;
+      console.log("onHidePopover:" + this.valueModel);
       // if (this.valueModel !== '') {
       //   this.$emit('selected', this.valueModel)
       // }
-      this.$emit('selected', this.valueModel)
+      this.$emit("selected", this.valueModel);
     },
     // 树节点过滤方法
     filterNode(query, data) {
-      if (!query) return true
-      return data[this.props.label].indexOf(query) !== -1
+      if (!query) return true;
+      return data[this.props.label].indexOf(query) !== -1;
     },
     // 搜索树状数据中的 ID
     queryTree(tree, id) {
-      let stark = []
-      stark = stark.concat(tree)
+      let stark = [];
+      stark = stark.concat(tree);
       while (stark.length) {
-        const temp = stark.shift()
+        const temp = stark.shift();
         if (temp[this.props.children]) {
-          stark = stark.concat(temp[this.props.children])
+          stark = stark.concat(temp[this.props.children]);
         }
         if (temp[this.props.value] === id) {
-          return temp[this.props.label]
+          return temp[this.props.label];
         }
       }
-      return ''
+      return "";
     },
     // 将一维的扁平数组转换为多层级对象
-    buildTree(data, id = '0') {
+    buildTree(data, id = "0") {
       const fa = (parentId) => {
-        console.log('parentId:' + parentId)
-        const temp = []
+        console.log("parentId:" + parentId);
+        const temp = [];
         for (let i = 0; i < data.length; i++) {
-          const n = data[i]
+          const n = data[i];
           if (n[this.props.parent] === parentId) {
-            n.children = fa(n.code)
-            temp.push(n)
+            n.children = fa(n.code);
+            temp.push(n);
           }
         }
-        return temp
-      }
-      return fa(id)
+        return temp;
+      };
+      return fa(id);
     },
     // 清除空 children项
     cleanChildren(data) {
       const fa = (list) => {
         list.map((e) => {
           if (e.children.length) {
-            fa(e.children)
+            fa(e.children);
           } else {
-            delete e.children
+            delete e.children;
           }
-          return e
-        })
-        return list
-      }
-      return fa(data)
-    }
-  }
-}
+          return e;
+        });
+        return list;
+      };
+      return fa(data);
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-  .scrollbar {
-    overflow-y: scroll;
-    &::-webkit-scrollbar {
-      z-index: 11;
-      width: 6px;
-    }
-    &::-webkit-scrollbar-track,
-    &::-webkit-scrollbar-corner {
-      background: #fff;
-    }
-    &::-webkit-scrollbar-thumb {
-      // border-radius: 5px;
-      width: 6px;
-      background-color: #eee;
-      &:hover {
-        background-color: #ccc;
-      }
-    }
-    &::-webkit-scrollbar-track-piece {
-      background: #fff;
-      width: 6px;
+.scrollbar {
+  overflow-y: scroll;
+  &::-webkit-scrollbar {
+    z-index: 11;
+    width: 6px;
+  }
+  &::-webkit-scrollbar-track,
+  &::-webkit-scrollbar-corner {
+    background: #fff;
+  }
+  &::-webkit-scrollbar-thumb {
+    // border-radius: 5px;
+    width: 6px;
+    background-color: #eee;
+    &:hover {
+      background-color: #ccc;
     }
   }
-  .select-tree .el-tree {
-    max-height: 350px;
+  &::-webkit-scrollbar-track-piece {
+    background: #fff;
+    width: 6px;
   }
-  .select-tree .el-input.el-input--suffix {
-    cursor: pointer;
-  }
-  .select-tree .el-input.el-input--suffix.rotate .el-input__suffix {
-    transform: rotate(180deg);
-  }
+}
+.select-tree .el-tree {
+  max-height: 350px;
+}
+.select-tree .el-input.el-input--suffix {
+  cursor: pointer;
+}
+.select-tree .el-input.el-input--suffix.rotate .el-input__suffix {
+  transform: rotate(180deg);
+}
 
-  .innerbox::-webkit-scrollbar {/*滚动条整体样式*/
-    width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
-    height: 4px;
-  }
-  .innerbox::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
-    border-radius: 5px;
-    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
-    background: rgba(0,0,0,0.2);
-  }
-  .innerbox::-webkit-scrollbar-track { /*滚动条里面轨道*/
-    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
-    border-radius: 0;
-    background: rgba(0, 0, 0, 0.1);
-  }
+.innerbox::-webkit-scrollbar {
+  /*滚动条整体样式*/
+  width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
+  height: 4px;
+}
+.innerbox::-webkit-scrollbar-thumb {
+  /*滚动条里面小方块*/
+  border-radius: 5px;
+  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  background: rgba(0, 0, 0, 0.2);
+}
+.innerbox::-webkit-scrollbar-track {
+  /*滚动条里面轨道*/
+  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  border-radius: 0;
+  background: rgba(0, 0, 0, 0.1);
+}
 </style>
 <style lang="scss">
-  .el-popover{
-    max-height: 400px;
-    overflow: auto;
-  }
-
+.el-popover {
+  max-height: 400px;
+  overflow: auto;
+}
 </style>
diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss
index 65abe46..8236420 100644
--- a/src/styles/sidebar.scss
+++ b/src/styles/sidebar.scss
@@ -212,3 +212,8 @@
 .is-active>.light-line{
   background-color: $menuActiveText
 }
+
+.el-image-viewer__close{
+  color: #fff !important;
+  font-size: 52px !important;
+}
\ No newline at end of file
diff --git a/src/views/caseManage/caseCommon/SwiperImg.vue b/src/views/caseManage/caseCommon/SwiperImg.vue
new file mode 100644
index 0000000..4ff3fd2
--- /dev/null
+++ b/src/views/caseManage/caseCommon/SwiperImg.vue
@@ -0,0 +1,88 @@
+<template>
+	<div class="swiper" @mouseover="overHd" @mouseout="auto">
+		<div class="swiper-item" v-for="(item,ind) in gallery" :key="item" v-show="ind==index">
+			<img :src="item" width="100%"  style="width: 300px; height: 450px; overflow: hidden">
+		</div>
+		<div class="thumbs" v-if="gallery.length > 1">
+			<span class="thumb" :class="{'active' :item==index+1}" v-for="item in gallery.length" :key='item'
+				@click="index=item-1">{{item}}</span>
+		</div>
+	</div>
+</template>
+ 
+<script>
+	export default {
+		props: {
+			gallery: {
+				type: Array,
+				default () {
+					return []
+				}
+			}
+		},
+		data() {
+			return {
+				//默认显示 
+				index: 0,
+				stopID: null,
+			}
+		},
+		// 当组件挂载完毕 执行自动播放
+		created() {
+			this.auto();
+		},
+		beforeDestroy(){
+			this.overHd();
+		},
+		methods: {
+			//鼠标一开  auto自动执行
+			auto() {
+				this.stopID = setInterval(() => {
+					this.index++;
+					this.check();
+				}, 5000)
+			},
+			overHd() {
+				clearInterval(this.stopID);
+			},
+			//检查边界
+			check() {
+				if (this.index == this.gallery.length) {
+					this.index = 0;
+				}
+			}
+		}
+	}
+</script>
+ 
+<style scoped="scoped">
+	.swiper {
+		position: relative;
+	}
+ 
+	.swiper .thumbs {
+		position: absolute;
+		bottom: 10px;
+		width: 100%;
+		text-align: center;
+	}
+ 
+	.thumb {
+		width: 10px;
+		height: 10px;
+		display: inline-block;
+		border-radius: 15px;
+		text-indent: 9999em;
+		margin: 0 5px;
+		background-color: #fff;
+	}
+ 
+	.thumb:hover {
+		cursor: pointer;
+		background-color: #42b983;
+	}
+	.active {
+		background-color: #42b983;
+ 
+	}
+</style>
\ No newline at end of file

diff --git a/package.json b/package.json
index fb32aa2..c325e45 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
     "vue-amap": "^0.5.9",
     "vue-baidu-map": "^0.21.22",
     "vue-router": "3.0.1",
+    "vue-slide-mini": "^1.0.4",
     "vuex": "3.0.1",
     "wangeditor": "^3.1.1"
   },
diff --git a/src/api/callCase.js b/src/api/callCase.js
index cd61986..9da1fc7 100644
--- a/src/api/callCase.js
+++ b/src/api/callCase.js
@@ -126,3 +126,12 @@
     }
   })
 }
+
+// 社会治理事流转步骤接口
+export function eventStepList(data) {
+  return request({
+    url: '/callcenter/api/case/eventStepList',
+    method: 'post',
+    data
+  })
+}
diff --git a/src/assets/global_images/done.png b/src/assets/global_images/done.png
new file mode 100644
index 0000000..c9a2c5e
--- /dev/null
+++ b/src/assets/global_images/done.png
Binary files differ
diff --git a/src/assets/global_images/process.png b/src/assets/global_images/process.png
new file mode 100644
index 0000000..311fe3a
--- /dev/null
+++ b/src/assets/global_images/process.png
Binary files differ
diff --git a/src/components/NomalTable/index.vue b/src/components/NomalTable/index.vue
index 55a7378..8616987 100644
--- a/src/components/NomalTable/index.vue
+++ b/src/components/NomalTable/index.vue
@@ -55,7 +55,7 @@
         </el-col>
       </el-row>
       <!-- 表格正文-->
-      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="handleSelectionChange">
+      <el-table v-loading="listLoading" :data="data" :height="height" :size="size" class="table" row-class-name="small-row-class" border @selection-change="handleSelectionChange">
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns"/>
         <!--多选选中列-->
@@ -176,7 +176,10 @@
           refresh: false // 是否需要刷新按钮
         }
       }
-    }// 表格工具配置
+    },// 表格工具配置
+    height:{
+      type:String,
+    }
   },
   data() {
     return {
diff --git a/src/components/SelectTree/singleSelect.vue b/src/components/SelectTree/singleSelect.vue
index ba15b20..3336346 100644
--- a/src/components/SelectTree/singleSelect.vue
+++ b/src/components/SelectTree/singleSelect.vue
@@ -6,7 +6,8 @@
     trigger="click"
     class="select-tree scrollbar"
     @show="onShowPopover"
-    @hide="onHidePopover">
+    @hide="onHidePopover"
+  >
     <el-tree
       ref="tree"
       :style="`min-width: ${treeWidth}`"
@@ -14,265 +15,276 @@
       :props="props"
       :expand-on-click-node="false"
       :filter-node-method="filterNode"
-      :default-expand-all="false"
+      :default-expand-all="expandAll"
       class="innerbox"
       highlight-current
       accordion
-      @node-click="onClickNode"/>
+      @node-click="onClickNode"
+    />
     <el-input
       slot="reference"
       ref="input"
       v-model="labelModel"
       :style="`width: ${width}px`"
       :size="size"
-      :class="{ 'rotate': showStatus }"
+      :class="{ rotate: showStatus }"
       :placeholder="placeholder"
       :disabled="disabled"
       clearable
-      suffix-icon="el-icon-arrow-down"/>
+      suffix-icon="el-icon-arrow-down"
+    />
   </el-popover>
 </template>
 
 <script>
-
 export default {
-  name: 'SelectTree',
+  name: "SelectTree",
+
   // 设置绑定参数
   model: {
-    prop: 'value',
-    event: 'selected'
+    prop: "value",
+    event: "selected",
   },
   props: {
+    // 是否默认展开全部
+    expandAll: {
+      type: Boolean,
+      default: false,
+    },
     // 接收绑定参数
     value: {
       type: String,
-      default: ''
+      default: "",
     },
     // 输入框宽度
     width: {
       type: String,
-      default: ''
+      default: "",
     },
     size: {
       type: String,
-      default: ''
+      default: "",
     },
     // 输入框宽度
     disabled: {
       type: Boolean,
-      default: false
+      default: false,
     },
     // 选项数据
     options: {
       type: Array,
-      required: true
+      required: true,
     },
     // 输入框占位符
     placeholder: {
       type: String,
       required: false,
-      default: '请选择'
+      default: "请选择",
     },
     // 树节点配置选项
     props: {
       type: Object,
       required: false,
       default: () => ({
-        parent: 'parentId',
-        value: 'rowGuid',
-        label: 'areaName',
-        children: 'children'
-      })
-    }
+        parent: "parentId",
+        value: "rowGuid",
+        label: "areaName",
+        children: "children",
+      }),
+    },
   },
   data() {
     return {
       // 树状菜单显示状态
       showStatus: false,
       // 菜单宽度
-      treeWidth: 'auto',
+      treeWidth: "auto",
       // 输入框显示值
-      labelModel: '',
+      labelModel: "",
       // 实际请求传值
-      valueModel: ''
-    }
+      valueModel: "",
+    };
   },
   computed: {
     // 是否为树状结构数据
     dataType() {
-      const jsonStr = JSON.stringify(this.options)
-      return jsonStr.indexOf(this.props.children) !== -1
+      const jsonStr = JSON.stringify(this.options);
+      return jsonStr.indexOf(this.props.children) !== -1;
     },
     // 若非树状结构，则转化为树状结构数据
     data() {
       // return this.dataType ? this.options : this.switchTree()
-      return this.options
-    }
+      return this.options;
+    },
   },
   watch: {
     labelModel(val) {
-      console.log('labelModel change:' + val)
+      console.log("labelModel change:" + val);
       if (!val) {
-        if (val === '') {
-          this.valueModel = ''
-          this.onCloseTree()
-          this.$emit('selected', this.valueModel)
+        if (val === "") {
+          this.valueModel = "";
+          this.onCloseTree();
+          this.$emit("selected", this.valueModel);
         }
-        this.valueModel = ''
+        this.valueModel = "";
       }
-      this.$refs.tree.filter(val)
+      this.$refs.tree.filter(val);
     },
     value(val) {
-      this.labelModel = this.queryTree(this.data, val)
-    }
+      this.labelModel = this.queryTree(this.data, val);
+    },
   },
   created() {
     // 检测输入框原有值并显示对应 label
     if (this.value) {
-      this.labelModel = this.queryTree(this.data, this.value)
+      this.labelModel = this.queryTree(this.data, this.value);
     }
     // 获取输入框宽度同步至树状菜单宽度
     this.$nextTick(() => {
-      this.treeWidth = `${(this.width || this.$refs.input.$refs.input.clientWidth) - 24}px`
-    })
+      this.treeWidth = `${
+        (this.width || this.$refs.input.$refs.input.clientWidth) - 24
+      }px`;
+    });
   },
   methods: {
     // 单击节点
     onClickNode(node) {
-      this.labelModel = node[this.props.label]
-      this.valueModel = node[this.props.value]
-      this.onCloseTree()
+      this.labelModel = node[this.props.label];
+      this.valueModel = node[this.props.value];
+      this.onCloseTree();
     },
     // 偏平数组转化为树状层级结构
     switchTree() {
-      return this.cleanChildren(this.buildTree(this.options, '0'))
+      return this.cleanChildren(this.buildTree(this.options, "0"));
     },
     // 隐藏树状菜单
     onCloseTree() {
-      this.$refs.popover.showPopper = false
+      this.$refs.popover.showPopper = false;
     },
     // 显示时触发
     onShowPopover() {
-      this.showStatus = true
-      this.$refs.tree.filter(false)
+      this.showStatus = true;
+      this.$refs.tree.filter(false);
     },
     // 隐藏时触发
     onHidePopover() {
-      this.showStatus = false
-      console.log('onHidePopover:' + this.valueModel)
+      this.showStatus = false;
+      console.log("onHidePopover:" + this.valueModel);
       // if (this.valueModel !== '') {
       //   this.$emit('selected', this.valueModel)
       // }
-      this.$emit('selected', this.valueModel)
+      this.$emit("selected", this.valueModel);
     },
     // 树节点过滤方法
     filterNode(query, data) {
-      if (!query) return true
-      return data[this.props.label].indexOf(query) !== -1
+      if (!query) return true;
+      return data[this.props.label].indexOf(query) !== -1;
     },
     // 搜索树状数据中的 ID
     queryTree(tree, id) {
-      let stark = []
-      stark = stark.concat(tree)
+      let stark = [];
+      stark = stark.concat(tree);
       while (stark.length) {
-        const temp = stark.shift()
+        const temp = stark.shift();
         if (temp[this.props.children]) {
-          stark = stark.concat(temp[this.props.children])
+          stark = stark.concat(temp[this.props.children]);
         }
         if (temp[this.props.value] === id) {
-          return temp[this.props.label]
+          return temp[this.props.label];
         }
       }
-      return ''
+      return "";
     },
     // 将一维的扁平数组转换为多层级对象
-    buildTree(data, id = '0') {
+    buildTree(data, id = "0") {
       const fa = (parentId) => {
-        console.log('parentId:' + parentId)
-        const temp = []
+        console.log("parentId:" + parentId);
+        const temp = [];
         for (let i = 0; i < data.length; i++) {
-          const n = data[i]
+          const n = data[i];
           if (n[this.props.parent] === parentId) {
-            n.children = fa(n.code)
-            temp.push(n)
+            n.children = fa(n.code);
+            temp.push(n);
           }
         }
-        return temp
-      }
-      return fa(id)
+        return temp;
+      };
+      return fa(id);
     },
     // 清除空 children项
     cleanChildren(data) {
       const fa = (list) => {
         list.map((e) => {
           if (e.children.length) {
-            fa(e.children)
+            fa(e.children);
           } else {
-            delete e.children
+            delete e.children;
           }
-          return e
-        })
-        return list
-      }
-      return fa(data)
-    }
-  }
-}
+          return e;
+        });
+        return list;
+      };
+      return fa(data);
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-  .scrollbar {
-    overflow-y: scroll;
-    &::-webkit-scrollbar {
-      z-index: 11;
-      width: 6px;
-    }
-    &::-webkit-scrollbar-track,
-    &::-webkit-scrollbar-corner {
-      background: #fff;
-    }
-    &::-webkit-scrollbar-thumb {
-      // border-radius: 5px;
-      width: 6px;
-      background-color: #eee;
-      &:hover {
-        background-color: #ccc;
-      }
-    }
-    &::-webkit-scrollbar-track-piece {
-      background: #fff;
-      width: 6px;
+.scrollbar {
+  overflow-y: scroll;
+  &::-webkit-scrollbar {
+    z-index: 11;
+    width: 6px;
+  }
+  &::-webkit-scrollbar-track,
+  &::-webkit-scrollbar-corner {
+    background: #fff;
+  }
+  &::-webkit-scrollbar-thumb {
+    // border-radius: 5px;
+    width: 6px;
+    background-color: #eee;
+    &:hover {
+      background-color: #ccc;
     }
   }
-  .select-tree .el-tree {
-    max-height: 350px;
+  &::-webkit-scrollbar-track-piece {
+    background: #fff;
+    width: 6px;
   }
-  .select-tree .el-input.el-input--suffix {
-    cursor: pointer;
-  }
-  .select-tree .el-input.el-input--suffix.rotate .el-input__suffix {
-    transform: rotate(180deg);
-  }
+}
+.select-tree .el-tree {
+  max-height: 350px;
+}
+.select-tree .el-input.el-input--suffix {
+  cursor: pointer;
+}
+.select-tree .el-input.el-input--suffix.rotate .el-input__suffix {
+  transform: rotate(180deg);
+}
 
-  .innerbox::-webkit-scrollbar {/*滚动条整体样式*/
-    width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
-    height: 4px;
-  }
-  .innerbox::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
-    border-radius: 5px;
-    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
-    background: rgba(0,0,0,0.2);
-  }
-  .innerbox::-webkit-scrollbar-track { /*滚动条里面轨道*/
-    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
-    border-radius: 0;
-    background: rgba(0, 0, 0, 0.1);
-  }
+.innerbox::-webkit-scrollbar {
+  /*滚动条整体样式*/
+  width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
+  height: 4px;
+}
+.innerbox::-webkit-scrollbar-thumb {
+  /*滚动条里面小方块*/
+  border-radius: 5px;
+  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  background: rgba(0, 0, 0, 0.2);
+}
+.innerbox::-webkit-scrollbar-track {
+  /*滚动条里面轨道*/
+  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  border-radius: 0;
+  background: rgba(0, 0, 0, 0.1);
+}
 </style>
 <style lang="scss">
-  .el-popover{
-    max-height: 400px;
-    overflow: auto;
-  }
-
+.el-popover {
+  max-height: 400px;
+  overflow: auto;
+}
 </style>
diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss
index 65abe46..8236420 100644
--- a/src/styles/sidebar.scss
+++ b/src/styles/sidebar.scss
@@ -212,3 +212,8 @@
 .is-active>.light-line{
   background-color: $menuActiveText
 }
+
+.el-image-viewer__close{
+  color: #fff !important;
+  font-size: 52px !important;
+}
\ No newline at end of file
diff --git a/src/views/caseManage/caseCommon/SwiperImg.vue b/src/views/caseManage/caseCommon/SwiperImg.vue
new file mode 100644
index 0000000..4ff3fd2
--- /dev/null
+++ b/src/views/caseManage/caseCommon/SwiperImg.vue
@@ -0,0 +1,88 @@
+<template>
+	<div class="swiper" @mouseover="overHd" @mouseout="auto">
+		<div class="swiper-item" v-for="(item,ind) in gallery" :key="item" v-show="ind==index">
+			<img :src="item" width="100%"  style="width: 300px; height: 450px; overflow: hidden">
+		</div>
+		<div class="thumbs" v-if="gallery.length > 1">
+			<span class="thumb" :class="{'active' :item==index+1}" v-for="item in gallery.length" :key='item'
+				@click="index=item-1">{{item}}</span>
+		</div>
+	</div>
+</template>
+ 
+<script>
+	export default {
+		props: {
+			gallery: {
+				type: Array,
+				default () {
+					return []
+				}
+			}
+		},
+		data() {
+			return {
+				//默认显示 
+				index: 0,
+				stopID: null,
+			}
+		},
+		// 当组件挂载完毕 执行自动播放
+		created() {
+			this.auto();
+		},
+		beforeDestroy(){
+			this.overHd();
+		},
+		methods: {
+			//鼠标一开  auto自动执行
+			auto() {
+				this.stopID = setInterval(() => {
+					this.index++;
+					this.check();
+				}, 5000)
+			},
+			overHd() {
+				clearInterval(this.stopID);
+			},
+			//检查边界
+			check() {
+				if (this.index == this.gallery.length) {
+					this.index = 0;
+				}
+			}
+		}
+	}
+</script>
+ 
+<style scoped="scoped">
+	.swiper {
+		position: relative;
+	}
+ 
+	.swiper .thumbs {
+		position: absolute;
+		bottom: 10px;
+		width: 100%;
+		text-align: center;
+	}
+ 
+	.thumb {
+		width: 10px;
+		height: 10px;
+		display: inline-block;
+		border-radius: 15px;
+		text-indent: 9999em;
+		margin: 0 5px;
+		background-color: #fff;
+	}
+ 
+	.thumb:hover {
+		cursor: pointer;
+		background-color: #42b983;
+	}
+	.active {
+		background-color: #42b983;
+ 
+	}
+</style>
\ No newline at end of file
diff --git a/src/views/caseManage/caseCommon/caseFormProcess.vue b/src/views/caseManage/caseCommon/caseFormProcess.vue
index f8a9666..e6a6446 100644
--- a/src/views/caseManage/caseCommon/caseFormProcess.vue
+++ b/src/views/caseManage/caseCommon/caseFormProcess.vue
@@ -4,138 +4,183 @@
       <el-row :gutter="20">
         <el-col :span="6">
           <el-form-item label="事件编号">
-            <el-input :value="caseForm.caseId" size="small"/>
+            <el-input :value="caseForm.caseId" size="small" />
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="来电时间">
-            <el-input :value="caseForm.callTime" size="small"/>
+            <el-input :value="caseForm.callTime" size="small" />
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="联系人">
-            <el-input :value="caseForm.reporterName" size="small"/>
+            <el-input :value="caseForm.reporterName" size="small" />
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="联系电话">
-            <el-input :value="caseForm.reporterPhone" size="small"/>
+            <el-input :value="caseForm.reporterPhone" size="small" />
           </el-form-item>
         </el-col>
       </el-row>
       <el-row :gutter="20">
         <el-col :span="6">
           <el-form-item label="事件来源">
-            <el-input :value="caseForm.sourceName" size="small"/>
+            <el-input :value="caseForm.sourceName" size="small" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="事件类型">
+            <el-input :value="caseForm.sourceType" size="small" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="精细化平台事件编号">
+            <el-input :value="caseForm.sourceNumber" size="small" />
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="事件分类">
-            <el-input :value="caseForm.eorcName" size="small"/>
+            <el-input :value="caseForm.eorcName" size="small" />
             <!--<el-input :value="caseForm.eorcName + '/' + caseForm.caseTypeName" size="small"/>-->
             <!--<el-input :value="caseForm.eorcName + '/' + caseForm.caseTypeName + '/' + caseForm.caseDetailTypeName" size="small"/>-->
           </el-form-item>
         </el-col>
-        <el-col :span="6">
-          <el-form-item label="紧急程度">
-            <el-input :value="caseForm.caseLevelName" size="small"/>
-          </el-form-item>
-        </el-col>
+
         <el-col :span="6">
           <el-form-item label="限办日期">
-            <el-input :value="caseForm.limitedTime" size="small"/>
+            <el-input :value="caseForm.limitedTime" size="small" />
           </el-form-item>
         </el-col>
-      </el-row>
-      <el-row :gutter="20">
         <el-col :span="6">
           <el-form-item label="事件地址">
             <!--<el-input :value="caseForm.areaName + '-' + caseForm.streetName + '-' + caseForm.communityName + '-' + caseForm.fieldintro" size="small"/>-->
-            <el-input :value="address" size="small"/>
+            <el-input :value="address" size="small" />
           </el-form-item>
         </el-col>
         <el-col :span="6">
-          <el-form-item label="事件辖区">
-            <el-input :value="caseForm.areaName" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="典型案例">
-            <el-input :value="caseForm.isTypical === '1' ? '是' : '否'" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="要情">
-            <el-input :value="caseForm.isImportant === '1' ? '是' : '否'" size="small"/>
+          <!-- <el-form-item label="紧急程度"> -->
+          <el-form-item label="事件状态">
+            <el-input :value="caseForm.caseLevelName" size="small" />
           </el-form-item>
         </el-col>
       </el-row>
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item label="当前事件状态">
-            <el-input :value="caseForm.stateName" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="当前处理方式">
-            <el-input :value="caseForm.caseStateName" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="需要回访">
-            <el-input :value="caseForm.isReturnVisit === '1' ? '是' : '否'" size="small"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="受理录音">
-            <el-input :value="caseForm.sound" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-button type="text" @click="playSound(caseForm.sound)">播放录音</el-button>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="回访录音">
-            <el-input :value="caseForm.satisfactionSound" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-button type="text" @click="playSound(caseForm.satisfactionSound)">播放录音</el-button>
-        <el-popover
-          v-if="caseForm.caseState === 5"
-          placement="top"
-          width="180"
-          v-model="popoverVisible">
-          <div style="text-align:center; margin: 0">
-            <el-button size="mini"  @click="revisit('')">本地号码</el-button>
-            <el-button type="primary" size="mini"  @click="revisit('0')">外地号码</el-button>
-          </div>
-          <el-button slot="reference" type="text">回访拨号</el-button>
-        </el-popover>
-      </el-row>
-      <el-row>
-        <el-col :span="24">
-          <el-form-item label="事件标题">
-            <el-input :value="caseForm.title" size="small"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row>
-        <el-col :span="24">
-          <el-form-item label="事件内容">
-            <el-input :value="caseForm.description" size="small"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row v-show="this.caseImage.length>0">
-        <el-form-item label="事件图片">
-          <!-- 图片展示 -->
-          <div class="image-container">
-            <el-image v-for="img in caseImage" :key="img" :src="img" fit="fill" class="case-image" :preview-src-list="caseImage"/>
-          </div>
-        </el-form-item>
-      </el-row>
+      <el-collapse v-model="activeName" accordion>
+        <el-collapse-item name="1">
+          <template slot="title">
+            <span class="collapse-title">更多信息</span>
+          </template>
+          <el-row :gutter="20">
+            <el-col :span="6">
+              <el-form-item label="事件辖区">
+                <el-input :value="caseForm.areaName" size="small" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="典型案例">
+                <el-input
+                  :value="caseForm.isTypical === '1' ? '是' : '否'"
+                  size="small"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="要情">
+                <el-input
+                  :value="caseForm.isImportant === '1' ? '是' : '否'"
+                  size="small"
+                />
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <el-row :gutter="20">
+            <el-col :span="6">
+              <el-form-item label="当前事件状态">
+                <el-input :value="caseForm.stateName" size="small" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="当前处理方式">
+                <el-input :value="caseForm.caseStateName" size="small" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="需要回访">
+                <el-input
+                  :value="caseForm.isReturnVisit === '1' ? '是' : '否'"
+                  size="small"
+                />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <el-form-item label="受理录音">
+                <el-input :value="caseForm.sound" size="small" />
+              </el-form-item>
+            </el-col>
+            <el-button type="text" @click="playSound(caseForm.sound)"
+              >播放录音</el-button
+            >
+          </el-row>
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <el-form-item label="回访录音">
+                <el-input :value="caseForm.satisfactionSound" size="small" />
+              </el-form-item>
+            </el-col>
+            <el-button
+              type="text"
+              @click="playSound(caseForm.satisfactionSound)"
+              >播放录音</el-button
+            >
+            <el-popover
+              v-if="caseForm.caseState === 5"
+              placement="top"
+              width="180"
+              v-model="popoverVisible"
+            >
+              <div style="text-align: center; margin: 0">
+                <el-button size="mini" @click="revisit('')">本地号码</el-button>
+                <el-button type="primary" size="mini" @click="revisit('0')"
+                  >外地号码</el-button
+                >
+              </div>
+              <el-button slot="reference" type="text">回访拨号</el-button>
+            </el-popover>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="事件标题">
+                <el-input :value="caseForm.title" size="small" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="事件内容">
+                <el-input :value="caseForm.description" size="small" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row v-show="this.caseImage.length > 0">
+            <el-form-item label="事件图片">
+              <!-- 图片展示 -->
+              <div class="image-container">
+                <el-image
+                  v-for="img in caseImage"
+                  :key="img"
+                  :src="img"
+                  fit="fill"
+                  class="case-image"
+                  :preview-src-list="caseImage"
+                />
+              </div>
+            </el-form-item>
+          </el-row>
+        </el-collapse-item>
+      </el-collapse>
       <!--<el-row>-->
       <!--<el-col :span="24">-->
       <!--<el-form-item label="备注信息">-->
@@ -151,98 +196,128 @@
       width="600px"
       append-to-body
       custom-class="sound-dialog"
-      @close="closeSound">
-      <audio-player ref="adplayer" :the-url="sound.url" :the-control-ist="sound.controlList"/>
+      @close="closeSound"
+    >
+      <audio-player
+        ref="adplayer"
+        :the-url="sound.url"
+        :the-control-ist="sound.controlList"
+      />
     </el-dialog>
   </div>
 </template>
 
 <script>
 // import { caseDetail } from '@/api/callCase'
-import { getSoundName } from '@/api/sound'
-import AudioPlayer from '@/components/AudioPlayer/AudioPlayer'
+import { getSoundName } from "@/api/sound";
+import AudioPlayer from "@/components/AudioPlayer/AudioPlayer";
 
 export default {
-  name: 'CaseFormProcess',
+  name: "CaseFormProcess",
   components: { AudioPlayer },
   props: {
     id: {
       type: String,
-      default: ''
+      default: "",
     }, // 事件id（主键id）
     caseForm: {
       type: Object,
       default() {
-        return {}
-      }
-    }
+        return {};
+      },
+    },
   },
   data() {
     return {
+      activeName: 1,
       sound: {
-        url: '',
-        controlList: 'noDownload noSpeed onlyOnePlaying'
+        url: "",
+        controlList: "noDownload noSpeed onlyOnePlaying",
       },
       popoverVisible: false, // 选择本地外地呼叫的弹窗
-      soundShow: false // 显示音频弹窗
-    }
+      soundShow: false, // 显示音频弹窗
+    };
   },
   computed: {
     address() {
-      const address_ori = [this.caseForm.areaName, this.caseForm.streetName, this.caseForm.communityName, this.caseForm.fieldintro]
-      const address = address_ori.filter(item => item && item.length > 0)
-      return address.join('-')
+      const address_ori = [
+        this.caseForm.areaName,
+        this.caseForm.streetName,
+        this.caseForm.communityName,
+        this.caseForm.fieldintro,
+      ];
+      const address = address_ori.filter((item) => item && item.length > 0);
+      return address.join("-");
     },
-    caseImage(){
-      if(this.caseForm.caseImage){
-        const base_url = process.env.BASE_API + '/static/'
-        const image_ori = this.caseForm.caseImage.split(';')
-        const imageList = image_ori.map(item=>base_url+ item)
-        return imageList
-      }else{
-        return []
+    caseImage() {
+      if (this.caseForm.caseImage) {
+        const base_url = process.env.BASE_API + "/static/";
+        const image_ori = this.caseForm.caseImage.split(";");
+        const imageList = image_ori.map((item) => base_url + item);
+        return imageList;
+      } else {
+        return [];
       }
-    }
+    },
   },
   methods: {
     // 播放录音
     playSound(sound) {
       if (sound) {
-        getSoundName(sound).then(res => {
-          const recordName = res.data
+        getSoundName(sound).then((res) => {
+          const recordName = res.data;
           if (recordName) {
-            this.sound.url = recordName
-            this.soundShow = true
+            this.sound.url = recordName;
+            this.soundShow = true;
           } else {
-            this.$message.warning('无录音')
+            this.$message.warning("无录音");
           }
-        })
+        });
       } else {
-        this.$message.warning('无录音')
+        this.$message.warning("无录音");
       }
     },
     // 关闭播放弹窗
     closeSound() {
-      this.$refs.adplayer.pausePlay()
+      this.$refs.adplayer.pausePlay();
     },
     // 拨打回访电话
     revisit(middleString) {
       // middleString为空或0，分别表示本地或外地
-      const tel = '9' + middleString + this.caseForm.reporterPhone
-      this.$store.dispatch('dial', tel)
-      this.popoverVisible = false
-    }
-  }
-}
+      const tel = "9" + middleString + this.caseForm.reporterPhone;
+      this.$store.dispatch("dial", tel);
+      this.popoverVisible = false;
+    },
+  },
+};
 </script>
 <style lang="scss" scoped>
-  .image-container{
-    display: flex;
-    justify-content: flex-start;
-    .case-image{
-      width:100px;
-      height:100px;
-      margin-right: 10px;
-    }
+.image-container {
+  display: flex;
+  justify-content: flex-start;
+  .case-image {
+    width: 100px;
+    height: 100px;
+    margin-right: 10px;
   }
+}
+.collapse-title {
+  font-size: 14px;
+  color: #606266;
+  font-weight: 800;
+  position: absolute;
+  right: 80px;
+  margin-top: -85px;
+}
+/deep/.el-collapse-item__arrow{
+  margin-top: -85px;
+}
+/deep/.el-collapse {
+  border: 0;
+}
+/deep/.el-collapse-item__header {
+  justify-content: end;
+  border: 0;
+  height: 0;
+}
 </style>

diff --git a/package.json b/package.json
index fb32aa2..c325e45 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
     "vue-amap": "^0.5.9",
     "vue-baidu-map": "^0.21.22",
     "vue-router": "3.0.1",
+    "vue-slide-mini": "^1.0.4",
     "vuex": "3.0.1",
     "wangeditor": "^3.1.1"
   },
diff --git a/src/api/callCase.js b/src/api/callCase.js
index cd61986..9da1fc7 100644
--- a/src/api/callCase.js
+++ b/src/api/callCase.js
@@ -126,3 +126,12 @@
     }
   })
 }
+
+// 社会治理事流转步骤接口
+export function eventStepList(data) {
+  return request({
+    url: '/callcenter/api/case/eventStepList',
+    method: 'post',
+    data
+  })
+}
diff --git a/src/assets/global_images/done.png b/src/assets/global_images/done.png
new file mode 100644
index 0000000..c9a2c5e
--- /dev/null
+++ b/src/assets/global_images/done.png
Binary files differ
diff --git a/src/assets/global_images/process.png b/src/assets/global_images/process.png
new file mode 100644
index 0000000..311fe3a
--- /dev/null
+++ b/src/assets/global_images/process.png
Binary files differ
diff --git a/src/components/NomalTable/index.vue b/src/components/NomalTable/index.vue
index 55a7378..8616987 100644
--- a/src/components/NomalTable/index.vue
+++ b/src/components/NomalTable/index.vue
@@ -55,7 +55,7 @@
         </el-col>
       </el-row>
       <!-- 表格正文-->
-      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="handleSelectionChange">
+      <el-table v-loading="listLoading" :data="data" :height="height" :size="size" class="table" row-class-name="small-row-class" border @selection-change="handleSelectionChange">
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns"/>
         <!--多选选中列-->
@@ -176,7 +176,10 @@
           refresh: false // 是否需要刷新按钮
         }
       }
-    }// 表格工具配置
+    },// 表格工具配置
+    height:{
+      type:String,
+    }
   },
   data() {
     return {
diff --git a/src/components/SelectTree/singleSelect.vue b/src/components/SelectTree/singleSelect.vue
index ba15b20..3336346 100644
--- a/src/components/SelectTree/singleSelect.vue
+++ b/src/components/SelectTree/singleSelect.vue
@@ -6,7 +6,8 @@
     trigger="click"
     class="select-tree scrollbar"
     @show="onShowPopover"
-    @hide="onHidePopover">
+    @hide="onHidePopover"
+  >
     <el-tree
       ref="tree"
       :style="`min-width: ${treeWidth}`"
@@ -14,265 +15,276 @@
       :props="props"
       :expand-on-click-node="false"
       :filter-node-method="filterNode"
-      :default-expand-all="false"
+      :default-expand-all="expandAll"
       class="innerbox"
       highlight-current
       accordion
-      @node-click="onClickNode"/>
+      @node-click="onClickNode"
+    />
     <el-input
       slot="reference"
       ref="input"
       v-model="labelModel"
       :style="`width: ${width}px`"
       :size="size"
-      :class="{ 'rotate': showStatus }"
+      :class="{ rotate: showStatus }"
       :placeholder="placeholder"
       :disabled="disabled"
       clearable
-      suffix-icon="el-icon-arrow-down"/>
+      suffix-icon="el-icon-arrow-down"
+    />
   </el-popover>
 </template>
 
 <script>
-
 export default {
-  name: 'SelectTree',
+  name: "SelectTree",
+
   // 设置绑定参数
   model: {
-    prop: 'value',
-    event: 'selected'
+    prop: "value",
+    event: "selected",
   },
   props: {
+    // 是否默认展开全部
+    expandAll: {
+      type: Boolean,
+      default: false,
+    },
     // 接收绑定参数
     value: {
       type: String,
-      default: ''
+      default: "",
     },
     // 输入框宽度
     width: {
       type: String,
-      default: ''
+      default: "",
     },
     size: {
       type: String,
-      default: ''
+      default: "",
     },
     // 输入框宽度
     disabled: {
       type: Boolean,
-      default: false
+      default: false,
     },
     // 选项数据
     options: {
       type: Array,
-      required: true
+      required: true,
     },
     // 输入框占位符
     placeholder: {
       type: String,
       required: false,
-      default: '请选择'
+      default: "请选择",
     },
     // 树节点配置选项
     props: {
       type: Object,
       required: false,
       default: () => ({
-        parent: 'parentId',
-        value: 'rowGuid',
-        label: 'areaName',
-        children: 'children'
-      })
-    }
+        parent: "parentId",
+        value: "rowGuid",
+        label: "areaName",
+        children: "children",
+      }),
+    },
   },
   data() {
     return {
       // 树状菜单显示状态
       showStatus: false,
       // 菜单宽度
-      treeWidth: 'auto',
+      treeWidth: "auto",
       // 输入框显示值
-      labelModel: '',
+      labelModel: "",
       // 实际请求传值
-      valueModel: ''
-    }
+      valueModel: "",
+    };
   },
   computed: {
     // 是否为树状结构数据
     dataType() {
-      const jsonStr = JSON.stringify(this.options)
-      return jsonStr.indexOf(this.props.children) !== -1
+      const jsonStr = JSON.stringify(this.options);
+      return jsonStr.indexOf(this.props.children) !== -1;
     },
     // 若非树状结构，则转化为树状结构数据
     data() {
       // return this.dataType ? this.options : this.switchTree()
-      return this.options
-    }
+      return this.options;
+    },
   },
   watch: {
     labelModel(val) {
-      console.log('labelModel change:' + val)
+      console.log("labelModel change:" + val);
       if (!val) {
-        if (val === '') {
-          this.valueModel = ''
-          this.onCloseTree()
-          this.$emit('selected', this.valueModel)
+        if (val === "") {
+          this.valueModel = "";
+          this.onCloseTree();
+          this.$emit("selected", this.valueModel);
         }
-        this.valueModel = ''
+        this.valueModel = "";
       }
-      this.$refs.tree.filter(val)
+      this.$refs.tree.filter(val);
     },
     value(val) {
-      this.labelModel = this.queryTree(this.data, val)
-    }
+      this.labelModel = this.queryTree(this.data, val);
+    },
   },
   created() {
     // 检测输入框原有值并显示对应 label
     if (this.value) {
-      this.labelModel = this.queryTree(this.data, this.value)
+      this.labelModel = this.queryTree(this.data, this.value);
     }
     // 获取输入框宽度同步至树状菜单宽度
     this.$nextTick(() => {
-      this.treeWidth = `${(this.width || this.$refs.input.$refs.input.clientWidth) - 24}px`
-    })
+      this.treeWidth = `${
+        (this.width || this.$refs.input.$refs.input.clientWidth) - 24
+      }px`;
+    });
   },
   methods: {
     // 单击节点
     onClickNode(node) {
-      this.labelModel = node[this.props.label]
-      this.valueModel = node[this.props.value]
-      this.onCloseTree()
+      this.labelModel = node[this.props.label];
+      this.valueModel = node[this.props.value];
+      this.onCloseTree();
     },
     // 偏平数组转化为树状层级结构
     switchTree() {
-      return this.cleanChildren(this.buildTree(this.options, '0'))
+      return this.cleanChildren(this.buildTree(this.options, "0"));
     },
     // 隐藏树状菜单
     onCloseTree() {
-      this.$refs.popover.showPopper = false
+      this.$refs.popover.showPopper = false;
     },
     // 显示时触发
     onShowPopover() {
-      this.showStatus = true
-      this.$refs.tree.filter(false)
+      this.showStatus = true;
+      this.$refs.tree.filter(false);
     },
     // 隐藏时触发
     onHidePopover() {
-      this.showStatus = false
-      console.log('onHidePopover:' + this.valueModel)
+      this.showStatus = false;
+      console.log("onHidePopover:" + this.valueModel);
       // if (this.valueModel !== '') {
       //   this.$emit('selected', this.valueModel)
       // }
-      this.$emit('selected', this.valueModel)
+      this.$emit("selected", this.valueModel);
     },
     // 树节点过滤方法
     filterNode(query, data) {
-      if (!query) return true
-      return data[this.props.label].indexOf(query) !== -1
+      if (!query) return true;
+      return data[this.props.label].indexOf(query) !== -1;
     },
     // 搜索树状数据中的 ID
     queryTree(tree, id) {
-      let stark = []
-      stark = stark.concat(tree)
+      let stark = [];
+      stark = stark.concat(tree);
       while (stark.length) {
-        const temp = stark.shift()
+        const temp = stark.shift();
         if (temp[this.props.children]) {
-          stark = stark.concat(temp[this.props.children])
+          stark = stark.concat(temp[this.props.children]);
         }
         if (temp[this.props.value] === id) {
-          return temp[this.props.label]
+          return temp[this.props.label];
         }
       }
-      return ''
+      return "";
     },
     // 将一维的扁平数组转换为多层级对象
-    buildTree(data, id = '0') {
+    buildTree(data, id = "0") {
       const fa = (parentId) => {
-        console.log('parentId:' + parentId)
-        const temp = []
+        console.log("parentId:" + parentId);
+        const temp = [];
         for (let i = 0; i < data.length; i++) {
-          const n = data[i]
+          const n = data[i];
           if (n[this.props.parent] === parentId) {
-            n.children = fa(n.code)
-            temp.push(n)
+            n.children = fa(n.code);
+            temp.push(n);
           }
         }
-        return temp
-      }
-      return fa(id)
+        return temp;
+      };
+      return fa(id);
     },
     // 清除空 children项
     cleanChildren(data) {
       const fa = (list) => {
         list.map((e) => {
           if (e.children.length) {
-            fa(e.children)
+            fa(e.children);
           } else {
-            delete e.children
+            delete e.children;
           }
-          return e
-        })
-        return list
-      }
-      return fa(data)
-    }
-  }
-}
+          return e;
+        });
+        return list;
+      };
+      return fa(data);
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-  .scrollbar {
-    overflow-y: scroll;
-    &::-webkit-scrollbar {
-      z-index: 11;
-      width: 6px;
-    }
-    &::-webkit-scrollbar-track,
-    &::-webkit-scrollbar-corner {
-      background: #fff;
-    }
-    &::-webkit-scrollbar-thumb {
-      // border-radius: 5px;
-      width: 6px;
-      background-color: #eee;
-      &:hover {
-        background-color: #ccc;
-      }
-    }
-    &::-webkit-scrollbar-track-piece {
-      background: #fff;
-      width: 6px;
+.scrollbar {
+  overflow-y: scroll;
+  &::-webkit-scrollbar {
+    z-index: 11;
+    width: 6px;
+  }
+  &::-webkit-scrollbar-track,
+  &::-webkit-scrollbar-corner {
+    background: #fff;
+  }
+  &::-webkit-scrollbar-thumb {
+    // border-radius: 5px;
+    width: 6px;
+    background-color: #eee;
+    &:hover {
+      background-color: #ccc;
     }
   }
-  .select-tree .el-tree {
-    max-height: 350px;
+  &::-webkit-scrollbar-track-piece {
+    background: #fff;
+    width: 6px;
   }
-  .select-tree .el-input.el-input--suffix {
-    cursor: pointer;
-  }
-  .select-tree .el-input.el-input--suffix.rotate .el-input__suffix {
-    transform: rotate(180deg);
-  }
+}
+.select-tree .el-tree {
+  max-height: 350px;
+}
+.select-tree .el-input.el-input--suffix {
+  cursor: pointer;
+}
+.select-tree .el-input.el-input--suffix.rotate .el-input__suffix {
+  transform: rotate(180deg);
+}
 
-  .innerbox::-webkit-scrollbar {/*滚动条整体样式*/
-    width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
-    height: 4px;
-  }
-  .innerbox::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
-    border-radius: 5px;
-    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
-    background: rgba(0,0,0,0.2);
-  }
-  .innerbox::-webkit-scrollbar-track { /*滚动条里面轨道*/
-    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
-    border-radius: 0;
-    background: rgba(0, 0, 0, 0.1);
-  }
+.innerbox::-webkit-scrollbar {
+  /*滚动条整体样式*/
+  width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
+  height: 4px;
+}
+.innerbox::-webkit-scrollbar-thumb {
+  /*滚动条里面小方块*/
+  border-radius: 5px;
+  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  background: rgba(0, 0, 0, 0.2);
+}
+.innerbox::-webkit-scrollbar-track {
+  /*滚动条里面轨道*/
+  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  border-radius: 0;
+  background: rgba(0, 0, 0, 0.1);
+}
 </style>
 <style lang="scss">
-  .el-popover{
-    max-height: 400px;
-    overflow: auto;
-  }
-
+.el-popover {
+  max-height: 400px;
+  overflow: auto;
+}
 </style>
diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss
index 65abe46..8236420 100644
--- a/src/styles/sidebar.scss
+++ b/src/styles/sidebar.scss
@@ -212,3 +212,8 @@
 .is-active>.light-line{
   background-color: $menuActiveText
 }
+
+.el-image-viewer__close{
+  color: #fff !important;
+  font-size: 52px !important;
+}
\ No newline at end of file
diff --git a/src/views/caseManage/caseCommon/SwiperImg.vue b/src/views/caseManage/caseCommon/SwiperImg.vue
new file mode 100644
index 0000000..4ff3fd2
--- /dev/null
+++ b/src/views/caseManage/caseCommon/SwiperImg.vue
@@ -0,0 +1,88 @@
+<template>
+	<div class="swiper" @mouseover="overHd" @mouseout="auto">
+		<div class="swiper-item" v-for="(item,ind) in gallery" :key="item" v-show="ind==index">
+			<img :src="item" width="100%"  style="width: 300px; height: 450px; overflow: hidden">
+		</div>
+		<div class="thumbs" v-if="gallery.length > 1">
+			<span class="thumb" :class="{'active' :item==index+1}" v-for="item in gallery.length" :key='item'
+				@click="index=item-1">{{item}}</span>
+		</div>
+	</div>
+</template>
+ 
+<script>
+	export default {
+		props: {
+			gallery: {
+				type: Array,
+				default () {
+					return []
+				}
+			}
+		},
+		data() {
+			return {
+				//默认显示 
+				index: 0,
+				stopID: null,
+			}
+		},
+		// 当组件挂载完毕 执行自动播放
+		created() {
+			this.auto();
+		},
+		beforeDestroy(){
+			this.overHd();
+		},
+		methods: {
+			//鼠标一开  auto自动执行
+			auto() {
+				this.stopID = setInterval(() => {
+					this.index++;
+					this.check();
+				}, 5000)
+			},
+			overHd() {
+				clearInterval(this.stopID);
+			},
+			//检查边界
+			check() {
+				if (this.index == this.gallery.length) {
+					this.index = 0;
+				}
+			}
+		}
+	}
+</script>
+ 
+<style scoped="scoped">
+	.swiper {
+		position: relative;
+	}
+ 
+	.swiper .thumbs {
+		position: absolute;
+		bottom: 10px;
+		width: 100%;
+		text-align: center;
+	}
+ 
+	.thumb {
+		width: 10px;
+		height: 10px;
+		display: inline-block;
+		border-radius: 15px;
+		text-indent: 9999em;
+		margin: 0 5px;
+		background-color: #fff;
+	}
+ 
+	.thumb:hover {
+		cursor: pointer;
+		background-color: #42b983;
+	}
+	.active {
+		background-color: #42b983;
+ 
+	}
+</style>
\ No newline at end of file
diff --git a/src/views/caseManage/caseCommon/caseFormProcess.vue b/src/views/caseManage/caseCommon/caseFormProcess.vue
index f8a9666..e6a6446 100644
--- a/src/views/caseManage/caseCommon/caseFormProcess.vue
+++ b/src/views/caseManage/caseCommon/caseFormProcess.vue
@@ -4,138 +4,183 @@
       <el-row :gutter="20">
         <el-col :span="6">
           <el-form-item label="事件编号">
-            <el-input :value="caseForm.caseId" size="small"/>
+            <el-input :value="caseForm.caseId" size="small" />
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="来电时间">
-            <el-input :value="caseForm.callTime" size="small"/>
+            <el-input :value="caseForm.callTime" size="small" />
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="联系人">
-            <el-input :value="caseForm.reporterName" size="small"/>
+            <el-input :value="caseForm.reporterName" size="small" />
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="联系电话">
-            <el-input :value="caseForm.reporterPhone" size="small"/>
+            <el-input :value="caseForm.reporterPhone" size="small" />
           </el-form-item>
         </el-col>
       </el-row>
       <el-row :gutter="20">
         <el-col :span="6">
           <el-form-item label="事件来源">
-            <el-input :value="caseForm.sourceName" size="small"/>
+            <el-input :value="caseForm.sourceName" size="small" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="事件类型">
+            <el-input :value="caseForm.sourceType" size="small" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="精细化平台事件编号">
+            <el-input :value="caseForm.sourceNumber" size="small" />
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="事件分类">
-            <el-input :value="caseForm.eorcName" size="small"/>
+            <el-input :value="caseForm.eorcName" size="small" />
             <!--<el-input :value="caseForm.eorcName + '/' + caseForm.caseTypeName" size="small"/>-->
             <!--<el-input :value="caseForm.eorcName + '/' + caseForm.caseTypeName + '/' + caseForm.caseDetailTypeName" size="small"/>-->
           </el-form-item>
         </el-col>
-        <el-col :span="6">
-          <el-form-item label="紧急程度">
-            <el-input :value="caseForm.caseLevelName" size="small"/>
-          </el-form-item>
-        </el-col>
+
         <el-col :span="6">
           <el-form-item label="限办日期">
-            <el-input :value="caseForm.limitedTime" size="small"/>
+            <el-input :value="caseForm.limitedTime" size="small" />
           </el-form-item>
         </el-col>
-      </el-row>
-      <el-row :gutter="20">
         <el-col :span="6">
           <el-form-item label="事件地址">
             <!--<el-input :value="caseForm.areaName + '-' + caseForm.streetName + '-' + caseForm.communityName + '-' + caseForm.fieldintro" size="small"/>-->
-            <el-input :value="address" size="small"/>
+            <el-input :value="address" size="small" />
           </el-form-item>
         </el-col>
         <el-col :span="6">
-          <el-form-item label="事件辖区">
-            <el-input :value="caseForm.areaName" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="典型案例">
-            <el-input :value="caseForm.isTypical === '1' ? '是' : '否'" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="要情">
-            <el-input :value="caseForm.isImportant === '1' ? '是' : '否'" size="small"/>
+          <!-- <el-form-item label="紧急程度"> -->
+          <el-form-item label="事件状态">
+            <el-input :value="caseForm.caseLevelName" size="small" />
           </el-form-item>
         </el-col>
       </el-row>
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item label="当前事件状态">
-            <el-input :value="caseForm.stateName" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="当前处理方式">
-            <el-input :value="caseForm.caseStateName" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="需要回访">
-            <el-input :value="caseForm.isReturnVisit === '1' ? '是' : '否'" size="small"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="受理录音">
-            <el-input :value="caseForm.sound" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-button type="text" @click="playSound(caseForm.sound)">播放录音</el-button>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="回访录音">
-            <el-input :value="caseForm.satisfactionSound" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-button type="text" @click="playSound(caseForm.satisfactionSound)">播放录音</el-button>
-        <el-popover
-          v-if="caseForm.caseState === 5"
-          placement="top"
-          width="180"
-          v-model="popoverVisible">
-          <div style="text-align:center; margin: 0">
-            <el-button size="mini"  @click="revisit('')">本地号码</el-button>
-            <el-button type="primary" size="mini"  @click="revisit('0')">外地号码</el-button>
-          </div>
-          <el-button slot="reference" type="text">回访拨号</el-button>
-        </el-popover>
-      </el-row>
-      <el-row>
-        <el-col :span="24">
-          <el-form-item label="事件标题">
-            <el-input :value="caseForm.title" size="small"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row>
-        <el-col :span="24">
-          <el-form-item label="事件内容">
-            <el-input :value="caseForm.description" size="small"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row v-show="this.caseImage.length>0">
-        <el-form-item label="事件图片">
-          <!-- 图片展示 -->
-          <div class="image-container">
-            <el-image v-for="img in caseImage" :key="img" :src="img" fit="fill" class="case-image" :preview-src-list="caseImage"/>
-          </div>
-        </el-form-item>
-      </el-row>
+      <el-collapse v-model="activeName" accordion>
+        <el-collapse-item name="1">
+          <template slot="title">
+            <span class="collapse-title">更多信息</span>
+          </template>
+          <el-row :gutter="20">
+            <el-col :span="6">
+              <el-form-item label="事件辖区">
+                <el-input :value="caseForm.areaName" size="small" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="典型案例">
+                <el-input
+                  :value="caseForm.isTypical === '1' ? '是' : '否'"
+                  size="small"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="要情">
+                <el-input
+                  :value="caseForm.isImportant === '1' ? '是' : '否'"
+                  size="small"
+                />
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <el-row :gutter="20">
+            <el-col :span="6">
+              <el-form-item label="当前事件状态">
+                <el-input :value="caseForm.stateName" size="small" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="当前处理方式">
+                <el-input :value="caseForm.caseStateName" size="small" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="需要回访">
+                <el-input
+                  :value="caseForm.isReturnVisit === '1' ? '是' : '否'"
+                  size="small"
+                />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <el-form-item label="受理录音">
+                <el-input :value="caseForm.sound" size="small" />
+              </el-form-item>
+            </el-col>
+            <el-button type="text" @click="playSound(caseForm.sound)"
+              >播放录音</el-button
+            >
+          </el-row>
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <el-form-item label="回访录音">
+                <el-input :value="caseForm.satisfactionSound" size="small" />
+              </el-form-item>
+            </el-col>
+            <el-button
+              type="text"
+              @click="playSound(caseForm.satisfactionSound)"
+              >播放录音</el-button
+            >
+            <el-popover
+              v-if="caseForm.caseState === 5"
+              placement="top"
+              width="180"
+              v-model="popoverVisible"
+            >
+              <div style="text-align: center; margin: 0">
+                <el-button size="mini" @click="revisit('')">本地号码</el-button>
+                <el-button type="primary" size="mini" @click="revisit('0')"
+                  >外地号码</el-button
+                >
+              </div>
+              <el-button slot="reference" type="text">回访拨号</el-button>
+            </el-popover>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="事件标题">
+                <el-input :value="caseForm.title" size="small" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="事件内容">
+                <el-input :value="caseForm.description" size="small" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row v-show="this.caseImage.length > 0">
+            <el-form-item label="事件图片">
+              <!-- 图片展示 -->
+              <div class="image-container">
+                <el-image
+                  v-for="img in caseImage"
+                  :key="img"
+                  :src="img"
+                  fit="fill"
+                  class="case-image"
+                  :preview-src-list="caseImage"
+                />
+              </div>
+            </el-form-item>
+          </el-row>
+        </el-collapse-item>
+      </el-collapse>
       <!--<el-row>-->
       <!--<el-col :span="24">-->
       <!--<el-form-item label="备注信息">-->
@@ -151,98 +196,128 @@
       width="600px"
       append-to-body
       custom-class="sound-dialog"
-      @close="closeSound">
-      <audio-player ref="adplayer" :the-url="sound.url" :the-control-ist="sound.controlList"/>
+      @close="closeSound"
+    >
+      <audio-player
+        ref="adplayer"
+        :the-url="sound.url"
+        :the-control-ist="sound.controlList"
+      />
     </el-dialog>
   </div>
 </template>
 
 <script>
 // import { caseDetail } from '@/api/callCase'
-import { getSoundName } from '@/api/sound'
-import AudioPlayer from '@/components/AudioPlayer/AudioPlayer'
+import { getSoundName } from "@/api/sound";
+import AudioPlayer from "@/components/AudioPlayer/AudioPlayer";
 
 export default {
-  name: 'CaseFormProcess',
+  name: "CaseFormProcess",
   components: { AudioPlayer },
   props: {
     id: {
       type: String,
-      default: ''
+      default: "",
     }, // 事件id（主键id）
     caseForm: {
       type: Object,
       default() {
-        return {}
-      }
-    }
+        return {};
+      },
+    },
   },
   data() {
     return {
+      activeName: 1,
       sound: {
-        url: '',
-        controlList: 'noDownload noSpeed onlyOnePlaying'
+        url: "",
+        controlList: "noDownload noSpeed onlyOnePlaying",
       },
       popoverVisible: false, // 选择本地外地呼叫的弹窗
-      soundShow: false // 显示音频弹窗
-    }
+      soundShow: false, // 显示音频弹窗
+    };
   },
   computed: {
     address() {
-      const address_ori = [this.caseForm.areaName, this.caseForm.streetName, this.caseForm.communityName, this.caseForm.fieldintro]
-      const address = address_ori.filter(item => item && item.length > 0)
-      return address.join('-')
+      const address_ori = [
+        this.caseForm.areaName,
+        this.caseForm.streetName,
+        this.caseForm.communityName,
+        this.caseForm.fieldintro,
+      ];
+      const address = address_ori.filter((item) => item && item.length > 0);
+      return address.join("-");
     },
-    caseImage(){
-      if(this.caseForm.caseImage){
-        const base_url = process.env.BASE_API + '/static/'
-        const image_ori = this.caseForm.caseImage.split(';')
-        const imageList = image_ori.map(item=>base_url+ item)
-        return imageList
-      }else{
-        return []
+    caseImage() {
+      if (this.caseForm.caseImage) {
+        const base_url = process.env.BASE_API + "/static/";
+        const image_ori = this.caseForm.caseImage.split(";");
+        const imageList = image_ori.map((item) => base_url + item);
+        return imageList;
+      } else {
+        return [];
       }
-    }
+    },
   },
   methods: {
     // 播放录音
     playSound(sound) {
       if (sound) {
-        getSoundName(sound).then(res => {
-          const recordName = res.data
+        getSoundName(sound).then((res) => {
+          const recordName = res.data;
           if (recordName) {
-            this.sound.url = recordName
-            this.soundShow = true
+            this.sound.url = recordName;
+            this.soundShow = true;
           } else {
-            this.$message.warning('无录音')
+            this.$message.warning("无录音");
           }
-        })
+        });
       } else {
-        this.$message.warning('无录音')
+        this.$message.warning("无录音");
       }
     },
     // 关闭播放弹窗
     closeSound() {
-      this.$refs.adplayer.pausePlay()
+      this.$refs.adplayer.pausePlay();
     },
     // 拨打回访电话
     revisit(middleString) {
       // middleString为空或0，分别表示本地或外地
-      const tel = '9' + middleString + this.caseForm.reporterPhone
-      this.$store.dispatch('dial', tel)
-      this.popoverVisible = false
-    }
-  }
-}
+      const tel = "9" + middleString + this.caseForm.reporterPhone;
+      this.$store.dispatch("dial", tel);
+      this.popoverVisible = false;
+    },
+  },
+};
 </script>
 <style lang="scss" scoped>
-  .image-container{
-    display: flex;
-    justify-content: flex-start;
-    .case-image{
-      width:100px;
-      height:100px;
-      margin-right: 10px;
-    }
+.image-container {
+  display: flex;
+  justify-content: flex-start;
+  .case-image {
+    width: 100px;
+    height: 100px;
+    margin-right: 10px;
   }
+}
+.collapse-title {
+  font-size: 14px;
+  color: #606266;
+  font-weight: 800;
+  position: absolute;
+  right: 80px;
+  margin-top: -85px;
+}
+/deep/.el-collapse-item__arrow{
+  margin-top: -85px;
+}
+/deep/.el-collapse {
+  border: 0;
+}
+/deep/.el-collapse-item__header {
+  justify-content: end;
+  border: 0;
+  height: 0;
+}
 </style>
diff --git a/src/views/caseManage/caseCommon/caseFormRead.vue b/src/views/caseManage/caseCommon/caseFormRead.vue
index 897023a..7fa39af 100644
--- a/src/views/caseManage/caseCommon/caseFormRead.vue
+++ b/src/views/caseManage/caseCommon/caseFormRead.vue
@@ -4,134 +4,173 @@
       <el-row :gutter="20">
         <el-col :span="6">
           <el-form-item label="事件编号">
-            <el-input :value="caseForm.caseId" size="small"/>
+            <el-input :value="caseForm.caseId" size="small" />
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="来电时间">
-            <el-input :value="caseForm.callTime" size="small"/>
+            <el-input :value="caseForm.callTime" size="small" />
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="联系人">
-            <el-input :value="caseForm.reporterName" size="small"/>
+            <el-input :value="caseForm.reporterName" size="small" />
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="联系电话">
-            <el-input :value="caseForm.reporterPhone" size="small"/>
+            <el-input :value="caseForm.reporterPhone" size="small" />
           </el-form-item>
         </el-col>
       </el-row>
       <el-row :gutter="20">
         <el-col :span="6">
           <el-form-item label="事件来源">
-            <el-input :value="caseForm.sourceName" size="small"/>
+            <el-input :value="caseForm.sourceName" size="small" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="事件类型">
+            <el-input :value="caseForm.sourceType" size="small" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="精细化平台事件编号">
+            <el-input :value="caseForm.sourceNumber" size="small" />
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="事件分类">
-            <el-input :value="caseForm.eorcName" size="small"/>
+            <el-input :value="caseForm.eorcName" size="small" />
             <!--<el-input :value="caseForm.eorcName + '/' + caseForm.caseTypeName" size="small"/>-->
             <!--<el-input :value="caseForm.eorcName + '/' + caseForm.caseTypeName + '/' + caseForm.caseDetailTypeName" size="small"/>-->
           </el-form-item>
         </el-col>
-        <el-col :span="6">
-          <el-form-item label="紧急程度">
-            <el-input :value="caseForm.caseLevelName" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="限办日期">
-            <el-input :value="caseForm.limitedTime" size="small"/>
-          </el-form-item>
-        </el-col>
       </el-row>
       <el-row :gutter="20">
         <el-col :span="6">
+          <el-form-item label="限办日期">
+            <el-input :value="caseForm.limitedTime" size="small" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
           <el-form-item label="事件地址">
             <!--<el-input :value="caseForm.areaName + '-' + caseForm.streetName + '-' + caseForm.communityName + '-' + caseForm.fieldintro" size="small"/>-->
-            <el-input :value="address" size="small"/>
+            <el-input :value="address" size="small" />
           </el-form-item>
         </el-col>
         <el-col :span="6">
-          <el-form-item label="事件辖区">
-            <el-input :value="caseForm.areaName" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="典型案例">
-            <el-input :value="caseForm.isTypical === '1' ? '是' : '否'" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="要情">
-            <el-input :value="caseForm.isImportant === '1' ? '是' : '否'" size="small"/>
+          <el-form-item label="事件状态">
+            <el-input :value="caseForm.caseLevelName" size="small" />
           </el-form-item>
         </el-col>
       </el-row>
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item label="当前事件状态">
-            <el-input :value="caseForm.stateName" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="当前处理方式">
-            <el-input :value="caseForm.caseStateName" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="需要回访">
-            <el-input :value="caseForm.isReturnVisit === '1' ? '是' : '否'" size="small"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row v-if="caseForm.sound" :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="受理录音">
-            <el-input :value="caseForm.sound" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-button type="text" @click="playSound(caseForm.sound)">播放录音</el-button>
-      </el-row>
-      <el-row v-if="caseForm.satisfactionSound" :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="回访录音">
-            <el-input :value="caseForm.satisfactionSound" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-button type="text" @click="playSound(caseForm.satisfactionSound)">播放录音</el-button>
-      </el-row>
-      <el-row>
-        <el-col :span="24">
-          <el-form-item label="事件标题">
-            <el-input :value="caseForm.title" size="small"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row>
-        <el-col :span="24">
-          <el-form-item label="事件内容">
-            <el-input :value="caseForm.description" size="small"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row v-show="this.caseImage.length>0">
-        <el-form-item label="事件图片">
-        <!-- 图片展示 -->
-        <div class="image-container">
-          <el-image v-for="img in caseImage" :key="img" :src="img" fit="fill" class="case-image" :preview-src-list="caseImage"/>
-        </div>
-        </el-form-item>
-      </el-row>
-      <!--<el-row>-->
-      <!--<el-col :span="24">-->
-      <!--<el-form-item label="备注信息">-->
-      <!--<el-input :value="caseForm.remarks" size="small"/>-->
-      <!--</el-form-item>-->
-      <!--</el-col>-->
-      <!--</el-row>-->
+      <el-collapse v-model="activeName" accordion>
+        <el-collapse-item name="1">
+          <template slot="title">
+            <span class="collapse-title">更多信息</span>
+          </template>
+          <el-row :gutter="20">
+            <el-col :span="6">
+              <el-form-item label="事件辖区">
+                <el-input :value="caseForm.areaName" size="small" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="典型案例">
+                <el-input
+                  :value="caseForm.isTypical === '1' ? '是' : '否'"
+                  size="small"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="要情">
+                <el-input
+                  :value="caseForm.isImportant === '1' ? '是' : '否'"
+                  size="small"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="当前事件状态">
+                <el-input :value="caseForm.stateName" size="small" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="当前处理方式">
+                <el-input :value="caseForm.caseStateName" size="small" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="需要回访">
+                <el-input
+                  :value="caseForm.isReturnVisit === '1' ? '是' : '否'"
+                  size="small"
+                />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row v-if="caseForm.sound" :gutter="20">
+            <el-col :span="12">
+              <el-form-item label="受理录音">
+                <el-input :value="caseForm.sound" size="small" />
+              </el-form-item>
+            </el-col>
+            <el-button type="text" @click="playSound(caseForm.sound)"
+              >播放录音</el-button
+            >
+          </el-row>
+          <el-row v-if="caseForm.satisfactionSound" :gutter="20">
+            <el-col :span="12">
+              <el-form-item label="回访录音">
+                <el-input :value="caseForm.satisfactionSound" size="small" />
+              </el-form-item>
+            </el-col>
+            <el-button
+              type="text"
+              @click="playSound(caseForm.satisfactionSound)"
+              >播放录音</el-button
+            >
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="事件标题">
+                <el-input :value="caseForm.title" size="small" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="事件内容">
+                <el-input :value="caseForm.description" size="small" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row v-show="this.caseImage.length > 0">
+            <el-form-item label="事件图片">
+              <!-- 图片展示 -->
+              <div class="image-container">
+                <el-image
+                  v-for="img in caseImage"
+                  :key="img"
+                  :src="img"
+                  fit="fill"
+                  class="case-image"
+                  :preview-src-list="caseImage"
+                />
+              </div>
+            </el-form-item>
+          </el-row>
+          <!--<el-row>-->
+          <!--<el-col :span="24">-->
+          <!--<el-form-item label="备注信息">-->
+          <!--<el-input :value="caseForm.remarks" size="small"/>-->
+          <!--</el-form-item>-->
+          <!--</el-col>-->
+          <!--</el-row>-->
+        </el-collapse-item>
+      </el-collapse>
     </el-form>
     <!--播放音频弹窗-->
     <el-dialog
@@ -140,90 +179,120 @@
       width="600px"
       append-to-body
       custom-class="sound-dialog"
-      @close="closeSound">
-      <audio-player ref="adplayer" :the-url="sound.url" :the-control-ist="sound.controlList"/>
+      @close="closeSound"
+    >
+      <audio-player
+        ref="adplayer"
+        :the-url="sound.url"
+        :the-control-ist="sound.controlList"
+      />
     </el-dialog>
   </div>
 </template>
 
 <script>
 // import { caseDetail } from '@/api/callCase'
-import { getSoundName } from '@/api/sound'
-import AudioPlayer from '@/components/AudioPlayer/AudioPlayer'
+import { getSoundName } from "@/api/sound";
+import AudioPlayer from "@/components/AudioPlayer/AudioPlayer";
 
 export default {
-  name: 'CaseFormRead',
+  name: "CaseFormRead",
   components: { AudioPlayer },
   props: {
     id: {
       type: String,
-      default: ''
+      default: "",
     }, // 事件id（主键id）
     caseForm: {
       type: Object,
       default() {
-        return {}
-      }
-    }
+        return {};
+      },
+    },
   },
   data() {
     return {
+      activeName: 1,
       sound: {
-        url: '',
-        controlList: 'noDownload noSpeed onlyOnePlaying'
+        url: "",
+        controlList: "noDownload noSpeed onlyOnePlaying",
       },
-      soundShow: false // 显示音频弹窗
-    }
+      soundShow: false, // 显示音频弹窗
+    };
   },
   computed: {
     address() {
-      const address_ori = [this.caseForm.areaName, this.caseForm.streetName, this.caseForm.communityName, this.caseForm.fieldintro]
-      const address = address_ori.filter(item => item && item.length > 0)
-      return address.join('-')
+      const address_ori = [
+        this.caseForm.areaName,
+        this.caseForm.streetName,
+        this.caseForm.communityName,
+        this.caseForm.fieldintro,
+      ];
+      const address = address_ori.filter((item) => item && item.length > 0);
+      return address.join("-");
     },
-    caseImage(){
-      if(this.caseForm.caseImage){
-        const base_url = process.env.BASE_API + '/static/'
-        const image_ori = this.caseForm.caseImage.split(';')
-        const imageList = image_ori.map(item=>base_url+ item)
-        return imageList
-      }else{
-        return []
+    caseImage() {
+      if (this.caseForm.caseImage) {
+        const base_url = process.env.BASE_API + "/static/";
+        const image_ori = this.caseForm.caseImage.split(";");
+        const imageList = image_ori.map((item) => base_url + item);
+        return imageList;
+      } else {
+        return [];
       }
-    }
+    },
   },
   methods: {
     // 播放录音
     playSound(sound) {
       if (sound) {
-        getSoundName(sound).then(res => {
-          const recordName = res.data
+        getSoundName(sound).then((res) => {
+          const recordName = res.data;
           if (recordName) {
-            this.sound.url = recordName
-            this.soundShow = true
+            this.sound.url = recordName;
+            this.soundShow = true;
           } else {
-            this.$message.warning('无录音')
+            this.$message.warning("无录音");
           }
-        })
+        });
       } else {
-        this.$message.warning('无录音')
+        this.$message.warning("无录音");
       }
     },
     // 关闭播放弹窗
     closeSound() {
-      this.$refs.adplayer.pausePlay()
-    }
-  }
-}
+      this.$refs.adplayer.pausePlay();
+    },
+  },
+};
 </script>
 <style lang="scss" scoped>
-  .image-container{
-    display: flex;
-    justify-content: flex-start;
-    .case-image{
-      width:100px;
-      height:100px;
-      margin-right: 10px;
-    }
+.image-container {
+  display: flex;
+  justify-content: flex-start;
+  .case-image {
+    width: 100px;
+    height: 100px;
+    margin-right: 10px;
   }
+}
+.collapse-title {
+  font-size: 14px;
+  color: #606266;
+  font-weight: 800;
+  position: absolute;
+  right: 80px;
+  margin-top: -85px;
+}
+/deep/.el-collapse-item__arrow {
+  margin-top: -85px;
+}
+/deep/.el-collapse {
+  border: 0;
+}
+/deep/.el-collapse-item__header {
+  justify-content: end;
+  border: 0;
+  height: 0;
+}
 </style>

diff --git a/package.json b/package.json
index fb32aa2..c325e45 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
     "vue-amap": "^0.5.9",
     "vue-baidu-map": "^0.21.22",
     "vue-router": "3.0.1",
+    "vue-slide-mini": "^1.0.4",
     "vuex": "3.0.1",
     "wangeditor": "^3.1.1"
   },
diff --git a/src/api/callCase.js b/src/api/callCase.js
index cd61986..9da1fc7 100644
--- a/src/api/callCase.js
+++ b/src/api/callCase.js
@@ -126,3 +126,12 @@
     }
   })
 }
+
+// 社会治理事流转步骤接口
+export function eventStepList(data) {
+  return request({
+    url: '/callcenter/api/case/eventStepList',
+    method: 'post',
+    data
+  })
+}
diff --git a/src/assets/global_images/done.png b/src/assets/global_images/done.png
new file mode 100644
index 0000000..c9a2c5e
--- /dev/null
+++ b/src/assets/global_images/done.png
Binary files differ
diff --git a/src/assets/global_images/process.png b/src/assets/global_images/process.png
new file mode 100644
index 0000000..311fe3a
--- /dev/null
+++ b/src/assets/global_images/process.png
Binary files differ
diff --git a/src/components/NomalTable/index.vue b/src/components/NomalTable/index.vue
index 55a7378..8616987 100644
--- a/src/components/NomalTable/index.vue
+++ b/src/components/NomalTable/index.vue
@@ -55,7 +55,7 @@
         </el-col>
       </el-row>
       <!-- 表格正文-->
-      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="handleSelectionChange">
+      <el-table v-loading="listLoading" :data="data" :height="height" :size="size" class="table" row-class-name="small-row-class" border @selection-change="handleSelectionChange">
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns"/>
         <!--多选选中列-->
@@ -176,7 +176,10 @@
           refresh: false // 是否需要刷新按钮
         }
       }
-    }// 表格工具配置
+    },// 表格工具配置
+    height:{
+      type:String,
+    }
   },
   data() {
     return {
diff --git a/src/components/SelectTree/singleSelect.vue b/src/components/SelectTree/singleSelect.vue
index ba15b20..3336346 100644
--- a/src/components/SelectTree/singleSelect.vue
+++ b/src/components/SelectTree/singleSelect.vue
@@ -6,7 +6,8 @@
     trigger="click"
     class="select-tree scrollbar"
     @show="onShowPopover"
-    @hide="onHidePopover">
+    @hide="onHidePopover"
+  >
     <el-tree
       ref="tree"
       :style="`min-width: ${treeWidth}`"
@@ -14,265 +15,276 @@
       :props="props"
       :expand-on-click-node="false"
       :filter-node-method="filterNode"
-      :default-expand-all="false"
+      :default-expand-all="expandAll"
       class="innerbox"
       highlight-current
       accordion
-      @node-click="onClickNode"/>
+      @node-click="onClickNode"
+    />
     <el-input
       slot="reference"
       ref="input"
       v-model="labelModel"
       :style="`width: ${width}px`"
       :size="size"
-      :class="{ 'rotate': showStatus }"
+      :class="{ rotate: showStatus }"
       :placeholder="placeholder"
       :disabled="disabled"
       clearable
-      suffix-icon="el-icon-arrow-down"/>
+      suffix-icon="el-icon-arrow-down"
+    />
   </el-popover>
 </template>
 
 <script>
-
 export default {
-  name: 'SelectTree',
+  name: "SelectTree",
+
   // 设置绑定参数
   model: {
-    prop: 'value',
-    event: 'selected'
+    prop: "value",
+    event: "selected",
   },
   props: {
+    // 是否默认展开全部
+    expandAll: {
+      type: Boolean,
+      default: false,
+    },
     // 接收绑定参数
     value: {
       type: String,
-      default: ''
+      default: "",
     },
     // 输入框宽度
     width: {
       type: String,
-      default: ''
+      default: "",
     },
     size: {
       type: String,
-      default: ''
+      default: "",
     },
     // 输入框宽度
     disabled: {
       type: Boolean,
-      default: false
+      default: false,
     },
     // 选项数据
     options: {
       type: Array,
-      required: true
+      required: true,
     },
     // 输入框占位符
     placeholder: {
       type: String,
       required: false,
-      default: '请选择'
+      default: "请选择",
     },
     // 树节点配置选项
     props: {
       type: Object,
       required: false,
       default: () => ({
-        parent: 'parentId',
-        value: 'rowGuid',
-        label: 'areaName',
-        children: 'children'
-      })
-    }
+        parent: "parentId",
+        value: "rowGuid",
+        label: "areaName",
+        children: "children",
+      }),
+    },
   },
   data() {
     return {
       // 树状菜单显示状态
       showStatus: false,
       // 菜单宽度
-      treeWidth: 'auto',
+      treeWidth: "auto",
       // 输入框显示值
-      labelModel: '',
+      labelModel: "",
       // 实际请求传值
-      valueModel: ''
-    }
+      valueModel: "",
+    };
   },
   computed: {
     // 是否为树状结构数据
     dataType() {
-      const jsonStr = JSON.stringify(this.options)
-      return jsonStr.indexOf(this.props.children) !== -1
+      const jsonStr = JSON.stringify(this.options);
+      return jsonStr.indexOf(this.props.children) !== -1;
     },
     // 若非树状结构，则转化为树状结构数据
     data() {
       // return this.dataType ? this.options : this.switchTree()
-      return this.options
-    }
+      return this.options;
+    },
   },
   watch: {
     labelModel(val) {
-      console.log('labelModel change:' + val)
+      console.log("labelModel change:" + val);
       if (!val) {
-        if (val === '') {
-          this.valueModel = ''
-          this.onCloseTree()
-          this.$emit('selected', this.valueModel)
+        if (val === "") {
+          this.valueModel = "";
+          this.onCloseTree();
+          this.$emit("selected", this.valueModel);
         }
-        this.valueModel = ''
+        this.valueModel = "";
       }
-      this.$refs.tree.filter(val)
+      this.$refs.tree.filter(val);
     },
     value(val) {
-      this.labelModel = this.queryTree(this.data, val)
-    }
+      this.labelModel = this.queryTree(this.data, val);
+    },
   },
   created() {
     // 检测输入框原有值并显示对应 label
     if (this.value) {
-      this.labelModel = this.queryTree(this.data, this.value)
+      this.labelModel = this.queryTree(this.data, this.value);
     }
     // 获取输入框宽度同步至树状菜单宽度
     this.$nextTick(() => {
-      this.treeWidth = `${(this.width || this.$refs.input.$refs.input.clientWidth) - 24}px`
-    })
+      this.treeWidth = `${
+        (this.width || this.$refs.input.$refs.input.clientWidth) - 24
+      }px`;
+    });
   },
   methods: {
     // 单击节点
     onClickNode(node) {
-      this.labelModel = node[this.props.label]
-      this.valueModel = node[this.props.value]
-      this.onCloseTree()
+      this.labelModel = node[this.props.label];
+      this.valueModel = node[this.props.value];
+      this.onCloseTree();
     },
     // 偏平数组转化为树状层级结构
     switchTree() {
-      return this.cleanChildren(this.buildTree(this.options, '0'))
+      return this.cleanChildren(this.buildTree(this.options, "0"));
     },
     // 隐藏树状菜单
     onCloseTree() {
-      this.$refs.popover.showPopper = false
+      this.$refs.popover.showPopper = false;
     },
     // 显示时触发
     onShowPopover() {
-      this.showStatus = true
-      this.$refs.tree.filter(false)
+      this.showStatus = true;
+      this.$refs.tree.filter(false);
     },
     // 隐藏时触发
     onHidePopover() {
-      this.showStatus = false
-      console.log('onHidePopover:' + this.valueModel)
+      this.showStatus = false;
+      console.log("onHidePopover:" + this.valueModel);
       // if (this.valueModel !== '') {
       //   this.$emit('selected', this.valueModel)
       // }
-      this.$emit('selected', this.valueModel)
+      this.$emit("selected", this.valueModel);
     },
     // 树节点过滤方法
     filterNode(query, data) {
-      if (!query) return true
-      return data[this.props.label].indexOf(query) !== -1
+      if (!query) return true;
+      return data[this.props.label].indexOf(query) !== -1;
     },
     // 搜索树状数据中的 ID
     queryTree(tree, id) {
-      let stark = []
-      stark = stark.concat(tree)
+      let stark = [];
+      stark = stark.concat(tree);
       while (stark.length) {
-        const temp = stark.shift()
+        const temp = stark.shift();
         if (temp[this.props.children]) {
-          stark = stark.concat(temp[this.props.children])
+          stark = stark.concat(temp[this.props.children]);
         }
         if (temp[this.props.value] === id) {
-          return temp[this.props.label]
+          return temp[this.props.label];
         }
       }
-      return ''
+      return "";
     },
     // 将一维的扁平数组转换为多层级对象
-    buildTree(data, id = '0') {
+    buildTree(data, id = "0") {
       const fa = (parentId) => {
-        console.log('parentId:' + parentId)
-        const temp = []
+        console.log("parentId:" + parentId);
+        const temp = [];
         for (let i = 0; i < data.length; i++) {
-          const n = data[i]
+          const n = data[i];
           if (n[this.props.parent] === parentId) {
-            n.children = fa(n.code)
-            temp.push(n)
+            n.children = fa(n.code);
+            temp.push(n);
           }
         }
-        return temp
-      }
-      return fa(id)
+        return temp;
+      };
+      return fa(id);
     },
     // 清除空 children项
     cleanChildren(data) {
       const fa = (list) => {
         list.map((e) => {
           if (e.children.length) {
-            fa(e.children)
+            fa(e.children);
           } else {
-            delete e.children
+            delete e.children;
           }
-          return e
-        })
-        return list
-      }
-      return fa(data)
-    }
-  }
-}
+          return e;
+        });
+        return list;
+      };
+      return fa(data);
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-  .scrollbar {
-    overflow-y: scroll;
-    &::-webkit-scrollbar {
-      z-index: 11;
-      width: 6px;
-    }
-    &::-webkit-scrollbar-track,
-    &::-webkit-scrollbar-corner {
-      background: #fff;
-    }
-    &::-webkit-scrollbar-thumb {
-      // border-radius: 5px;
-      width: 6px;
-      background-color: #eee;
-      &:hover {
-        background-color: #ccc;
-      }
-    }
-    &::-webkit-scrollbar-track-piece {
-      background: #fff;
-      width: 6px;
+.scrollbar {
+  overflow-y: scroll;
+  &::-webkit-scrollbar {
+    z-index: 11;
+    width: 6px;
+  }
+  &::-webkit-scrollbar-track,
+  &::-webkit-scrollbar-corner {
+    background: #fff;
+  }
+  &::-webkit-scrollbar-thumb {
+    // border-radius: 5px;
+    width: 6px;
+    background-color: #eee;
+    &:hover {
+      background-color: #ccc;
     }
   }
-  .select-tree .el-tree {
-    max-height: 350px;
+  &::-webkit-scrollbar-track-piece {
+    background: #fff;
+    width: 6px;
   }
-  .select-tree .el-input.el-input--suffix {
-    cursor: pointer;
-  }
-  .select-tree .el-input.el-input--suffix.rotate .el-input__suffix {
-    transform: rotate(180deg);
-  }
+}
+.select-tree .el-tree {
+  max-height: 350px;
+}
+.select-tree .el-input.el-input--suffix {
+  cursor: pointer;
+}
+.select-tree .el-input.el-input--suffix.rotate .el-input__suffix {
+  transform: rotate(180deg);
+}
 
-  .innerbox::-webkit-scrollbar {/*滚动条整体样式*/
-    width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
-    height: 4px;
-  }
-  .innerbox::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
-    border-radius: 5px;
-    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
-    background: rgba(0,0,0,0.2);
-  }
-  .innerbox::-webkit-scrollbar-track { /*滚动条里面轨道*/
-    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
-    border-radius: 0;
-    background: rgba(0, 0, 0, 0.1);
-  }
+.innerbox::-webkit-scrollbar {
+  /*滚动条整体样式*/
+  width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
+  height: 4px;
+}
+.innerbox::-webkit-scrollbar-thumb {
+  /*滚动条里面小方块*/
+  border-radius: 5px;
+  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  background: rgba(0, 0, 0, 0.2);
+}
+.innerbox::-webkit-scrollbar-track {
+  /*滚动条里面轨道*/
+  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  border-radius: 0;
+  background: rgba(0, 0, 0, 0.1);
+}
 </style>
 <style lang="scss">
-  .el-popover{
-    max-height: 400px;
-    overflow: auto;
-  }
-
+.el-popover {
+  max-height: 400px;
+  overflow: auto;
+}
 </style>
diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss
index 65abe46..8236420 100644
--- a/src/styles/sidebar.scss
+++ b/src/styles/sidebar.scss
@@ -212,3 +212,8 @@
 .is-active>.light-line{
   background-color: $menuActiveText
 }
+
+.el-image-viewer__close{
+  color: #fff !important;
+  font-size: 52px !important;
+}
\ No newline at end of file
diff --git a/src/views/caseManage/caseCommon/SwiperImg.vue b/src/views/caseManage/caseCommon/SwiperImg.vue
new file mode 100644
index 0000000..4ff3fd2
--- /dev/null
+++ b/src/views/caseManage/caseCommon/SwiperImg.vue
@@ -0,0 +1,88 @@
+<template>
+	<div class="swiper" @mouseover="overHd" @mouseout="auto">
+		<div class="swiper-item" v-for="(item,ind) in gallery" :key="item" v-show="ind==index">
+			<img :src="item" width="100%"  style="width: 300px; height: 450px; overflow: hidden">
+		</div>
+		<div class="thumbs" v-if="gallery.length > 1">
+			<span class="thumb" :class="{'active' :item==index+1}" v-for="item in gallery.length" :key='item'
+				@click="index=item-1">{{item}}</span>
+		</div>
+	</div>
+</template>
+ 
+<script>
+	export default {
+		props: {
+			gallery: {
+				type: Array,
+				default () {
+					return []
+				}
+			}
+		},
+		data() {
+			return {
+				//默认显示 
+				index: 0,
+				stopID: null,
+			}
+		},
+		// 当组件挂载完毕 执行自动播放
+		created() {
+			this.auto();
+		},
+		beforeDestroy(){
+			this.overHd();
+		},
+		methods: {
+			//鼠标一开  auto自动执行
+			auto() {
+				this.stopID = setInterval(() => {
+					this.index++;
+					this.check();
+				}, 5000)
+			},
+			overHd() {
+				clearInterval(this.stopID);
+			},
+			//检查边界
+			check() {
+				if (this.index == this.gallery.length) {
+					this.index = 0;
+				}
+			}
+		}
+	}
+</script>
+ 
+<style scoped="scoped">
+	.swiper {
+		position: relative;
+	}
+ 
+	.swiper .thumbs {
+		position: absolute;
+		bottom: 10px;
+		width: 100%;
+		text-align: center;
+	}
+ 
+	.thumb {
+		width: 10px;
+		height: 10px;
+		display: inline-block;
+		border-radius: 15px;
+		text-indent: 9999em;
+		margin: 0 5px;
+		background-color: #fff;
+	}
+ 
+	.thumb:hover {
+		cursor: pointer;
+		background-color: #42b983;
+	}
+	.active {
+		background-color: #42b983;
+ 
+	}
+</style>
\ No newline at end of file
diff --git a/src/views/caseManage/caseCommon/caseFormProcess.vue b/src/views/caseManage/caseCommon/caseFormProcess.vue
index f8a9666..e6a6446 100644
--- a/src/views/caseManage/caseCommon/caseFormProcess.vue
+++ b/src/views/caseManage/caseCommon/caseFormProcess.vue
@@ -4,138 +4,183 @@
       <el-row :gutter="20">
         <el-col :span="6">
           <el-form-item label="事件编号">
-            <el-input :value="caseForm.caseId" size="small"/>
+            <el-input :value="caseForm.caseId" size="small" />
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="来电时间">
-            <el-input :value="caseForm.callTime" size="small"/>
+            <el-input :value="caseForm.callTime" size="small" />
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="联系人">
-            <el-input :value="caseForm.reporterName" size="small"/>
+            <el-input :value="caseForm.reporterName" size="small" />
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="联系电话">
-            <el-input :value="caseForm.reporterPhone" size="small"/>
+            <el-input :value="caseForm.reporterPhone" size="small" />
           </el-form-item>
         </el-col>
       </el-row>
       <el-row :gutter="20">
         <el-col :span="6">
           <el-form-item label="事件来源">
-            <el-input :value="caseForm.sourceName" size="small"/>
+            <el-input :value="caseForm.sourceName" size="small" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="事件类型">
+            <el-input :value="caseForm.sourceType" size="small" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="精细化平台事件编号">
+            <el-input :value="caseForm.sourceNumber" size="small" />
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="事件分类">
-            <el-input :value="caseForm.eorcName" size="small"/>
+            <el-input :value="caseForm.eorcName" size="small" />
             <!--<el-input :value="caseForm.eorcName + '/' + caseForm.caseTypeName" size="small"/>-->
             <!--<el-input :value="caseForm.eorcName + '/' + caseForm.caseTypeName + '/' + caseForm.caseDetailTypeName" size="small"/>-->
           </el-form-item>
         </el-col>
-        <el-col :span="6">
-          <el-form-item label="紧急程度">
-            <el-input :value="caseForm.caseLevelName" size="small"/>
-          </el-form-item>
-        </el-col>
+
         <el-col :span="6">
           <el-form-item label="限办日期">
-            <el-input :value="caseForm.limitedTime" size="small"/>
+            <el-input :value="caseForm.limitedTime" size="small" />
           </el-form-item>
         </el-col>
-      </el-row>
-      <el-row :gutter="20">
         <el-col :span="6">
           <el-form-item label="事件地址">
             <!--<el-input :value="caseForm.areaName + '-' + caseForm.streetName + '-' + caseForm.communityName + '-' + caseForm.fieldintro" size="small"/>-->
-            <el-input :value="address" size="small"/>
+            <el-input :value="address" size="small" />
           </el-form-item>
         </el-col>
         <el-col :span="6">
-          <el-form-item label="事件辖区">
-            <el-input :value="caseForm.areaName" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="典型案例">
-            <el-input :value="caseForm.isTypical === '1' ? '是' : '否'" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="要情">
-            <el-input :value="caseForm.isImportant === '1' ? '是' : '否'" size="small"/>
+          <!-- <el-form-item label="紧急程度"> -->
+          <el-form-item label="事件状态">
+            <el-input :value="caseForm.caseLevelName" size="small" />
           </el-form-item>
         </el-col>
       </el-row>
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item label="当前事件状态">
-            <el-input :value="caseForm.stateName" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="当前处理方式">
-            <el-input :value="caseForm.caseStateName" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="需要回访">
-            <el-input :value="caseForm.isReturnVisit === '1' ? '是' : '否'" size="small"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="受理录音">
-            <el-input :value="caseForm.sound" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-button type="text" @click="playSound(caseForm.sound)">播放录音</el-button>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="回访录音">
-            <el-input :value="caseForm.satisfactionSound" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-button type="text" @click="playSound(caseForm.satisfactionSound)">播放录音</el-button>
-        <el-popover
-          v-if="caseForm.caseState === 5"
-          placement="top"
-          width="180"
-          v-model="popoverVisible">
-          <div style="text-align:center; margin: 0">
-            <el-button size="mini"  @click="revisit('')">本地号码</el-button>
-            <el-button type="primary" size="mini"  @click="revisit('0')">外地号码</el-button>
-          </div>
-          <el-button slot="reference" type="text">回访拨号</el-button>
-        </el-popover>
-      </el-row>
-      <el-row>
-        <el-col :span="24">
-          <el-form-item label="事件标题">
-            <el-input :value="caseForm.title" size="small"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row>
-        <el-col :span="24">
-          <el-form-item label="事件内容">
-            <el-input :value="caseForm.description" size="small"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row v-show="this.caseImage.length>0">
-        <el-form-item label="事件图片">
-          <!-- 图片展示 -->
-          <div class="image-container">
-            <el-image v-for="img in caseImage" :key="img" :src="img" fit="fill" class="case-image" :preview-src-list="caseImage"/>
-          </div>
-        </el-form-item>
-      </el-row>
+      <el-collapse v-model="activeName" accordion>
+        <el-collapse-item name="1">
+          <template slot="title">
+            <span class="collapse-title">更多信息</span>
+          </template>
+          <el-row :gutter="20">
+            <el-col :span="6">
+              <el-form-item label="事件辖区">
+                <el-input :value="caseForm.areaName" size="small" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="典型案例">
+                <el-input
+                  :value="caseForm.isTypical === '1' ? '是' : '否'"
+                  size="small"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="要情">
+                <el-input
+                  :value="caseForm.isImportant === '1' ? '是' : '否'"
+                  size="small"
+                />
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <el-row :gutter="20">
+            <el-col :span="6">
+              <el-form-item label="当前事件状态">
+                <el-input :value="caseForm.stateName" size="small" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="当前处理方式">
+                <el-input :value="caseForm.caseStateName" size="small" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="需要回访">
+                <el-input
+                  :value="caseForm.isReturnVisit === '1' ? '是' : '否'"
+                  size="small"
+                />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <el-form-item label="受理录音">
+                <el-input :value="caseForm.sound" size="small" />
+              </el-form-item>
+            </el-col>
+            <el-button type="text" @click="playSound(caseForm.sound)"
+              >播放录音</el-button
+            >
+          </el-row>
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <el-form-item label="回访录音">
+                <el-input :value="caseForm.satisfactionSound" size="small" />
+              </el-form-item>
+            </el-col>
+            <el-button
+              type="text"
+              @click="playSound(caseForm.satisfactionSound)"
+              >播放录音</el-button
+            >
+            <el-popover
+              v-if="caseForm.caseState === 5"
+              placement="top"
+              width="180"
+              v-model="popoverVisible"
+            >
+              <div style="text-align: center; margin: 0">
+                <el-button size="mini" @click="revisit('')">本地号码</el-button>
+                <el-button type="primary" size="mini" @click="revisit('0')"
+                  >外地号码</el-button
+                >
+              </div>
+              <el-button slot="reference" type="text">回访拨号</el-button>
+            </el-popover>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="事件标题">
+                <el-input :value="caseForm.title" size="small" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="事件内容">
+                <el-input :value="caseForm.description" size="small" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row v-show="this.caseImage.length > 0">
+            <el-form-item label="事件图片">
+              <!-- 图片展示 -->
+              <div class="image-container">
+                <el-image
+                  v-for="img in caseImage"
+                  :key="img"
+                  :src="img"
+                  fit="fill"
+                  class="case-image"
+                  :preview-src-list="caseImage"
+                />
+              </div>
+            </el-form-item>
+          </el-row>
+        </el-collapse-item>
+      </el-collapse>
       <!--<el-row>-->
       <!--<el-col :span="24">-->
       <!--<el-form-item label="备注信息">-->
@@ -151,98 +196,128 @@
       width="600px"
       append-to-body
       custom-class="sound-dialog"
-      @close="closeSound">
-      <audio-player ref="adplayer" :the-url="sound.url" :the-control-ist="sound.controlList"/>
+      @close="closeSound"
+    >
+      <audio-player
+        ref="adplayer"
+        :the-url="sound.url"
+        :the-control-ist="sound.controlList"
+      />
     </el-dialog>
   </div>
 </template>
 
 <script>
 // import { caseDetail } from '@/api/callCase'
-import { getSoundName } from '@/api/sound'
-import AudioPlayer from '@/components/AudioPlayer/AudioPlayer'
+import { getSoundName } from "@/api/sound";
+import AudioPlayer from "@/components/AudioPlayer/AudioPlayer";
 
 export default {
-  name: 'CaseFormProcess',
+  name: "CaseFormProcess",
   components: { AudioPlayer },
   props: {
     id: {
       type: String,
-      default: ''
+      default: "",
     }, // 事件id（主键id）
     caseForm: {
       type: Object,
       default() {
-        return {}
-      }
-    }
+        return {};
+      },
+    },
   },
   data() {
     return {
+      activeName: 1,
       sound: {
-        url: '',
-        controlList: 'noDownload noSpeed onlyOnePlaying'
+        url: "",
+        controlList: "noDownload noSpeed onlyOnePlaying",
       },
       popoverVisible: false, // 选择本地外地呼叫的弹窗
-      soundShow: false // 显示音频弹窗
-    }
+      soundShow: false, // 显示音频弹窗
+    };
   },
   computed: {
     address() {
-      const address_ori = [this.caseForm.areaName, this.caseForm.streetName, this.caseForm.communityName, this.caseForm.fieldintro]
-      const address = address_ori.filter(item => item && item.length > 0)
-      return address.join('-')
+      const address_ori = [
+        this.caseForm.areaName,
+        this.caseForm.streetName,
+        this.caseForm.communityName,
+        this.caseForm.fieldintro,
+      ];
+      const address = address_ori.filter((item) => item && item.length > 0);
+      return address.join("-");
     },
-    caseImage(){
-      if(this.caseForm.caseImage){
-        const base_url = process.env.BASE_API + '/static/'
-        const image_ori = this.caseForm.caseImage.split(';')
-        const imageList = image_ori.map(item=>base_url+ item)
-        return imageList
-      }else{
-        return []
+    caseImage() {
+      if (this.caseForm.caseImage) {
+        const base_url = process.env.BASE_API + "/static/";
+        const image_ori = this.caseForm.caseImage.split(";");
+        const imageList = image_ori.map((item) => base_url + item);
+        return imageList;
+      } else {
+        return [];
       }
-    }
+    },
   },
   methods: {
     // 播放录音
     playSound(sound) {
       if (sound) {
-        getSoundName(sound).then(res => {
-          const recordName = res.data
+        getSoundName(sound).then((res) => {
+          const recordName = res.data;
           if (recordName) {
-            this.sound.url = recordName
-            this.soundShow = true
+            this.sound.url = recordName;
+            this.soundShow = true;
           } else {
-            this.$message.warning('无录音')
+            this.$message.warning("无录音");
           }
-        })
+        });
       } else {
-        this.$message.warning('无录音')
+        this.$message.warning("无录音");
       }
     },
     // 关闭播放弹窗
     closeSound() {
-      this.$refs.adplayer.pausePlay()
+      this.$refs.adplayer.pausePlay();
     },
     // 拨打回访电话
     revisit(middleString) {
       // middleString为空或0，分别表示本地或外地
-      const tel = '9' + middleString + this.caseForm.reporterPhone
-      this.$store.dispatch('dial', tel)
-      this.popoverVisible = false
-    }
-  }
-}
+      const tel = "9" + middleString + this.caseForm.reporterPhone;
+      this.$store.dispatch("dial", tel);
+      this.popoverVisible = false;
+    },
+  },
+};
 </script>
 <style lang="scss" scoped>
-  .image-container{
-    display: flex;
-    justify-content: flex-start;
-    .case-image{
-      width:100px;
-      height:100px;
-      margin-right: 10px;
-    }
+.image-container {
+  display: flex;
+  justify-content: flex-start;
+  .case-image {
+    width: 100px;
+    height: 100px;
+    margin-right: 10px;
   }
+}
+.collapse-title {
+  font-size: 14px;
+  color: #606266;
+  font-weight: 800;
+  position: absolute;
+  right: 80px;
+  margin-top: -85px;
+}
+/deep/.el-collapse-item__arrow{
+  margin-top: -85px;
+}
+/deep/.el-collapse {
+  border: 0;
+}
+/deep/.el-collapse-item__header {
+  justify-content: end;
+  border: 0;
+  height: 0;
+}
 </style>
diff --git a/src/views/caseManage/caseCommon/caseFormRead.vue b/src/views/caseManage/caseCommon/caseFormRead.vue
index 897023a..7fa39af 100644
--- a/src/views/caseManage/caseCommon/caseFormRead.vue
+++ b/src/views/caseManage/caseCommon/caseFormRead.vue
@@ -4,134 +4,173 @@
       <el-row :gutter="20">
         <el-col :span="6">
           <el-form-item label="事件编号">
-            <el-input :value="caseForm.caseId" size="small"/>
+            <el-input :value="caseForm.caseId" size="small" />
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="来电时间">
-            <el-input :value="caseForm.callTime" size="small"/>
+            <el-input :value="caseForm.callTime" size="small" />
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="联系人">
-            <el-input :value="caseForm.reporterName" size="small"/>
+            <el-input :value="caseForm.reporterName" size="small" />
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="联系电话">
-            <el-input :value="caseForm.reporterPhone" size="small"/>
+            <el-input :value="caseForm.reporterPhone" size="small" />
           </el-form-item>
         </el-col>
       </el-row>
       <el-row :gutter="20">
         <el-col :span="6">
           <el-form-item label="事件来源">
-            <el-input :value="caseForm.sourceName" size="small"/>
+            <el-input :value="caseForm.sourceName" size="small" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="事件类型">
+            <el-input :value="caseForm.sourceType" size="small" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="精细化平台事件编号">
+            <el-input :value="caseForm.sourceNumber" size="small" />
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="事件分类">
-            <el-input :value="caseForm.eorcName" size="small"/>
+            <el-input :value="caseForm.eorcName" size="small" />
             <!--<el-input :value="caseForm.eorcName + '/' + caseForm.caseTypeName" size="small"/>-->
             <!--<el-input :value="caseForm.eorcName + '/' + caseForm.caseTypeName + '/' + caseForm.caseDetailTypeName" size="small"/>-->
           </el-form-item>
         </el-col>
-        <el-col :span="6">
-          <el-form-item label="紧急程度">
-            <el-input :value="caseForm.caseLevelName" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="限办日期">
-            <el-input :value="caseForm.limitedTime" size="small"/>
-          </el-form-item>
-        </el-col>
       </el-row>
       <el-row :gutter="20">
         <el-col :span="6">
+          <el-form-item label="限办日期">
+            <el-input :value="caseForm.limitedTime" size="small" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
           <el-form-item label="事件地址">
             <!--<el-input :value="caseForm.areaName + '-' + caseForm.streetName + '-' + caseForm.communityName + '-' + caseForm.fieldintro" size="small"/>-->
-            <el-input :value="address" size="small"/>
+            <el-input :value="address" size="small" />
           </el-form-item>
         </el-col>
         <el-col :span="6">
-          <el-form-item label="事件辖区">
-            <el-input :value="caseForm.areaName" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="典型案例">
-            <el-input :value="caseForm.isTypical === '1' ? '是' : '否'" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="要情">
-            <el-input :value="caseForm.isImportant === '1' ? '是' : '否'" size="small"/>
+          <el-form-item label="事件状态">
+            <el-input :value="caseForm.caseLevelName" size="small" />
           </el-form-item>
         </el-col>
       </el-row>
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item label="当前事件状态">
-            <el-input :value="caseForm.stateName" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="当前处理方式">
-            <el-input :value="caseForm.caseStateName" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="需要回访">
-            <el-input :value="caseForm.isReturnVisit === '1' ? '是' : '否'" size="small"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row v-if="caseForm.sound" :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="受理录音">
-            <el-input :value="caseForm.sound" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-button type="text" @click="playSound(caseForm.sound)">播放录音</el-button>
-      </el-row>
-      <el-row v-if="caseForm.satisfactionSound" :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="回访录音">
-            <el-input :value="caseForm.satisfactionSound" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-button type="text" @click="playSound(caseForm.satisfactionSound)">播放录音</el-button>
-      </el-row>
-      <el-row>
-        <el-col :span="24">
-          <el-form-item label="事件标题">
-            <el-input :value="caseForm.title" size="small"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row>
-        <el-col :span="24">
-          <el-form-item label="事件内容">
-            <el-input :value="caseForm.description" size="small"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row v-show="this.caseImage.length>0">
-        <el-form-item label="事件图片">
-        <!-- 图片展示 -->
-        <div class="image-container">
-          <el-image v-for="img in caseImage" :key="img" :src="img" fit="fill" class="case-image" :preview-src-list="caseImage"/>
-        </div>
-        </el-form-item>
-      </el-row>
-      <!--<el-row>-->
-      <!--<el-col :span="24">-->
-      <!--<el-form-item label="备注信息">-->
-      <!--<el-input :value="caseForm.remarks" size="small"/>-->
-      <!--</el-form-item>-->
-      <!--</el-col>-->
-      <!--</el-row>-->
+      <el-collapse v-model="activeName" accordion>
+        <el-collapse-item name="1">
+          <template slot="title">
+            <span class="collapse-title">更多信息</span>
+          </template>
+          <el-row :gutter="20">
+            <el-col :span="6">
+              <el-form-item label="事件辖区">
+                <el-input :value="caseForm.areaName" size="small" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="典型案例">
+                <el-input
+                  :value="caseForm.isTypical === '1' ? '是' : '否'"
+                  size="small"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="要情">
+                <el-input
+                  :value="caseForm.isImportant === '1' ? '是' : '否'"
+                  size="small"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="当前事件状态">
+                <el-input :value="caseForm.stateName" size="small" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="当前处理方式">
+                <el-input :value="caseForm.caseStateName" size="small" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="需要回访">
+                <el-input
+                  :value="caseForm.isReturnVisit === '1' ? '是' : '否'"
+                  size="small"
+                />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row v-if="caseForm.sound" :gutter="20">
+            <el-col :span="12">
+              <el-form-item label="受理录音">
+                <el-input :value="caseForm.sound" size="small" />
+              </el-form-item>
+            </el-col>
+            <el-button type="text" @click="playSound(caseForm.sound)"
+              >播放录音</el-button
+            >
+          </el-row>
+          <el-row v-if="caseForm.satisfactionSound" :gutter="20">
+            <el-col :span="12">
+              <el-form-item label="回访录音">
+                <el-input :value="caseForm.satisfactionSound" size="small" />
+              </el-form-item>
+            </el-col>
+            <el-button
+              type="text"
+              @click="playSound(caseForm.satisfactionSound)"
+              >播放录音</el-button
+            >
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="事件标题">
+                <el-input :value="caseForm.title" size="small" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="事件内容">
+                <el-input :value="caseForm.description" size="small" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row v-show="this.caseImage.length > 0">
+            <el-form-item label="事件图片">
+              <!-- 图片展示 -->
+              <div class="image-container">
+                <el-image
+                  v-for="img in caseImage"
+                  :key="img"
+                  :src="img"
+                  fit="fill"
+                  class="case-image"
+                  :preview-src-list="caseImage"
+                />
+              </div>
+            </el-form-item>
+          </el-row>
+          <!--<el-row>-->
+          <!--<el-col :span="24">-->
+          <!--<el-form-item label="备注信息">-->
+          <!--<el-input :value="caseForm.remarks" size="small"/>-->
+          <!--</el-form-item>-->
+          <!--</el-col>-->
+          <!--</el-row>-->
+        </el-collapse-item>
+      </el-collapse>
     </el-form>
     <!--播放音频弹窗-->
     <el-dialog
@@ -140,90 +179,120 @@
       width="600px"
       append-to-body
       custom-class="sound-dialog"
-      @close="closeSound">
-      <audio-player ref="adplayer" :the-url="sound.url" :the-control-ist="sound.controlList"/>
+      @close="closeSound"
+    >
+      <audio-player
+        ref="adplayer"
+        :the-url="sound.url"
+        :the-control-ist="sound.controlList"
+      />
     </el-dialog>
   </div>
 </template>
 
 <script>
 // import { caseDetail } from '@/api/callCase'
-import { getSoundName } from '@/api/sound'
-import AudioPlayer from '@/components/AudioPlayer/AudioPlayer'
+import { getSoundName } from "@/api/sound";
+import AudioPlayer from "@/components/AudioPlayer/AudioPlayer";
 
 export default {
-  name: 'CaseFormRead',
+  name: "CaseFormRead",
   components: { AudioPlayer },
   props: {
     id: {
       type: String,
-      default: ''
+      default: "",
     }, // 事件id（主键id）
     caseForm: {
       type: Object,
       default() {
-        return {}
-      }
-    }
+        return {};
+      },
+    },
   },
   data() {
     return {
+      activeName: 1,
       sound: {
-        url: '',
-        controlList: 'noDownload noSpeed onlyOnePlaying'
+        url: "",
+        controlList: "noDownload noSpeed onlyOnePlaying",
       },
-      soundShow: false // 显示音频弹窗
-    }
+      soundShow: false, // 显示音频弹窗
+    };
   },
   computed: {
     address() {
-      const address_ori = [this.caseForm.areaName, this.caseForm.streetName, this.caseForm.communityName, this.caseForm.fieldintro]
-      const address = address_ori.filter(item => item && item.length > 0)
-      return address.join('-')
+      const address_ori = [
+        this.caseForm.areaName,
+        this.caseForm.streetName,
+        this.caseForm.communityName,
+        this.caseForm.fieldintro,
+      ];
+      const address = address_ori.filter((item) => item && item.length > 0);
+      return address.join("-");
     },
-    caseImage(){
-      if(this.caseForm.caseImage){
-        const base_url = process.env.BASE_API + '/static/'
-        const image_ori = this.caseForm.caseImage.split(';')
-        const imageList = image_ori.map(item=>base_url+ item)
-        return imageList
-      }else{
-        return []
+    caseImage() {
+      if (this.caseForm.caseImage) {
+        const base_url = process.env.BASE_API + "/static/";
+        const image_ori = this.caseForm.caseImage.split(";");
+        const imageList = image_ori.map((item) => base_url + item);
+        return imageList;
+      } else {
+        return [];
       }
-    }
+    },
   },
   methods: {
     // 播放录音
     playSound(sound) {
       if (sound) {
-        getSoundName(sound).then(res => {
-          const recordName = res.data
+        getSoundName(sound).then((res) => {
+          const recordName = res.data;
           if (recordName) {
-            this.sound.url = recordName
-            this.soundShow = true
+            this.sound.url = recordName;
+            this.soundShow = true;
           } else {
-            this.$message.warning('无录音')
+            this.$message.warning("无录音");
           }
-        })
+        });
       } else {
-        this.$message.warning('无录音')
+        this.$message.warning("无录音");
       }
     },
     // 关闭播放弹窗
     closeSound() {
-      this.$refs.adplayer.pausePlay()
-    }
-  }
-}
+      this.$refs.adplayer.pausePlay();
+    },
+  },
+};
 </script>
 <style lang="scss" scoped>
-  .image-container{
-    display: flex;
-    justify-content: flex-start;
-    .case-image{
-      width:100px;
-      height:100px;
-      margin-right: 10px;
-    }
+.image-container {
+  display: flex;
+  justify-content: flex-start;
+  .case-image {
+    width: 100px;
+    height: 100px;
+    margin-right: 10px;
   }
+}
+.collapse-title {
+  font-size: 14px;
+  color: #606266;
+  font-weight: 800;
+  position: absolute;
+  right: 80px;
+  margin-top: -85px;
+}
+/deep/.el-collapse-item__arrow {
+  margin-top: -85px;
+}
+/deep/.el-collapse {
+  border: 0;
+}
+/deep/.el-collapse-item__header {
+  justify-content: end;
+  border: 0;
+  height: 0;
+}
 </style>
diff --git a/src/views/caseManage/caseCommon/caseImgShow.vue b/src/views/caseManage/caseCommon/caseImgShow.vue
new file mode 100644
index 0000000..c6c911d
--- /dev/null
+++ b/src/views/caseManage/caseCommon/caseImgShow.vue
@@ -0,0 +1,42 @@
+<template>
+  <SwiperImg
+    v-if="imgs.length > 0"
+    style="width: 300px; height: 450px; overflow: hidden"
+    :gallery="imgs"
+  />
+  <el-image v-else>
+    <div slot="error" class="image-slot">
+      暂无图片
+    </div>
+  </el-image>
+</template>
+
+<script>
+import SwiperImg from "./SwiperImg.vue";
+export default {
+  components: {
+    SwiperImg,
+  },
+  props: {
+    imgs: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.el-image {
+  margin-top: 3px;
+  width: 300px;
+  height: 450px;
+  line-height: 450px;
+  overflow: hidden;
+  text-align: center;
+  background: #f5f7fa;
+  color: #909399;
+}
+</style>
\ No newline at end of file

diff --git a/package.json b/package.json
index fb32aa2..c325e45 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
     "vue-amap": "^0.5.9",
     "vue-baidu-map": "^0.21.22",
     "vue-router": "3.0.1",
+    "vue-slide-mini": "^1.0.4",
     "vuex": "3.0.1",
     "wangeditor": "^3.1.1"
   },
diff --git a/src/api/callCase.js b/src/api/callCase.js
index cd61986..9da1fc7 100644
--- a/src/api/callCase.js
+++ b/src/api/callCase.js
@@ -126,3 +126,12 @@
     }
   })
 }
+
+// 社会治理事流转步骤接口
+export function eventStepList(data) {
+  return request({
+    url: '/callcenter/api/case/eventStepList',
+    method: 'post',
+    data
+  })
+}
diff --git a/src/assets/global_images/done.png b/src/assets/global_images/done.png
new file mode 100644
index 0000000..c9a2c5e
--- /dev/null
+++ b/src/assets/global_images/done.png
Binary files differ
diff --git a/src/assets/global_images/process.png b/src/assets/global_images/process.png
new file mode 100644
index 0000000..311fe3a
--- /dev/null
+++ b/src/assets/global_images/process.png
Binary files differ
diff --git a/src/components/NomalTable/index.vue b/src/components/NomalTable/index.vue
index 55a7378..8616987 100644
--- a/src/components/NomalTable/index.vue
+++ b/src/components/NomalTable/index.vue
@@ -55,7 +55,7 @@
         </el-col>
       </el-row>
       <!-- 表格正文-->
-      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="handleSelectionChange">
+      <el-table v-loading="listLoading" :data="data" :height="height" :size="size" class="table" row-class-name="small-row-class" border @selection-change="handleSelectionChange">
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns"/>
         <!--多选选中列-->
@@ -176,7 +176,10 @@
           refresh: false // 是否需要刷新按钮
         }
       }
-    }// 表格工具配置
+    },// 表格工具配置
+    height:{
+      type:String,
+    }
   },
   data() {
     return {
diff --git a/src/components/SelectTree/singleSelect.vue b/src/components/SelectTree/singleSelect.vue
index ba15b20..3336346 100644
--- a/src/components/SelectTree/singleSelect.vue
+++ b/src/components/SelectTree/singleSelect.vue
@@ -6,7 +6,8 @@
     trigger="click"
     class="select-tree scrollbar"
     @show="onShowPopover"
-    @hide="onHidePopover">
+    @hide="onHidePopover"
+  >
     <el-tree
       ref="tree"
       :style="`min-width: ${treeWidth}`"
@@ -14,265 +15,276 @@
       :props="props"
       :expand-on-click-node="false"
       :filter-node-method="filterNode"
-      :default-expand-all="false"
+      :default-expand-all="expandAll"
       class="innerbox"
       highlight-current
       accordion
-      @node-click="onClickNode"/>
+      @node-click="onClickNode"
+    />
     <el-input
       slot="reference"
       ref="input"
       v-model="labelModel"
       :style="`width: ${width}px`"
       :size="size"
-      :class="{ 'rotate': showStatus }"
+      :class="{ rotate: showStatus }"
       :placeholder="placeholder"
       :disabled="disabled"
       clearable
-      suffix-icon="el-icon-arrow-down"/>
+      suffix-icon="el-icon-arrow-down"
+    />
   </el-popover>
 </template>
 
 <script>
-
 export default {
-  name: 'SelectTree',
+  name: "SelectTree",
+
   // 设置绑定参数
   model: {
-    prop: 'value',
-    event: 'selected'
+    prop: "value",
+    event: "selected",
   },
   props: {
+    // 是否默认展开全部
+    expandAll: {
+      type: Boolean,
+      default: false,
+    },
     // 接收绑定参数
     value: {
       type: String,
-      default: ''
+      default: "",
     },
     // 输入框宽度
     width: {
       type: String,
-      default: ''
+      default: "",
     },
     size: {
       type: String,
-      default: ''
+      default: "",
     },
     // 输入框宽度
     disabled: {
       type: Boolean,
-      default: false
+      default: false,
     },
     // 选项数据
     options: {
       type: Array,
-      required: true
+      required: true,
     },
     // 输入框占位符
     placeholder: {
       type: String,
       required: false,
-      default: '请选择'
+      default: "请选择",
     },
     // 树节点配置选项
     props: {
       type: Object,
       required: false,
       default: () => ({
-        parent: 'parentId',
-        value: 'rowGuid',
-        label: 'areaName',
-        children: 'children'
-      })
-    }
+        parent: "parentId",
+        value: "rowGuid",
+        label: "areaName",
+        children: "children",
+      }),
+    },
   },
   data() {
     return {
       // 树状菜单显示状态
       showStatus: false,
       // 菜单宽度
-      treeWidth: 'auto',
+      treeWidth: "auto",
       // 输入框显示值
-      labelModel: '',
+      labelModel: "",
       // 实际请求传值
-      valueModel: ''
-    }
+      valueModel: "",
+    };
   },
   computed: {
     // 是否为树状结构数据
     dataType() {
-      const jsonStr = JSON.stringify(this.options)
-      return jsonStr.indexOf(this.props.children) !== -1
+      const jsonStr = JSON.stringify(this.options);
+      return jsonStr.indexOf(this.props.children) !== -1;
     },
     // 若非树状结构，则转化为树状结构数据
     data() {
       // return this.dataType ? this.options : this.switchTree()
-      return this.options
-    }
+      return this.options;
+    },
   },
   watch: {
     labelModel(val) {
-      console.log('labelModel change:' + val)
+      console.log("labelModel change:" + val);
       if (!val) {
-        if (val === '') {
-          this.valueModel = ''
-          this.onCloseTree()
-          this.$emit('selected', this.valueModel)
+        if (val === "") {
+          this.valueModel = "";
+          this.onCloseTree();
+          this.$emit("selected", this.valueModel);
         }
-        this.valueModel = ''
+        this.valueModel = "";
       }
-      this.$refs.tree.filter(val)
+      this.$refs.tree.filter(val);
     },
     value(val) {
-      this.labelModel = this.queryTree(this.data, val)
-    }
+      this.labelModel = this.queryTree(this.data, val);
+    },
   },
   created() {
     // 检测输入框原有值并显示对应 label
     if (this.value) {
-      this.labelModel = this.queryTree(this.data, this.value)
+      this.labelModel = this.queryTree(this.data, this.value);
     }
     // 获取输入框宽度同步至树状菜单宽度
     this.$nextTick(() => {
-      this.treeWidth = `${(this.width || this.$refs.input.$refs.input.clientWidth) - 24}px`
-    })
+      this.treeWidth = `${
+        (this.width || this.$refs.input.$refs.input.clientWidth) - 24
+      }px`;
+    });
   },
   methods: {
     // 单击节点
     onClickNode(node) {
-      this.labelModel = node[this.props.label]
-      this.valueModel = node[this.props.value]
-      this.onCloseTree()
+      this.labelModel = node[this.props.label];
+      this.valueModel = node[this.props.value];
+      this.onCloseTree();
     },
     // 偏平数组转化为树状层级结构
     switchTree() {
-      return this.cleanChildren(this.buildTree(this.options, '0'))
+      return this.cleanChildren(this.buildTree(this.options, "0"));
     },
     // 隐藏树状菜单
     onCloseTree() {
-      this.$refs.popover.showPopper = false
+      this.$refs.popover.showPopper = false;
     },
     // 显示时触发
     onShowPopover() {
-      this.showStatus = true
-      this.$refs.tree.filter(false)
+      this.showStatus = true;
+      this.$refs.tree.filter(false);
     },
     // 隐藏时触发
     onHidePopover() {
-      this.showStatus = false
-      console.log('onHidePopover:' + this.valueModel)
+      this.showStatus = false;
+      console.log("onHidePopover:" + this.valueModel);
       // if (this.valueModel !== '') {
       //   this.$emit('selected', this.valueModel)
       // }
-      this.$emit('selected', this.valueModel)
+      this.$emit("selected", this.valueModel);
     },
     // 树节点过滤方法
     filterNode(query, data) {
-      if (!query) return true
-      return data[this.props.label].indexOf(query) !== -1
+      if (!query) return true;
+      return data[this.props.label].indexOf(query) !== -1;
     },
     // 搜索树状数据中的 ID
     queryTree(tree, id) {
-      let stark = []
-      stark = stark.concat(tree)
+      let stark = [];
+      stark = stark.concat(tree);
       while (stark.length) {
-        const temp = stark.shift()
+        const temp = stark.shift();
         if (temp[this.props.children]) {
-          stark = stark.concat(temp[this.props.children])
+          stark = stark.concat(temp[this.props.children]);
         }
         if (temp[this.props.value] === id) {
-          return temp[this.props.label]
+          return temp[this.props.label];
         }
       }
-      return ''
+      return "";
     },
     // 将一维的扁平数组转换为多层级对象
-    buildTree(data, id = '0') {
+    buildTree(data, id = "0") {
       const fa = (parentId) => {
-        console.log('parentId:' + parentId)
-        const temp = []
+        console.log("parentId:" + parentId);
+        const temp = [];
         for (let i = 0; i < data.length; i++) {
-          const n = data[i]
+          const n = data[i];
           if (n[this.props.parent] === parentId) {
-            n.children = fa(n.code)
-            temp.push(n)
+            n.children = fa(n.code);
+            temp.push(n);
           }
         }
-        return temp
-      }
-      return fa(id)
+        return temp;
+      };
+      return fa(id);
     },
     // 清除空 children项
     cleanChildren(data) {
       const fa = (list) => {
         list.map((e) => {
           if (e.children.length) {
-            fa(e.children)
+            fa(e.children);
           } else {
-            delete e.children
+            delete e.children;
           }
-          return e
-        })
-        return list
-      }
-      return fa(data)
-    }
-  }
-}
+          return e;
+        });
+        return list;
+      };
+      return fa(data);
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-  .scrollbar {
-    overflow-y: scroll;
-    &::-webkit-scrollbar {
-      z-index: 11;
-      width: 6px;
-    }
-    &::-webkit-scrollbar-track,
-    &::-webkit-scrollbar-corner {
-      background: #fff;
-    }
-    &::-webkit-scrollbar-thumb {
-      // border-radius: 5px;
-      width: 6px;
-      background-color: #eee;
-      &:hover {
-        background-color: #ccc;
-      }
-    }
-    &::-webkit-scrollbar-track-piece {
-      background: #fff;
-      width: 6px;
+.scrollbar {
+  overflow-y: scroll;
+  &::-webkit-scrollbar {
+    z-index: 11;
+    width: 6px;
+  }
+  &::-webkit-scrollbar-track,
+  &::-webkit-scrollbar-corner {
+    background: #fff;
+  }
+  &::-webkit-scrollbar-thumb {
+    // border-radius: 5px;
+    width: 6px;
+    background-color: #eee;
+    &:hover {
+      background-color: #ccc;
     }
   }
-  .select-tree .el-tree {
-    max-height: 350px;
+  &::-webkit-scrollbar-track-piece {
+    background: #fff;
+    width: 6px;
   }
-  .select-tree .el-input.el-input--suffix {
-    cursor: pointer;
-  }
-  .select-tree .el-input.el-input--suffix.rotate .el-input__suffix {
-    transform: rotate(180deg);
-  }
+}
+.select-tree .el-tree {
+  max-height: 350px;
+}
+.select-tree .el-input.el-input--suffix {
+  cursor: pointer;
+}
+.select-tree .el-input.el-input--suffix.rotate .el-input__suffix {
+  transform: rotate(180deg);
+}
 
-  .innerbox::-webkit-scrollbar {/*滚动条整体样式*/
-    width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
-    height: 4px;
-  }
-  .innerbox::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
-    border-radius: 5px;
-    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
-    background: rgba(0,0,0,0.2);
-  }
-  .innerbox::-webkit-scrollbar-track { /*滚动条里面轨道*/
-    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
-    border-radius: 0;
-    background: rgba(0, 0, 0, 0.1);
-  }
+.innerbox::-webkit-scrollbar {
+  /*滚动条整体样式*/
+  width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
+  height: 4px;
+}
+.innerbox::-webkit-scrollbar-thumb {
+  /*滚动条里面小方块*/
+  border-radius: 5px;
+  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  background: rgba(0, 0, 0, 0.2);
+}
+.innerbox::-webkit-scrollbar-track {
+  /*滚动条里面轨道*/
+  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  border-radius: 0;
+  background: rgba(0, 0, 0, 0.1);
+}
 </style>
 <style lang="scss">
-  .el-popover{
-    max-height: 400px;
-    overflow: auto;
-  }
-
+.el-popover {
+  max-height: 400px;
+  overflow: auto;
+}
 </style>
diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss
index 65abe46..8236420 100644
--- a/src/styles/sidebar.scss
+++ b/src/styles/sidebar.scss
@@ -212,3 +212,8 @@
 .is-active>.light-line{
   background-color: $menuActiveText
 }
+
+.el-image-viewer__close{
+  color: #fff !important;
+  font-size: 52px !important;
+}
\ No newline at end of file
diff --git a/src/views/caseManage/caseCommon/SwiperImg.vue b/src/views/caseManage/caseCommon/SwiperImg.vue
new file mode 100644
index 0000000..4ff3fd2
--- /dev/null
+++ b/src/views/caseManage/caseCommon/SwiperImg.vue
@@ -0,0 +1,88 @@
+<template>
+	<div class="swiper" @mouseover="overHd" @mouseout="auto">
+		<div class="swiper-item" v-for="(item,ind) in gallery" :key="item" v-show="ind==index">
+			<img :src="item" width="100%"  style="width: 300px; height: 450px; overflow: hidden">
+		</div>
+		<div class="thumbs" v-if="gallery.length > 1">
+			<span class="thumb" :class="{'active' :item==index+1}" v-for="item in gallery.length" :key='item'
+				@click="index=item-1">{{item}}</span>
+		</div>
+	</div>
+</template>
+ 
+<script>
+	export default {
+		props: {
+			gallery: {
+				type: Array,
+				default () {
+					return []
+				}
+			}
+		},
+		data() {
+			return {
+				//默认显示 
+				index: 0,
+				stopID: null,
+			}
+		},
+		// 当组件挂载完毕 执行自动播放
+		created() {
+			this.auto();
+		},
+		beforeDestroy(){
+			this.overHd();
+		},
+		methods: {
+			//鼠标一开  auto自动执行
+			auto() {
+				this.stopID = setInterval(() => {
+					this.index++;
+					this.check();
+				}, 5000)
+			},
+			overHd() {
+				clearInterval(this.stopID);
+			},
+			//检查边界
+			check() {
+				if (this.index == this.gallery.length) {
+					this.index = 0;
+				}
+			}
+		}
+	}
+</script>
+ 
+<style scoped="scoped">
+	.swiper {
+		position: relative;
+	}
+ 
+	.swiper .thumbs {
+		position: absolute;
+		bottom: 10px;
+		width: 100%;
+		text-align: center;
+	}
+ 
+	.thumb {
+		width: 10px;
+		height: 10px;
+		display: inline-block;
+		border-radius: 15px;
+		text-indent: 9999em;
+		margin: 0 5px;
+		background-color: #fff;
+	}
+ 
+	.thumb:hover {
+		cursor: pointer;
+		background-color: #42b983;
+	}
+	.active {
+		background-color: #42b983;
+ 
+	}
+</style>
\ No newline at end of file
diff --git a/src/views/caseManage/caseCommon/caseFormProcess.vue b/src/views/caseManage/caseCommon/caseFormProcess.vue
index f8a9666..e6a6446 100644
--- a/src/views/caseManage/caseCommon/caseFormProcess.vue
+++ b/src/views/caseManage/caseCommon/caseFormProcess.vue
@@ -4,138 +4,183 @@
       <el-row :gutter="20">
         <el-col :span="6">
           <el-form-item label="事件编号">
-            <el-input :value="caseForm.caseId" size="small"/>
+            <el-input :value="caseForm.caseId" size="small" />
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="来电时间">
-            <el-input :value="caseForm.callTime" size="small"/>
+            <el-input :value="caseForm.callTime" size="small" />
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="联系人">
-            <el-input :value="caseForm.reporterName" size="small"/>
+            <el-input :value="caseForm.reporterName" size="small" />
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="联系电话">
-            <el-input :value="caseForm.reporterPhone" size="small"/>
+            <el-input :value="caseForm.reporterPhone" size="small" />
           </el-form-item>
         </el-col>
       </el-row>
       <el-row :gutter="20">
         <el-col :span="6">
           <el-form-item label="事件来源">
-            <el-input :value="caseForm.sourceName" size="small"/>
+            <el-input :value="caseForm.sourceName" size="small" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="事件类型">
+            <el-input :value="caseForm.sourceType" size="small" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="精细化平台事件编号">
+            <el-input :value="caseForm.sourceNumber" size="small" />
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="事件分类">
-            <el-input :value="caseForm.eorcName" size="small"/>
+            <el-input :value="caseForm.eorcName" size="small" />
             <!--<el-input :value="caseForm.eorcName + '/' + caseForm.caseTypeName" size="small"/>-->
             <!--<el-input :value="caseForm.eorcName + '/' + caseForm.caseTypeName + '/' + caseForm.caseDetailTypeName" size="small"/>-->
           </el-form-item>
         </el-col>
-        <el-col :span="6">
-          <el-form-item label="紧急程度">
-            <el-input :value="caseForm.caseLevelName" size="small"/>
-          </el-form-item>
-        </el-col>
+
         <el-col :span="6">
           <el-form-item label="限办日期">
-            <el-input :value="caseForm.limitedTime" size="small"/>
+            <el-input :value="caseForm.limitedTime" size="small" />
           </el-form-item>
         </el-col>
-      </el-row>
-      <el-row :gutter="20">
         <el-col :span="6">
           <el-form-item label="事件地址">
             <!--<el-input :value="caseForm.areaName + '-' + caseForm.streetName + '-' + caseForm.communityName + '-' + caseForm.fieldintro" size="small"/>-->
-            <el-input :value="address" size="small"/>
+            <el-input :value="address" size="small" />
           </el-form-item>
         </el-col>
         <el-col :span="6">
-          <el-form-item label="事件辖区">
-            <el-input :value="caseForm.areaName" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="典型案例">
-            <el-input :value="caseForm.isTypical === '1' ? '是' : '否'" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="要情">
-            <el-input :value="caseForm.isImportant === '1' ? '是' : '否'" size="small"/>
+          <!-- <el-form-item label="紧急程度"> -->
+          <el-form-item label="事件状态">
+            <el-input :value="caseForm.caseLevelName" size="small" />
           </el-form-item>
         </el-col>
       </el-row>
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item label="当前事件状态">
-            <el-input :value="caseForm.stateName" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="当前处理方式">
-            <el-input :value="caseForm.caseStateName" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="需要回访">
-            <el-input :value="caseForm.isReturnVisit === '1' ? '是' : '否'" size="small"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="受理录音">
-            <el-input :value="caseForm.sound" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-button type="text" @click="playSound(caseForm.sound)">播放录音</el-button>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="回访录音">
-            <el-input :value="caseForm.satisfactionSound" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-button type="text" @click="playSound(caseForm.satisfactionSound)">播放录音</el-button>
-        <el-popover
-          v-if="caseForm.caseState === 5"
-          placement="top"
-          width="180"
-          v-model="popoverVisible">
-          <div style="text-align:center; margin: 0">
-            <el-button size="mini"  @click="revisit('')">本地号码</el-button>
-            <el-button type="primary" size="mini"  @click="revisit('0')">外地号码</el-button>
-          </div>
-          <el-button slot="reference" type="text">回访拨号</el-button>
-        </el-popover>
-      </el-row>
-      <el-row>
-        <el-col :span="24">
-          <el-form-item label="事件标题">
-            <el-input :value="caseForm.title" size="small"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row>
-        <el-col :span="24">
-          <el-form-item label="事件内容">
-            <el-input :value="caseForm.description" size="small"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row v-show="this.caseImage.length>0">
-        <el-form-item label="事件图片">
-          <!-- 图片展示 -->
-          <div class="image-container">
-            <el-image v-for="img in caseImage" :key="img" :src="img" fit="fill" class="case-image" :preview-src-list="caseImage"/>
-          </div>
-        </el-form-item>
-      </el-row>
+      <el-collapse v-model="activeName" accordion>
+        <el-collapse-item name="1">
+          <template slot="title">
+            <span class="collapse-title">更多信息</span>
+          </template>
+          <el-row :gutter="20">
+            <el-col :span="6">
+              <el-form-item label="事件辖区">
+                <el-input :value="caseForm.areaName" size="small" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="典型案例">
+                <el-input
+                  :value="caseForm.isTypical === '1' ? '是' : '否'"
+                  size="small"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="要情">
+                <el-input
+                  :value="caseForm.isImportant === '1' ? '是' : '否'"
+                  size="small"
+                />
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <el-row :gutter="20">
+            <el-col :span="6">
+              <el-form-item label="当前事件状态">
+                <el-input :value="caseForm.stateName" size="small" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="当前处理方式">
+                <el-input :value="caseForm.caseStateName" size="small" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="需要回访">
+                <el-input
+                  :value="caseForm.isReturnVisit === '1' ? '是' : '否'"
+                  size="small"
+                />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <el-form-item label="受理录音">
+                <el-input :value="caseForm.sound" size="small" />
+              </el-form-item>
+            </el-col>
+            <el-button type="text" @click="playSound(caseForm.sound)"
+              >播放录音</el-button
+            >
+          </el-row>
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <el-form-item label="回访录音">
+                <el-input :value="caseForm.satisfactionSound" size="small" />
+              </el-form-item>
+            </el-col>
+            <el-button
+              type="text"
+              @click="playSound(caseForm.satisfactionSound)"
+              >播放录音</el-button
+            >
+            <el-popover
+              v-if="caseForm.caseState === 5"
+              placement="top"
+              width="180"
+              v-model="popoverVisible"
+            >
+              <div style="text-align: center; margin: 0">
+                <el-button size="mini" @click="revisit('')">本地号码</el-button>
+                <el-button type="primary" size="mini" @click="revisit('0')"
+                  >外地号码</el-button
+                >
+              </div>
+              <el-button slot="reference" type="text">回访拨号</el-button>
+            </el-popover>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="事件标题">
+                <el-input :value="caseForm.title" size="small" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="事件内容">
+                <el-input :value="caseForm.description" size="small" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row v-show="this.caseImage.length > 0">
+            <el-form-item label="事件图片">
+              <!-- 图片展示 -->
+              <div class="image-container">
+                <el-image
+                  v-for="img in caseImage"
+                  :key="img"
+                  :src="img"
+                  fit="fill"
+                  class="case-image"
+                  :preview-src-list="caseImage"
+                />
+              </div>
+            </el-form-item>
+          </el-row>
+        </el-collapse-item>
+      </el-collapse>
       <!--<el-row>-->
       <!--<el-col :span="24">-->
       <!--<el-form-item label="备注信息">-->
@@ -151,98 +196,128 @@
       width="600px"
       append-to-body
       custom-class="sound-dialog"
-      @close="closeSound">
-      <audio-player ref="adplayer" :the-url="sound.url" :the-control-ist="sound.controlList"/>
+      @close="closeSound"
+    >
+      <audio-player
+        ref="adplayer"
+        :the-url="sound.url"
+        :the-control-ist="sound.controlList"
+      />
     </el-dialog>
   </div>
 </template>
 
 <script>
 // import { caseDetail } from '@/api/callCase'
-import { getSoundName } from '@/api/sound'
-import AudioPlayer from '@/components/AudioPlayer/AudioPlayer'
+import { getSoundName } from "@/api/sound";
+import AudioPlayer from "@/components/AudioPlayer/AudioPlayer";
 
 export default {
-  name: 'CaseFormProcess',
+  name: "CaseFormProcess",
   components: { AudioPlayer },
   props: {
     id: {
       type: String,
-      default: ''
+      default: "",
     }, // 事件id（主键id）
     caseForm: {
       type: Object,
       default() {
-        return {}
-      }
-    }
+        return {};
+      },
+    },
   },
   data() {
     return {
+      activeName: 1,
       sound: {
-        url: '',
-        controlList: 'noDownload noSpeed onlyOnePlaying'
+        url: "",
+        controlList: "noDownload noSpeed onlyOnePlaying",
       },
       popoverVisible: false, // 选择本地外地呼叫的弹窗
-      soundShow: false // 显示音频弹窗
-    }
+      soundShow: false, // 显示音频弹窗
+    };
   },
   computed: {
     address() {
-      const address_ori = [this.caseForm.areaName, this.caseForm.streetName, this.caseForm.communityName, this.caseForm.fieldintro]
-      const address = address_ori.filter(item => item && item.length > 0)
-      return address.join('-')
+      const address_ori = [
+        this.caseForm.areaName,
+        this.caseForm.streetName,
+        this.caseForm.communityName,
+        this.caseForm.fieldintro,
+      ];
+      const address = address_ori.filter((item) => item && item.length > 0);
+      return address.join("-");
     },
-    caseImage(){
-      if(this.caseForm.caseImage){
-        const base_url = process.env.BASE_API + '/static/'
-        const image_ori = this.caseForm.caseImage.split(';')
-        const imageList = image_ori.map(item=>base_url+ item)
-        return imageList
-      }else{
-        return []
+    caseImage() {
+      if (this.caseForm.caseImage) {
+        const base_url = process.env.BASE_API + "/static/";
+        const image_ori = this.caseForm.caseImage.split(";");
+        const imageList = image_ori.map((item) => base_url + item);
+        return imageList;
+      } else {
+        return [];
       }
-    }
+    },
   },
   methods: {
     // 播放录音
     playSound(sound) {
       if (sound) {
-        getSoundName(sound).then(res => {
-          const recordName = res.data
+        getSoundName(sound).then((res) => {
+          const recordName = res.data;
           if (recordName) {
-            this.sound.url = recordName
-            this.soundShow = true
+            this.sound.url = recordName;
+            this.soundShow = true;
           } else {
-            this.$message.warning('无录音')
+            this.$message.warning("无录音");
           }
-        })
+        });
       } else {
-        this.$message.warning('无录音')
+        this.$message.warning("无录音");
       }
     },
     // 关闭播放弹窗
     closeSound() {
-      this.$refs.adplayer.pausePlay()
+      this.$refs.adplayer.pausePlay();
     },
     // 拨打回访电话
     revisit(middleString) {
       // middleString为空或0，分别表示本地或外地
-      const tel = '9' + middleString + this.caseForm.reporterPhone
-      this.$store.dispatch('dial', tel)
-      this.popoverVisible = false
-    }
-  }
-}
+      const tel = "9" + middleString + this.caseForm.reporterPhone;
+      this.$store.dispatch("dial", tel);
+      this.popoverVisible = false;
+    },
+  },
+};
 </script>
 <style lang="scss" scoped>
-  .image-container{
-    display: flex;
-    justify-content: flex-start;
-    .case-image{
-      width:100px;
-      height:100px;
-      margin-right: 10px;
-    }
+.image-container {
+  display: flex;
+  justify-content: flex-start;
+  .case-image {
+    width: 100px;
+    height: 100px;
+    margin-right: 10px;
   }
+}
+.collapse-title {
+  font-size: 14px;
+  color: #606266;
+  font-weight: 800;
+  position: absolute;
+  right: 80px;
+  margin-top: -85px;
+}
+/deep/.el-collapse-item__arrow{
+  margin-top: -85px;
+}
+/deep/.el-collapse {
+  border: 0;
+}
+/deep/.el-collapse-item__header {
+  justify-content: end;
+  border: 0;
+  height: 0;
+}
 </style>
diff --git a/src/views/caseManage/caseCommon/caseFormRead.vue b/src/views/caseManage/caseCommon/caseFormRead.vue
index 897023a..7fa39af 100644
--- a/src/views/caseManage/caseCommon/caseFormRead.vue
+++ b/src/views/caseManage/caseCommon/caseFormRead.vue
@@ -4,134 +4,173 @@
       <el-row :gutter="20">
         <el-col :span="6">
           <el-form-item label="事件编号">
-            <el-input :value="caseForm.caseId" size="small"/>
+            <el-input :value="caseForm.caseId" size="small" />
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="来电时间">
-            <el-input :value="caseForm.callTime" size="small"/>
+            <el-input :value="caseForm.callTime" size="small" />
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="联系人">
-            <el-input :value="caseForm.reporterName" size="small"/>
+            <el-input :value="caseForm.reporterName" size="small" />
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="联系电话">
-            <el-input :value="caseForm.reporterPhone" size="small"/>
+            <el-input :value="caseForm.reporterPhone" size="small" />
           </el-form-item>
         </el-col>
       </el-row>
       <el-row :gutter="20">
         <el-col :span="6">
           <el-form-item label="事件来源">
-            <el-input :value="caseForm.sourceName" size="small"/>
+            <el-input :value="caseForm.sourceName" size="small" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="事件类型">
+            <el-input :value="caseForm.sourceType" size="small" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="精细化平台事件编号">
+            <el-input :value="caseForm.sourceNumber" size="small" />
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="事件分类">
-            <el-input :value="caseForm.eorcName" size="small"/>
+            <el-input :value="caseForm.eorcName" size="small" />
             <!--<el-input :value="caseForm.eorcName + '/' + caseForm.caseTypeName" size="small"/>-->
             <!--<el-input :value="caseForm.eorcName + '/' + caseForm.caseTypeName + '/' + caseForm.caseDetailTypeName" size="small"/>-->
           </el-form-item>
         </el-col>
-        <el-col :span="6">
-          <el-form-item label="紧急程度">
-            <el-input :value="caseForm.caseLevelName" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="限办日期">
-            <el-input :value="caseForm.limitedTime" size="small"/>
-          </el-form-item>
-        </el-col>
       </el-row>
       <el-row :gutter="20">
         <el-col :span="6">
+          <el-form-item label="限办日期">
+            <el-input :value="caseForm.limitedTime" size="small" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
           <el-form-item label="事件地址">
             <!--<el-input :value="caseForm.areaName + '-' + caseForm.streetName + '-' + caseForm.communityName + '-' + caseForm.fieldintro" size="small"/>-->
-            <el-input :value="address" size="small"/>
+            <el-input :value="address" size="small" />
           </el-form-item>
         </el-col>
         <el-col :span="6">
-          <el-form-item label="事件辖区">
-            <el-input :value="caseForm.areaName" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="典型案例">
-            <el-input :value="caseForm.isTypical === '1' ? '是' : '否'" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="要情">
-            <el-input :value="caseForm.isImportant === '1' ? '是' : '否'" size="small"/>
+          <el-form-item label="事件状态">
+            <el-input :value="caseForm.caseLevelName" size="small" />
           </el-form-item>
         </el-col>
       </el-row>
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item label="当前事件状态">
-            <el-input :value="caseForm.stateName" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="当前处理方式">
-            <el-input :value="caseForm.caseStateName" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="需要回访">
-            <el-input :value="caseForm.isReturnVisit === '1' ? '是' : '否'" size="small"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row v-if="caseForm.sound" :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="受理录音">
-            <el-input :value="caseForm.sound" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-button type="text" @click="playSound(caseForm.sound)">播放录音</el-button>
-      </el-row>
-      <el-row v-if="caseForm.satisfactionSound" :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="回访录音">
-            <el-input :value="caseForm.satisfactionSound" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-button type="text" @click="playSound(caseForm.satisfactionSound)">播放录音</el-button>
-      </el-row>
-      <el-row>
-        <el-col :span="24">
-          <el-form-item label="事件标题">
-            <el-input :value="caseForm.title" size="small"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row>
-        <el-col :span="24">
-          <el-form-item label="事件内容">
-            <el-input :value="caseForm.description" size="small"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row v-show="this.caseImage.length>0">
-        <el-form-item label="事件图片">
-        <!-- 图片展示 -->
-        <div class="image-container">
-          <el-image v-for="img in caseImage" :key="img" :src="img" fit="fill" class="case-image" :preview-src-list="caseImage"/>
-        </div>
-        </el-form-item>
-      </el-row>
-      <!--<el-row>-->
-      <!--<el-col :span="24">-->
-      <!--<el-form-item label="备注信息">-->
-      <!--<el-input :value="caseForm.remarks" size="small"/>-->
-      <!--</el-form-item>-->
-      <!--</el-col>-->
-      <!--</el-row>-->
+      <el-collapse v-model="activeName" accordion>
+        <el-collapse-item name="1">
+          <template slot="title">
+            <span class="collapse-title">更多信息</span>
+          </template>
+          <el-row :gutter="20">
+            <el-col :span="6">
+              <el-form-item label="事件辖区">
+                <el-input :value="caseForm.areaName" size="small" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="典型案例">
+                <el-input
+                  :value="caseForm.isTypical === '1' ? '是' : '否'"
+                  size="small"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="要情">
+                <el-input
+                  :value="caseForm.isImportant === '1' ? '是' : '否'"
+                  size="small"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="当前事件状态">
+                <el-input :value="caseForm.stateName" size="small" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="当前处理方式">
+                <el-input :value="caseForm.caseStateName" size="small" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="需要回访">
+                <el-input
+                  :value="caseForm.isReturnVisit === '1' ? '是' : '否'"
+                  size="small"
+                />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row v-if="caseForm.sound" :gutter="20">
+            <el-col :span="12">
+              <el-form-item label="受理录音">
+                <el-input :value="caseForm.sound" size="small" />
+              </el-form-item>
+            </el-col>
+            <el-button type="text" @click="playSound(caseForm.sound)"
+              >播放录音</el-button
+            >
+          </el-row>
+          <el-row v-if="caseForm.satisfactionSound" :gutter="20">
+            <el-col :span="12">
+              <el-form-item label="回访录音">
+                <el-input :value="caseForm.satisfactionSound" size="small" />
+              </el-form-item>
+            </el-col>
+            <el-button
+              type="text"
+              @click="playSound(caseForm.satisfactionSound)"
+              >播放录音</el-button
+            >
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="事件标题">
+                <el-input :value="caseForm.title" size="small" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="事件内容">
+                <el-input :value="caseForm.description" size="small" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row v-show="this.caseImage.length > 0">
+            <el-form-item label="事件图片">
+              <!-- 图片展示 -->
+              <div class="image-container">
+                <el-image
+                  v-for="img in caseImage"
+                  :key="img"
+                  :src="img"
+                  fit="fill"
+                  class="case-image"
+                  :preview-src-list="caseImage"
+                />
+              </div>
+            </el-form-item>
+          </el-row>
+          <!--<el-row>-->
+          <!--<el-col :span="24">-->
+          <!--<el-form-item label="备注信息">-->
+          <!--<el-input :value="caseForm.remarks" size="small"/>-->
+          <!--</el-form-item>-->
+          <!--</el-col>-->
+          <!--</el-row>-->
+        </el-collapse-item>
+      </el-collapse>
     </el-form>
     <!--播放音频弹窗-->
     <el-dialog
@@ -140,90 +179,120 @@
       width="600px"
       append-to-body
       custom-class="sound-dialog"
-      @close="closeSound">
-      <audio-player ref="adplayer" :the-url="sound.url" :the-control-ist="sound.controlList"/>
+      @close="closeSound"
+    >
+      <audio-player
+        ref="adplayer"
+        :the-url="sound.url"
+        :the-control-ist="sound.controlList"
+      />
     </el-dialog>
   </div>
 </template>
 
 <script>
 // import { caseDetail } from '@/api/callCase'
-import { getSoundName } from '@/api/sound'
-import AudioPlayer from '@/components/AudioPlayer/AudioPlayer'
+import { getSoundName } from "@/api/sound";
+import AudioPlayer from "@/components/AudioPlayer/AudioPlayer";
 
 export default {
-  name: 'CaseFormRead',
+  name: "CaseFormRead",
   components: { AudioPlayer },
   props: {
     id: {
       type: String,
-      default: ''
+      default: "",
     }, // 事件id（主键id）
     caseForm: {
       type: Object,
       default() {
-        return {}
-      }
-    }
+        return {};
+      },
+    },
   },
   data() {
     return {
+      activeName: 1,
       sound: {
-        url: '',
-        controlList: 'noDownload noSpeed onlyOnePlaying'
+        url: "",
+        controlList: "noDownload noSpeed onlyOnePlaying",
       },
-      soundShow: false // 显示音频弹窗
-    }
+      soundShow: false, // 显示音频弹窗
+    };
   },
   computed: {
     address() {
-      const address_ori = [this.caseForm.areaName, this.caseForm.streetName, this.caseForm.communityName, this.caseForm.fieldintro]
-      const address = address_ori.filter(item => item && item.length > 0)
-      return address.join('-')
+      const address_ori = [
+        this.caseForm.areaName,
+        this.caseForm.streetName,
+        this.caseForm.communityName,
+        this.caseForm.fieldintro,
+      ];
+      const address = address_ori.filter((item) => item && item.length > 0);
+      return address.join("-");
     },
-    caseImage(){
-      if(this.caseForm.caseImage){
-        const base_url = process.env.BASE_API + '/static/'
-        const image_ori = this.caseForm.caseImage.split(';')
-        const imageList = image_ori.map(item=>base_url+ item)
-        return imageList
-      }else{
-        return []
+    caseImage() {
+      if (this.caseForm.caseImage) {
+        const base_url = process.env.BASE_API + "/static/";
+        const image_ori = this.caseForm.caseImage.split(";");
+        const imageList = image_ori.map((item) => base_url + item);
+        return imageList;
+      } else {
+        return [];
       }
-    }
+    },
   },
   methods: {
     // 播放录音
     playSound(sound) {
       if (sound) {
-        getSoundName(sound).then(res => {
-          const recordName = res.data
+        getSoundName(sound).then((res) => {
+          const recordName = res.data;
           if (recordName) {
-            this.sound.url = recordName
-            this.soundShow = true
+            this.sound.url = recordName;
+            this.soundShow = true;
           } else {
-            this.$message.warning('无录音')
+            this.$message.warning("无录音");
           }
-        })
+        });
       } else {
-        this.$message.warning('无录音')
+        this.$message.warning("无录音");
       }
     },
     // 关闭播放弹窗
     closeSound() {
-      this.$refs.adplayer.pausePlay()
-    }
-  }
-}
+      this.$refs.adplayer.pausePlay();
+    },
+  },
+};
 </script>
 <style lang="scss" scoped>
-  .image-container{
-    display: flex;
-    justify-content: flex-start;
-    .case-image{
-      width:100px;
-      height:100px;
-      margin-right: 10px;
-    }
+.image-container {
+  display: flex;
+  justify-content: flex-start;
+  .case-image {
+    width: 100px;
+    height: 100px;
+    margin-right: 10px;
   }
+}
+.collapse-title {
+  font-size: 14px;
+  color: #606266;
+  font-weight: 800;
+  position: absolute;
+  right: 80px;
+  margin-top: -85px;
+}
+/deep/.el-collapse-item__arrow {
+  margin-top: -85px;
+}
+/deep/.el-collapse {
+  border: 0;
+}
+/deep/.el-collapse-item__header {
+  justify-content: end;
+  border: 0;
+  height: 0;
+}
 </style>
diff --git a/src/views/caseManage/caseCommon/caseImgShow.vue b/src/views/caseManage/caseCommon/caseImgShow.vue
new file mode 100644
index 0000000..c6c911d
--- /dev/null
+++ b/src/views/caseManage/caseCommon/caseImgShow.vue
@@ -0,0 +1,42 @@
+<template>
+  <SwiperImg
+    v-if="imgs.length > 0"
+    style="width: 300px; height: 450px; overflow: hidden"
+    :gallery="imgs"
+  />
+  <el-image v-else>
+    <div slot="error" class="image-slot">
+      暂无图片
+    </div>
+  </el-image>
+</template>
+
+<script>
+import SwiperImg from "./SwiperImg.vue";
+export default {
+  components: {
+    SwiperImg,
+  },
+  props: {
+    imgs: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.el-image {
+  margin-top: 3px;
+  width: 300px;
+  height: 450px;
+  line-height: 450px;
+  overflow: hidden;
+  text-align: center;
+  background: #f5f7fa;
+  color: #909399;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/caseManage/caseCommon/caseProcessTable.vue b/src/views/caseManage/caseCommon/caseProcessTable.vue
new file mode 100644
index 0000000..4c54b7f
--- /dev/null
+++ b/src/views/caseManage/caseCommon/caseProcessTable.vue
@@ -0,0 +1,423 @@
+<template>
+  <div class="case-wrap">
+      {{showAll}}
+      {{listData}}
+    <div class="showAllDetail">
+      <el-switch
+        v-model="showAll"
+        active-color="#13ce66"
+        active-text="展开全部信息"
+      >
+      </el-switch>
+    </div>
+    <div class="moreDetail" v-show="!showAll">
+      <!-- 两条数据显示 -->
+      <!-- <div class="step-wrap" style="display:none">
+        <div class="before line">
+          <div class="icon"></div>
+          <div class="title">
+            {{ detailObj.end.processTitle }} &nbsp;&nbsp;&nbsp;&nbsp;
+            <span>{{ detailObj.end.time }}</span>
+          </div>
+          <div class="content">
+            <div class="left">
+              <p>发送人:{{ detailObj.end.sender }}</p>
+              <p>接收人:{{ detailObj.end.sender }}</p>
+              <p>处置详情:{{ detailObj.end.processTitle }}</p>
+            </div>
+            <div class="right">
+              <div class="imgs-wrap">
+                <el-image
+                  v-for="img in detailObj.end.imgs"
+                  :key="img"
+                  :src="img"
+                  class="zoom"
+                  fit="fill"
+                  :preview-src-list="caseImage(img)"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="after">
+          <div class="icon"></div>
+          <div class="title">
+            {{ detailObj.end.processTitle }} &nbsp;&nbsp;&nbsp;&nbsp;
+            <span>{{ detailObj.end.time }}</span>
+          </div>
+          <div class="content">
+            <div class="left">
+              <p>发送人:{{ detailObj.end.sender }}</p>
+              <p>接收人:{{ detailObj.end.sender }}</p>
+              <p>处置详情:{{ detailObj.end.processTitle }}</p>
+            </div>
+            <div class="right">
+              <div class="imgs-wrap">
+                <el-image
+                  v-for="img in detailObj.end.imgs"
+                  :key="img"
+                  :src="img"
+                  class="zoom"
+                  fit="fill"
+                  :preview-src-list="caseImage(img)"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div> -->
+        <div class="step-more-wrap">
+        <div class="detail-wrap" v-for="(item,index) in tempList" :Key="index">
+          <div class="leftLine" v-if="index != tempList.length-1"></div>
+          <div class="title">
+          <div v-if="item.nextId" class="done"></div>
+          <div v-else class="process"></div>
+            {{ item.processTitle }} &nbsp;&nbsp;&nbsp;&nbsp;
+            <span>{{ item.time }}</span>
+          </div>
+          <div class="content">
+            <div class="left">
+              <p>发送人:{{ item.sender }}</p>
+              <p>接收人:{{ item.sender }}</p>
+              <p>处置详情:{{item.processTitle }}</p>
+            </div>
+            <div class="right">
+              <div class="imgs-wrap">
+                <el-image
+                  v-for="img in item.imgs"
+                  :key="img"
+                  :src="img"
+                  class="zoom"
+                  fit="fill"
+                  :preview-src-list="caseImage(img)"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="moreDetail">
+      <div class="step-more-wrap" v-show="showAll">
+        <div class="detail-wrap" v-for="(item,index) in listData" :Key="index">
+          <div class="leftLine" v-if="index != listData.length-1"></div>
+          <div class="title">
+          <div v-if="item.nextId" class="done"></div>
+          <div v-else class="process"></div>
+            {{ item.processTitle }} &nbsp;&nbsp;&nbsp;&nbsp;
+            <span>{{ item.time }}</span>
+          </div>
+          <div class="content">
+            <div class="left">
+              <p>发送人:{{ item.sender }}</p>
+              <p>接收人:{{ item.sender }}</p>
+              <p :title="item.processTitle">处置详情:{{item.processTitle }}</p>
+            </div>
+            <div class="right">
+              <div class="imgs-wrap">
+                <el-image
+                  v-for="img in item.imgs"
+                  :key="img"
+                  :src="img"
+                  class="zoom"
+                  fit="fill"
+                  :preview-src-list="caseImage(img)"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    list: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      showAll: false,
+      photoVisible: false,
+      bigImgUrl: "",
+      detailObj: {
+        start: {},
+        end: {},
+      },
+      imgs: [
+        "https://t7.baidu.com/it/u=1742010762,3975931984&fm=193&f=GIF",
+        "https://t7.baidu.com/it/u=1302518827,2012573433&fm=193&f=GIF",
+        "https://t7.baidu.com/it/u=1216634532,1327384749&fm=193&f=GIF",
+      ],
+      listData: [], // 全部数据
+      tempList: [], // 首尾数据
+    };
+  },
+  watch:{
+    list(val){
+      // alert(val)
+      console.log(val)
+    }
+  },
+  created() {
+          // alert(this.list)
+    // this.listData = this.treeDataToCompressed(this.list).reverse();
+      // 处理之后的数据 获取首尾数据
+    this.listData = this.list;
+    this.tempList = [this.listData[0],this.listData.at(-1)];
+    this.listData = this.listData.map((item) => {
+      item.imgs = this.imgs;
+      return item; 
+    });
+  },
+  methods: {
+    showBigImage(e) {
+      //点击图片函数，点击后，把photoVisible设置成true
+      if (e != "") {
+        this.photoVisible = true;
+        this.bigImgUrl = e.currentTarget.src;
+      }
+    },
+    caseImage(img) {
+      return img ? [].concat(img) : [];
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.case-wrap {
+  width: 60vw;
+  padding-top: 20px;
+}
+.before::after {
+  content: "";
+  display: inline-block;
+  position: absolute;
+  top: 12px;
+  left: -31px;
+  width: 2px;
+  height: 90%;
+  border-left: 2px dashed #ccc;
+}
+.moreDetail {
+  font-size: 14px !important;
+  position: relative;
+  margin-top: 20px;
+}
+.step-wrap {
+  box-sizing: border-box;
+  height: 300px;
+  padding-left: 30px;
+}
+.step-wrap {
+  .before {
+    position: relative;
+    height: 50%;
+  }
+  .after {
+    position: relative;
+    height: 50%;
+  }
+  .content {
+    margin-top: 20px;
+    width: 95%;
+    height: 100px;
+    background: #f0f0f0;
+    padding: 20px 30px;
+    border-radius: 10px;
+    display: flex;
+
+    .left {
+      width: 420px;
+      p {
+        font-size: 14px !important;
+        padding: 0;
+        margin: 0;
+        margin-top: 2px;
+        line-height: 20px;
+      }
+    }
+    .right {
+      position: relative;
+      flex: 1;
+    }
+  }
+}
+.title {
+  font-weight: 800;
+  span {
+    color: #ccc;
+    font-weight: 400 !important;
+  }
+}
+.moreDetail .process {
+  z-index: 10;
+  content: "";
+  display: inline-block;
+  width: 25px;
+  height: 25px;
+  background: url("../../../assets/global_images/process.png") no-repeat;
+  position: absolute;
+  top: -8px;
+  left: -12px;
+  background-size: contain;
+}
+.moreDetail .done {
+  z-index: 10;
+  content: "";
+  display: inline-block;
+  width: 25px;
+  height: 25px;
+  background: url("../../../assets/global_images/done.png") no-repeat;
+  position: absolute;
+  bottom: -8px;
+  left: -12px;
+  background-size: contain;
+}
+.before .icon,.after .icon {
+  z-index: 10;
+  display: inline-block;
+  width: 25px;
+  height: 25px;
+  background: url("../../../assets/global_images/done.png") no-repeat;
+  position: absolute;
+  top: -3px;
+  left: -42px;
+  background-size: contain;
+}
+.imgs-wrap {
+  position: absolute;
+  left: -5px;
+  top: -10px;
+  width: 400px;
+  height: 80px;
+  overflow-y: auto;
+}
+.text-over {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.text-over-more {
+  overflow: hidden; // 溢出隐藏
+  text-overflow: ellipsis; // 溢出用省略号显示
+  display: -webkit-box; // 作为弹性伸缩盒子模型显示。
+  -webkit-box-orient: vertical; // 设置伸缩盒子的子元素排列方式：从上到下垂直排列
+  -webkit-line-clamp: 2; // 显示的行数
+}
+/deep/.zoom {
+  display: inline-block;
+  box-sizing: border-box;
+  width: 120px;
+  height: 70px;
+  margin-right: 10px;
+  margin-top: 5px;
+  cursor: pointer;
+}
+.leftLine{
+    position: absolute;
+    top: 18px;
+    left: -19px;
+    width: 2px;
+    height: 99%;
+    border-left: 2px dashed #ccc;
+}
+.moreDetail {
+  .step-more-wrap {
+    box-sizing: border-box;
+    padding-left: 30px;
+    height: 360px;
+    overflow-y: auto;
+    .detail-wrap {
+      margin-top: 3px;
+      margin-bottom: 20px;
+      position: relative;
+      .title{
+        position: relative;
+        .process{
+          z-index: 10 !important;
+          position: absolute;
+          top: -3px;
+          left: -30px;
+          width: 25px;
+          height: 25px;
+          background: url("../../../assets/global_images/process.png") no-repeat;
+          background-size: contain;
+        }
+        .done{
+          z-index: 10 !important;
+          position: absolute;
+          top: -3px;
+          left: -30px;
+          width: 25px;
+          height: 25px;
+          background: url("../../../assets/global_images/done.png") no-repeat;
+          background-size: contain;
+        }
+      }
+      p {
+        font-size: 14px !important;
+        padding: 0;
+        margin: 0;
+        margin-top: 2px;
+        line-height: 20px;
+        width: 90%;
+          overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+      }
+      .content {
+        margin-top: 20px;
+        width: 96%;
+        height: 100px;
+        background: #f0f0f0;
+        padding: 20px 30px;
+        border-radius: 10px;
+        display: flex;
+
+        .left {
+          width: 420px;
+          p {
+            font-size: 14px !important;
+            padding: 0;
+            margin: 0;
+            margin-top: 2px;
+            line-height: 20px;
+          }
+        }
+        .right {
+          position: relative;
+          flex: 1;
+        }
+      }
+    }
+  }
+}
+
+::-webkit-scrollbar {
+  /*滚动条整体样式*/
+  width: 6px; /*高宽分别对应横竖滚动条的尺寸*/
+  height: 8px;
+}
+::-webkit-scrollbar-thumb {
+  /*滚动条里面小方块*/
+  border-radius: 5px;
+  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  background: rgba(0, 0, 0, 0.1);
+}
+::-webkit-scrollbar-track {
+  /*滚动条里面轨道*/
+  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  border-radius: 5px;
+  background: rgba(0, 0, 0, 0.1);
+}
+
+</style>
\ No newline at end of file

diff --git a/package.json b/package.json
index fb32aa2..c325e45 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
     "vue-amap": "^0.5.9",
     "vue-baidu-map": "^0.21.22",
     "vue-router": "3.0.1",
+    "vue-slide-mini": "^1.0.4",
     "vuex": "3.0.1",
     "wangeditor": "^3.1.1"
   },
diff --git a/src/api/callCase.js b/src/api/callCase.js
index cd61986..9da1fc7 100644
--- a/src/api/callCase.js
+++ b/src/api/callCase.js
@@ -126,3 +126,12 @@
     }
   })
 }
+
+// 社会治理事流转步骤接口
+export function eventStepList(data) {
+  return request({
+    url: '/callcenter/api/case/eventStepList',
+    method: 'post',
+    data
+  })
+}
diff --git a/src/assets/global_images/done.png b/src/assets/global_images/done.png
new file mode 100644
index 0000000..c9a2c5e
--- /dev/null
+++ b/src/assets/global_images/done.png
Binary files differ
diff --git a/src/assets/global_images/process.png b/src/assets/global_images/process.png
new file mode 100644
index 0000000..311fe3a
--- /dev/null
+++ b/src/assets/global_images/process.png
Binary files differ
diff --git a/src/components/NomalTable/index.vue b/src/components/NomalTable/index.vue
index 55a7378..8616987 100644
--- a/src/components/NomalTable/index.vue
+++ b/src/components/NomalTable/index.vue
@@ -55,7 +55,7 @@
         </el-col>
       </el-row>
       <!-- 表格正文-->
-      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="handleSelectionChange">
+      <el-table v-loading="listLoading" :data="data" :height="height" :size="size" class="table" row-class-name="small-row-class" border @selection-change="handleSelectionChange">
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns"/>
         <!--多选选中列-->
@@ -176,7 +176,10 @@
           refresh: false // 是否需要刷新按钮
         }
       }
-    }// 表格工具配置
+    },// 表格工具配置
+    height:{
+      type:String,
+    }
   },
   data() {
     return {
diff --git a/src/components/SelectTree/singleSelect.vue b/src/components/SelectTree/singleSelect.vue
index ba15b20..3336346 100644
--- a/src/components/SelectTree/singleSelect.vue
+++ b/src/components/SelectTree/singleSelect.vue
@@ -6,7 +6,8 @@
     trigger="click"
     class="select-tree scrollbar"
     @show="onShowPopover"
-    @hide="onHidePopover">
+    @hide="onHidePopover"
+  >
     <el-tree
       ref="tree"
       :style="`min-width: ${treeWidth}`"
@@ -14,265 +15,276 @@
       :props="props"
       :expand-on-click-node="false"
       :filter-node-method="filterNode"
-      :default-expand-all="false"
+      :default-expand-all="expandAll"
       class="innerbox"
       highlight-current
       accordion
-      @node-click="onClickNode"/>
+      @node-click="onClickNode"
+    />
     <el-input
       slot="reference"
       ref="input"
       v-model="labelModel"
       :style="`width: ${width}px`"
       :size="size"
-      :class="{ 'rotate': showStatus }"
+      :class="{ rotate: showStatus }"
       :placeholder="placeholder"
       :disabled="disabled"
       clearable
-      suffix-icon="el-icon-arrow-down"/>
+      suffix-icon="el-icon-arrow-down"
+    />
   </el-popover>
 </template>
 
 <script>
-
 export default {
-  name: 'SelectTree',
+  name: "SelectTree",
+
   // 设置绑定参数
   model: {
-    prop: 'value',
-    event: 'selected'
+    prop: "value",
+    event: "selected",
   },
   props: {
+    // 是否默认展开全部
+    expandAll: {
+      type: Boolean,
+      default: false,
+    },
     // 接收绑定参数
     value: {
       type: String,
-      default: ''
+      default: "",
     },
     // 输入框宽度
     width: {
       type: String,
-      default: ''
+      default: "",
     },
     size: {
       type: String,
-      default: ''
+      default: "",
     },
     // 输入框宽度
     disabled: {
       type: Boolean,
-      default: false
+      default: false,
     },
     // 选项数据
     options: {
       type: Array,
-      required: true
+      required: true,
     },
     // 输入框占位符
     placeholder: {
       type: String,
       required: false,
-      default: '请选择'
+      default: "请选择",
     },
     // 树节点配置选项
     props: {
       type: Object,
       required: false,
       default: () => ({
-        parent: 'parentId',
-        value: 'rowGuid',
-        label: 'areaName',
-        children: 'children'
-      })
-    }
+        parent: "parentId",
+        value: "rowGuid",
+        label: "areaName",
+        children: "children",
+      }),
+    },
   },
   data() {
     return {
       // 树状菜单显示状态
       showStatus: false,
       // 菜单宽度
-      treeWidth: 'auto',
+      treeWidth: "auto",
       // 输入框显示值
-      labelModel: '',
+      labelModel: "",
       // 实际请求传值
-      valueModel: ''
-    }
+      valueModel: "",
+    };
   },
   computed: {
     // 是否为树状结构数据
     dataType() {
-      const jsonStr = JSON.stringify(this.options)
-      return jsonStr.indexOf(this.props.children) !== -1
+      const jsonStr = JSON.stringify(this.options);
+      return jsonStr.indexOf(this.props.children) !== -1;
     },
     // 若非树状结构，则转化为树状结构数据
     data() {
       // return this.dataType ? this.options : this.switchTree()
-      return this.options
-    }
+      return this.options;
+    },
   },
   watch: {
     labelModel(val) {
-      console.log('labelModel change:' + val)
+      console.log("labelModel change:" + val);
       if (!val) {
-        if (val === '') {
-          this.valueModel = ''
-          this.onCloseTree()
-          this.$emit('selected', this.valueModel)
+        if (val === "") {
+          this.valueModel = "";
+          this.onCloseTree();
+          this.$emit("selected", this.valueModel);
         }
-        this.valueModel = ''
+        this.valueModel = "";
       }
-      this.$refs.tree.filter(val)
+      this.$refs.tree.filter(val);
     },
     value(val) {
-      this.labelModel = this.queryTree(this.data, val)
-    }
+      this.labelModel = this.queryTree(this.data, val);
+    },
   },
   created() {
     // 检测输入框原有值并显示对应 label
     if (this.value) {
-      this.labelModel = this.queryTree(this.data, this.value)
+      this.labelModel = this.queryTree(this.data, this.value);
     }
     // 获取输入框宽度同步至树状菜单宽度
     this.$nextTick(() => {
-      this.treeWidth = `${(this.width || this.$refs.input.$refs.input.clientWidth) - 24}px`
-    })
+      this.treeWidth = `${
+        (this.width || this.$refs.input.$refs.input.clientWidth) - 24
+      }px`;
+    });
   },
   methods: {
     // 单击节点
     onClickNode(node) {
-      this.labelModel = node[this.props.label]
-      this.valueModel = node[this.props.value]
-      this.onCloseTree()
+      this.labelModel = node[this.props.label];
+      this.valueModel = node[this.props.value];
+      this.onCloseTree();
     },
     // 偏平数组转化为树状层级结构
     switchTree() {
-      return this.cleanChildren(this.buildTree(this.options, '0'))
+      return this.cleanChildren(this.buildTree(this.options, "0"));
     },
     // 隐藏树状菜单
     onCloseTree() {
-      this.$refs.popover.showPopper = false
+      this.$refs.popover.showPopper = false;
     },
     // 显示时触发
     onShowPopover() {
-      this.showStatus = true
-      this.$refs.tree.filter(false)
+      this.showStatus = true;
+      this.$refs.tree.filter(false);
     },
     // 隐藏时触发
     onHidePopover() {
-      this.showStatus = false
-      console.log('onHidePopover:' + this.valueModel)
+      this.showStatus = false;
+      console.log("onHidePopover:" + this.valueModel);
       // if (this.valueModel !== '') {
       //   this.$emit('selected', this.valueModel)
       // }
-      this.$emit('selected', this.valueModel)
+      this.$emit("selected", this.valueModel);
     },
     // 树节点过滤方法
     filterNode(query, data) {
-      if (!query) return true
-      return data[this.props.label].indexOf(query) !== -1
+      if (!query) return true;
+      return data[this.props.label].indexOf(query) !== -1;
     },
     // 搜索树状数据中的 ID
     queryTree(tree, id) {
-      let stark = []
-      stark = stark.concat(tree)
+      let stark = [];
+      stark = stark.concat(tree);
       while (stark.length) {
-        const temp = stark.shift()
+        const temp = stark.shift();
         if (temp[this.props.children]) {
-          stark = stark.concat(temp[this.props.children])
+          stark = stark.concat(temp[this.props.children]);
         }
         if (temp[this.props.value] === id) {
-          return temp[this.props.label]
+          return temp[this.props.label];
         }
       }
-      return ''
+      return "";
     },
     // 将一维的扁平数组转换为多层级对象
-    buildTree(data, id = '0') {
+    buildTree(data, id = "0") {
       const fa = (parentId) => {
-        console.log('parentId:' + parentId)
-        const temp = []
+        console.log("parentId:" + parentId);
+        const temp = [];
         for (let i = 0; i < data.length; i++) {
-          const n = data[i]
+          const n = data[i];
           if (n[this.props.parent] === parentId) {
-            n.children = fa(n.code)
-            temp.push(n)
+            n.children = fa(n.code);
+            temp.push(n);
           }
         }
-        return temp
-      }
-      return fa(id)
+        return temp;
+      };
+      return fa(id);
     },
     // 清除空 children项
     cleanChildren(data) {
       const fa = (list) => {
         list.map((e) => {
           if (e.children.length) {
-            fa(e.children)
+            fa(e.children);
           } else {
-            delete e.children
+            delete e.children;
           }
-          return e
-        })
-        return list
-      }
-      return fa(data)
-    }
-  }
-}
+          return e;
+        });
+        return list;
+      };
+      return fa(data);
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-  .scrollbar {
-    overflow-y: scroll;
-    &::-webkit-scrollbar {
-      z-index: 11;
-      width: 6px;
-    }
-    &::-webkit-scrollbar-track,
-    &::-webkit-scrollbar-corner {
-      background: #fff;
-    }
-    &::-webkit-scrollbar-thumb {
-      // border-radius: 5px;
-      width: 6px;
-      background-color: #eee;
-      &:hover {
-        background-color: #ccc;
-      }
-    }
-    &::-webkit-scrollbar-track-piece {
-      background: #fff;
-      width: 6px;
+.scrollbar {
+  overflow-y: scroll;
+  &::-webkit-scrollbar {
+    z-index: 11;
+    width: 6px;
+  }
+  &::-webkit-scrollbar-track,
+  &::-webkit-scrollbar-corner {
+    background: #fff;
+  }
+  &::-webkit-scrollbar-thumb {
+    // border-radius: 5px;
+    width: 6px;
+    background-color: #eee;
+    &:hover {
+      background-color: #ccc;
     }
   }
-  .select-tree .el-tree {
-    max-height: 350px;
+  &::-webkit-scrollbar-track-piece {
+    background: #fff;
+    width: 6px;
   }
-  .select-tree .el-input.el-input--suffix {
-    cursor: pointer;
-  }
-  .select-tree .el-input.el-input--suffix.rotate .el-input__suffix {
-    transform: rotate(180deg);
-  }
+}
+.select-tree .el-tree {
+  max-height: 350px;
+}
+.select-tree .el-input.el-input--suffix {
+  cursor: pointer;
+}
+.select-tree .el-input.el-input--suffix.rotate .el-input__suffix {
+  transform: rotate(180deg);
+}
 
-  .innerbox::-webkit-scrollbar {/*滚动条整体样式*/
-    width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
-    height: 4px;
-  }
-  .innerbox::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
-    border-radius: 5px;
-    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
-    background: rgba(0,0,0,0.2);
-  }
-  .innerbox::-webkit-scrollbar-track { /*滚动条里面轨道*/
-    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
-    border-radius: 0;
-    background: rgba(0, 0, 0, 0.1);
-  }
+.innerbox::-webkit-scrollbar {
+  /*滚动条整体样式*/
+  width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
+  height: 4px;
+}
+.innerbox::-webkit-scrollbar-thumb {
+  /*滚动条里面小方块*/
+  border-radius: 5px;
+  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  background: rgba(0, 0, 0, 0.2);
+}
+.innerbox::-webkit-scrollbar-track {
+  /*滚动条里面轨道*/
+  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  border-radius: 0;
+  background: rgba(0, 0, 0, 0.1);
+}
 </style>
 <style lang="scss">
-  .el-popover{
-    max-height: 400px;
-    overflow: auto;
-  }
-
+.el-popover {
+  max-height: 400px;
+  overflow: auto;
+}
 </style>
diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss
index 65abe46..8236420 100644
--- a/src/styles/sidebar.scss
+++ b/src/styles/sidebar.scss
@@ -212,3 +212,8 @@
 .is-active>.light-line{
   background-color: $menuActiveText
 }
+
+.el-image-viewer__close{
+  color: #fff !important;
+  font-size: 52px !important;
+}
\ No newline at end of file
diff --git a/src/views/caseManage/caseCommon/SwiperImg.vue b/src/views/caseManage/caseCommon/SwiperImg.vue
new file mode 100644
index 0000000..4ff3fd2
--- /dev/null
+++ b/src/views/caseManage/caseCommon/SwiperImg.vue
@@ -0,0 +1,88 @@
+<template>
+	<div class="swiper" @mouseover="overHd" @mouseout="auto">
+		<div class="swiper-item" v-for="(item,ind) in gallery" :key="item" v-show="ind==index">
+			<img :src="item" width="100%"  style="width: 300px; height: 450px; overflow: hidden">
+		</div>
+		<div class="thumbs" v-if="gallery.length > 1">
+			<span class="thumb" :class="{'active' :item==index+1}" v-for="item in gallery.length" :key='item'
+				@click="index=item-1">{{item}}</span>
+		</div>
+	</div>
+</template>
+ 
+<script>
+	export default {
+		props: {
+			gallery: {
+				type: Array,
+				default () {
+					return []
+				}
+			}
+		},
+		data() {
+			return {
+				//默认显示 
+				index: 0,
+				stopID: null,
+			}
+		},
+		// 当组件挂载完毕 执行自动播放
+		created() {
+			this.auto();
+		},
+		beforeDestroy(){
+			this.overHd();
+		},
+		methods: {
+			//鼠标一开  auto自动执行
+			auto() {
+				this.stopID = setInterval(() => {
+					this.index++;
+					this.check();
+				}, 5000)
+			},
+			overHd() {
+				clearInterval(this.stopID);
+			},
+			//检查边界
+			check() {
+				if (this.index == this.gallery.length) {
+					this.index = 0;
+				}
+			}
+		}
+	}
+</script>
+ 
+<style scoped="scoped">
+	.swiper {
+		position: relative;
+	}
+ 
+	.swiper .thumbs {
+		position: absolute;
+		bottom: 10px;
+		width: 100%;
+		text-align: center;
+	}
+ 
+	.thumb {
+		width: 10px;
+		height: 10px;
+		display: inline-block;
+		border-radius: 15px;
+		text-indent: 9999em;
+		margin: 0 5px;
+		background-color: #fff;
+	}
+ 
+	.thumb:hover {
+		cursor: pointer;
+		background-color: #42b983;
+	}
+	.active {
+		background-color: #42b983;
+ 
+	}
+</style>
\ No newline at end of file
diff --git a/src/views/caseManage/caseCommon/caseFormProcess.vue b/src/views/caseManage/caseCommon/caseFormProcess.vue
index f8a9666..e6a6446 100644
--- a/src/views/caseManage/caseCommon/caseFormProcess.vue
+++ b/src/views/caseManage/caseCommon/caseFormProcess.vue
@@ -4,138 +4,183 @@
       <el-row :gutter="20">
         <el-col :span="6">
           <el-form-item label="事件编号">
-            <el-input :value="caseForm.caseId" size="small"/>
+            <el-input :value="caseForm.caseId" size="small" />
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="来电时间">
-            <el-input :value="caseForm.callTime" size="small"/>
+            <el-input :value="caseForm.callTime" size="small" />
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="联系人">
-            <el-input :value="caseForm.reporterName" size="small"/>
+            <el-input :value="caseForm.reporterName" size="small" />
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="联系电话">
-            <el-input :value="caseForm.reporterPhone" size="small"/>
+            <el-input :value="caseForm.reporterPhone" size="small" />
           </el-form-item>
         </el-col>
       </el-row>
       <el-row :gutter="20">
         <el-col :span="6">
           <el-form-item label="事件来源">
-            <el-input :value="caseForm.sourceName" size="small"/>
+            <el-input :value="caseForm.sourceName" size="small" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="事件类型">
+            <el-input :value="caseForm.sourceType" size="small" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="精细化平台事件编号">
+            <el-input :value="caseForm.sourceNumber" size="small" />
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="事件分类">
-            <el-input :value="caseForm.eorcName" size="small"/>
+            <el-input :value="caseForm.eorcName" size="small" />
             <!--<el-input :value="caseForm.eorcName + '/' + caseForm.caseTypeName" size="small"/>-->
             <!--<el-input :value="caseForm.eorcName + '/' + caseForm.caseTypeName + '/' + caseForm.caseDetailTypeName" size="small"/>-->
           </el-form-item>
         </el-col>
-        <el-col :span="6">
-          <el-form-item label="紧急程度">
-            <el-input :value="caseForm.caseLevelName" size="small"/>
-          </el-form-item>
-        </el-col>
+
         <el-col :span="6">
           <el-form-item label="限办日期">
-            <el-input :value="caseForm.limitedTime" size="small"/>
+            <el-input :value="caseForm.limitedTime" size="small" />
           </el-form-item>
         </el-col>
-      </el-row>
-      <el-row :gutter="20">
         <el-col :span="6">
           <el-form-item label="事件地址">
             <!--<el-input :value="caseForm.areaName + '-' + caseForm.streetName + '-' + caseForm.communityName + '-' + caseForm.fieldintro" size="small"/>-->
-            <el-input :value="address" size="small"/>
+            <el-input :value="address" size="small" />
           </el-form-item>
         </el-col>
         <el-col :span="6">
-          <el-form-item label="事件辖区">
-            <el-input :value="caseForm.areaName" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="典型案例">
-            <el-input :value="caseForm.isTypical === '1' ? '是' : '否'" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="要情">
-            <el-input :value="caseForm.isImportant === '1' ? '是' : '否'" size="small"/>
+          <!-- <el-form-item label="紧急程度"> -->
+          <el-form-item label="事件状态">
+            <el-input :value="caseForm.caseLevelName" size="small" />
           </el-form-item>
         </el-col>
       </el-row>
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item label="当前事件状态">
-            <el-input :value="caseForm.stateName" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="当前处理方式">
-            <el-input :value="caseForm.caseStateName" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="需要回访">
-            <el-input :value="caseForm.isReturnVisit === '1' ? '是' : '否'" size="small"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="受理录音">
-            <el-input :value="caseForm.sound" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-button type="text" @click="playSound(caseForm.sound)">播放录音</el-button>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="回访录音">
-            <el-input :value="caseForm.satisfactionSound" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-button type="text" @click="playSound(caseForm.satisfactionSound)">播放录音</el-button>
-        <el-popover
-          v-if="caseForm.caseState === 5"
-          placement="top"
-          width="180"
-          v-model="popoverVisible">
-          <div style="text-align:center; margin: 0">
-            <el-button size="mini"  @click="revisit('')">本地号码</el-button>
-            <el-button type="primary" size="mini"  @click="revisit('0')">外地号码</el-button>
-          </div>
-          <el-button slot="reference" type="text">回访拨号</el-button>
-        </el-popover>
-      </el-row>
-      <el-row>
-        <el-col :span="24">
-          <el-form-item label="事件标题">
-            <el-input :value="caseForm.title" size="small"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row>
-        <el-col :span="24">
-          <el-form-item label="事件内容">
-            <el-input :value="caseForm.description" size="small"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row v-show="this.caseImage.length>0">
-        <el-form-item label="事件图片">
-          <!-- 图片展示 -->
-          <div class="image-container">
-            <el-image v-for="img in caseImage" :key="img" :src="img" fit="fill" class="case-image" :preview-src-list="caseImage"/>
-          </div>
-        </el-form-item>
-      </el-row>
+      <el-collapse v-model="activeName" accordion>
+        <el-collapse-item name="1">
+          <template slot="title">
+            <span class="collapse-title">更多信息</span>
+          </template>
+          <el-row :gutter="20">
+            <el-col :span="6">
+              <el-form-item label="事件辖区">
+                <el-input :value="caseForm.areaName" size="small" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="典型案例">
+                <el-input
+                  :value="caseForm.isTypical === '1' ? '是' : '否'"
+                  size="small"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="要情">
+                <el-input
+                  :value="caseForm.isImportant === '1' ? '是' : '否'"
+                  size="small"
+                />
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <el-row :gutter="20">
+            <el-col :span="6">
+              <el-form-item label="当前事件状态">
+                <el-input :value="caseForm.stateName" size="small" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="当前处理方式">
+                <el-input :value="caseForm.caseStateName" size="small" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="需要回访">
+                <el-input
+                  :value="caseForm.isReturnVisit === '1' ? '是' : '否'"
+                  size="small"
+                />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <el-form-item label="受理录音">
+                <el-input :value="caseForm.sound" size="small" />
+              </el-form-item>
+            </el-col>
+            <el-button type="text" @click="playSound(caseForm.sound)"
+              >播放录音</el-button
+            >
+          </el-row>
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <el-form-item label="回访录音">
+                <el-input :value="caseForm.satisfactionSound" size="small" />
+              </el-form-item>
+            </el-col>
+            <el-button
+              type="text"
+              @click="playSound(caseForm.satisfactionSound)"
+              >播放录音</el-button
+            >
+            <el-popover
+              v-if="caseForm.caseState === 5"
+              placement="top"
+              width="180"
+              v-model="popoverVisible"
+            >
+              <div style="text-align: center; margin: 0">
+                <el-button size="mini" @click="revisit('')">本地号码</el-button>
+                <el-button type="primary" size="mini" @click="revisit('0')"
+                  >外地号码</el-button
+                >
+              </div>
+              <el-button slot="reference" type="text">回访拨号</el-button>
+            </el-popover>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="事件标题">
+                <el-input :value="caseForm.title" size="small" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="事件内容">
+                <el-input :value="caseForm.description" size="small" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row v-show="this.caseImage.length > 0">
+            <el-form-item label="事件图片">
+              <!-- 图片展示 -->
+              <div class="image-container">
+                <el-image
+                  v-for="img in caseImage"
+                  :key="img"
+                  :src="img"
+                  fit="fill"
+                  class="case-image"
+                  :preview-src-list="caseImage"
+                />
+              </div>
+            </el-form-item>
+          </el-row>
+        </el-collapse-item>
+      </el-collapse>
       <!--<el-row>-->
       <!--<el-col :span="24">-->
       <!--<el-form-item label="备注信息">-->
@@ -151,98 +196,128 @@
       width="600px"
       append-to-body
       custom-class="sound-dialog"
-      @close="closeSound">
-      <audio-player ref="adplayer" :the-url="sound.url" :the-control-ist="sound.controlList"/>
+      @close="closeSound"
+    >
+      <audio-player
+        ref="adplayer"
+        :the-url="sound.url"
+        :the-control-ist="sound.controlList"
+      />
     </el-dialog>
   </div>
 </template>
 
 <script>
 // import { caseDetail } from '@/api/callCase'
-import { getSoundName } from '@/api/sound'
-import AudioPlayer from '@/components/AudioPlayer/AudioPlayer'
+import { getSoundName } from "@/api/sound";
+import AudioPlayer from "@/components/AudioPlayer/AudioPlayer";
 
 export default {
-  name: 'CaseFormProcess',
+  name: "CaseFormProcess",
   components: { AudioPlayer },
   props: {
     id: {
       type: String,
-      default: ''
+      default: "",
     }, // 事件id（主键id）
     caseForm: {
       type: Object,
       default() {
-        return {}
-      }
-    }
+        return {};
+      },
+    },
   },
   data() {
     return {
+      activeName: 1,
       sound: {
-        url: '',
-        controlList: 'noDownload noSpeed onlyOnePlaying'
+        url: "",
+        controlList: "noDownload noSpeed onlyOnePlaying",
       },
       popoverVisible: false, // 选择本地外地呼叫的弹窗
-      soundShow: false // 显示音频弹窗
-    }
+      soundShow: false, // 显示音频弹窗
+    };
   },
   computed: {
     address() {
-      const address_ori = [this.caseForm.areaName, this.caseForm.streetName, this.caseForm.communityName, this.caseForm.fieldintro]
-      const address = address_ori.filter(item => item && item.length > 0)
-      return address.join('-')
+      const address_ori = [
+        this.caseForm.areaName,
+        this.caseForm.streetName,
+        this.caseForm.communityName,
+        this.caseForm.fieldintro,
+      ];
+      const address = address_ori.filter((item) => item && item.length > 0);
+      return address.join("-");
     },
-    caseImage(){
-      if(this.caseForm.caseImage){
-        const base_url = process.env.BASE_API + '/static/'
-        const image_ori = this.caseForm.caseImage.split(';')
-        const imageList = image_ori.map(item=>base_url+ item)
-        return imageList
-      }else{
-        return []
+    caseImage() {
+      if (this.caseForm.caseImage) {
+        const base_url = process.env.BASE_API + "/static/";
+        const image_ori = this.caseForm.caseImage.split(";");
+        const imageList = image_ori.map((item) => base_url + item);
+        return imageList;
+      } else {
+        return [];
       }
-    }
+    },
   },
   methods: {
     // 播放录音
     playSound(sound) {
       if (sound) {
-        getSoundName(sound).then(res => {
-          const recordName = res.data
+        getSoundName(sound).then((res) => {
+          const recordName = res.data;
           if (recordName) {
-            this.sound.url = recordName
-            this.soundShow = true
+            this.sound.url = recordName;
+            this.soundShow = true;
           } else {
-            this.$message.warning('无录音')
+            this.$message.warning("无录音");
           }
-        })
+        });
       } else {
-        this.$message.warning('无录音')
+        this.$message.warning("无录音");
       }
     },
     // 关闭播放弹窗
     closeSound() {
-      this.$refs.adplayer.pausePlay()
+      this.$refs.adplayer.pausePlay();
     },
     // 拨打回访电话
     revisit(middleString) {
       // middleString为空或0，分别表示本地或外地
-      const tel = '9' + middleString + this.caseForm.reporterPhone
-      this.$store.dispatch('dial', tel)
-      this.popoverVisible = false
-    }
-  }
-}
+      const tel = "9" + middleString + this.caseForm.reporterPhone;
+      this.$store.dispatch("dial", tel);
+      this.popoverVisible = false;
+    },
+  },
+};
 </script>
 <style lang="scss" scoped>
-  .image-container{
-    display: flex;
-    justify-content: flex-start;
-    .case-image{
-      width:100px;
-      height:100px;
-      margin-right: 10px;
-    }
+.image-container {
+  display: flex;
+  justify-content: flex-start;
+  .case-image {
+    width: 100px;
+    height: 100px;
+    margin-right: 10px;
   }
+}
+.collapse-title {
+  font-size: 14px;
+  color: #606266;
+  font-weight: 800;
+  position: absolute;
+  right: 80px;
+  margin-top: -85px;
+}
+/deep/.el-collapse-item__arrow{
+  margin-top: -85px;
+}
+/deep/.el-collapse {
+  border: 0;
+}
+/deep/.el-collapse-item__header {
+  justify-content: end;
+  border: 0;
+  height: 0;
+}
 </style>
diff --git a/src/views/caseManage/caseCommon/caseFormRead.vue b/src/views/caseManage/caseCommon/caseFormRead.vue
index 897023a..7fa39af 100644
--- a/src/views/caseManage/caseCommon/caseFormRead.vue
+++ b/src/views/caseManage/caseCommon/caseFormRead.vue
@@ -4,134 +4,173 @@
       <el-row :gutter="20">
         <el-col :span="6">
           <el-form-item label="事件编号">
-            <el-input :value="caseForm.caseId" size="small"/>
+            <el-input :value="caseForm.caseId" size="small" />
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="来电时间">
-            <el-input :value="caseForm.callTime" size="small"/>
+            <el-input :value="caseForm.callTime" size="small" />
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="联系人">
-            <el-input :value="caseForm.reporterName" size="small"/>
+            <el-input :value="caseForm.reporterName" size="small" />
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="联系电话">
-            <el-input :value="caseForm.reporterPhone" size="small"/>
+            <el-input :value="caseForm.reporterPhone" size="small" />
           </el-form-item>
         </el-col>
       </el-row>
       <el-row :gutter="20">
         <el-col :span="6">
           <el-form-item label="事件来源">
-            <el-input :value="caseForm.sourceName" size="small"/>
+            <el-input :value="caseForm.sourceName" size="small" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="事件类型">
+            <el-input :value="caseForm.sourceType" size="small" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="精细化平台事件编号">
+            <el-input :value="caseForm.sourceNumber" size="small" />
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="事件分类">
-            <el-input :value="caseForm.eorcName" size="small"/>
+            <el-input :value="caseForm.eorcName" size="small" />
             <!--<el-input :value="caseForm.eorcName + '/' + caseForm.caseTypeName" size="small"/>-->
             <!--<el-input :value="caseForm.eorcName + '/' + caseForm.caseTypeName + '/' + caseForm.caseDetailTypeName" size="small"/>-->
           </el-form-item>
         </el-col>
-        <el-col :span="6">
-          <el-form-item label="紧急程度">
-            <el-input :value="caseForm.caseLevelName" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="限办日期">
-            <el-input :value="caseForm.limitedTime" size="small"/>
-          </el-form-item>
-        </el-col>
       </el-row>
       <el-row :gutter="20">
         <el-col :span="6">
+          <el-form-item label="限办日期">
+            <el-input :value="caseForm.limitedTime" size="small" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
           <el-form-item label="事件地址">
             <!--<el-input :value="caseForm.areaName + '-' + caseForm.streetName + '-' + caseForm.communityName + '-' + caseForm.fieldintro" size="small"/>-->
-            <el-input :value="address" size="small"/>
+            <el-input :value="address" size="small" />
           </el-form-item>
         </el-col>
         <el-col :span="6">
-          <el-form-item label="事件辖区">
-            <el-input :value="caseForm.areaName" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="典型案例">
-            <el-input :value="caseForm.isTypical === '1' ? '是' : '否'" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="要情">
-            <el-input :value="caseForm.isImportant === '1' ? '是' : '否'" size="small"/>
+          <el-form-item label="事件状态">
+            <el-input :value="caseForm.caseLevelName" size="small" />
           </el-form-item>
         </el-col>
       </el-row>
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item label="当前事件状态">
-            <el-input :value="caseForm.stateName" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="当前处理方式">
-            <el-input :value="caseForm.caseStateName" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="需要回访">
-            <el-input :value="caseForm.isReturnVisit === '1' ? '是' : '否'" size="small"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row v-if="caseForm.sound" :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="受理录音">
-            <el-input :value="caseForm.sound" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-button type="text" @click="playSound(caseForm.sound)">播放录音</el-button>
-      </el-row>
-      <el-row v-if="caseForm.satisfactionSound" :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="回访录音">
-            <el-input :value="caseForm.satisfactionSound" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-button type="text" @click="playSound(caseForm.satisfactionSound)">播放录音</el-button>
-      </el-row>
-      <el-row>
-        <el-col :span="24">
-          <el-form-item label="事件标题">
-            <el-input :value="caseForm.title" size="small"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row>
-        <el-col :span="24">
-          <el-form-item label="事件内容">
-            <el-input :value="caseForm.description" size="small"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row v-show="this.caseImage.length>0">
-        <el-form-item label="事件图片">
-        <!-- 图片展示 -->
-        <div class="image-container">
-          <el-image v-for="img in caseImage" :key="img" :src="img" fit="fill" class="case-image" :preview-src-list="caseImage"/>
-        </div>
-        </el-form-item>
-      </el-row>
-      <!--<el-row>-->
-      <!--<el-col :span="24">-->
-      <!--<el-form-item label="备注信息">-->
-      <!--<el-input :value="caseForm.remarks" size="small"/>-->
-      <!--</el-form-item>-->
-      <!--</el-col>-->
-      <!--</el-row>-->
+      <el-collapse v-model="activeName" accordion>
+        <el-collapse-item name="1">
+          <template slot="title">
+            <span class="collapse-title">更多信息</span>
+          </template>
+          <el-row :gutter="20">
+            <el-col :span="6">
+              <el-form-item label="事件辖区">
+                <el-input :value="caseForm.areaName" size="small" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="典型案例">
+                <el-input
+                  :value="caseForm.isTypical === '1' ? '是' : '否'"
+                  size="small"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="要情">
+                <el-input
+                  :value="caseForm.isImportant === '1' ? '是' : '否'"
+                  size="small"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="当前事件状态">
+                <el-input :value="caseForm.stateName" size="small" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="当前处理方式">
+                <el-input :value="caseForm.caseStateName" size="small" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="需要回访">
+                <el-input
+                  :value="caseForm.isReturnVisit === '1' ? '是' : '否'"
+                  size="small"
+                />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row v-if="caseForm.sound" :gutter="20">
+            <el-col :span="12">
+              <el-form-item label="受理录音">
+                <el-input :value="caseForm.sound" size="small" />
+              </el-form-item>
+            </el-col>
+            <el-button type="text" @click="playSound(caseForm.sound)"
+              >播放录音</el-button
+            >
+          </el-row>
+          <el-row v-if="caseForm.satisfactionSound" :gutter="20">
+            <el-col :span="12">
+              <el-form-item label="回访录音">
+                <el-input :value="caseForm.satisfactionSound" size="small" />
+              </el-form-item>
+            </el-col>
+            <el-button
+              type="text"
+              @click="playSound(caseForm.satisfactionSound)"
+              >播放录音</el-button
+            >
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="事件标题">
+                <el-input :value="caseForm.title" size="small" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="事件内容">
+                <el-input :value="caseForm.description" size="small" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row v-show="this.caseImage.length > 0">
+            <el-form-item label="事件图片">
+              <!-- 图片展示 -->
+              <div class="image-container">
+                <el-image
+                  v-for="img in caseImage"
+                  :key="img"
+                  :src="img"
+                  fit="fill"
+                  class="case-image"
+                  :preview-src-list="caseImage"
+                />
+              </div>
+            </el-form-item>
+          </el-row>
+          <!--<el-row>-->
+          <!--<el-col :span="24">-->
+          <!--<el-form-item label="备注信息">-->
+          <!--<el-input :value="caseForm.remarks" size="small"/>-->
+          <!--</el-form-item>-->
+          <!--</el-col>-->
+          <!--</el-row>-->
+        </el-collapse-item>
+      </el-collapse>
     </el-form>
     <!--播放音频弹窗-->
     <el-dialog
@@ -140,90 +179,120 @@
       width="600px"
       append-to-body
       custom-class="sound-dialog"
-      @close="closeSound">
-      <audio-player ref="adplayer" :the-url="sound.url" :the-control-ist="sound.controlList"/>
+      @close="closeSound"
+    >
+      <audio-player
+        ref="adplayer"
+        :the-url="sound.url"
+        :the-control-ist="sound.controlList"
+      />
     </el-dialog>
   </div>
 </template>
 
 <script>
 // import { caseDetail } from '@/api/callCase'
-import { getSoundName } from '@/api/sound'
-import AudioPlayer from '@/components/AudioPlayer/AudioPlayer'
+import { getSoundName } from "@/api/sound";
+import AudioPlayer from "@/components/AudioPlayer/AudioPlayer";
 
 export default {
-  name: 'CaseFormRead',
+  name: "CaseFormRead",
   components: { AudioPlayer },
   props: {
     id: {
       type: String,
-      default: ''
+      default: "",
     }, // 事件id（主键id）
     caseForm: {
       type: Object,
       default() {
-        return {}
-      }
-    }
+        return {};
+      },
+    },
   },
   data() {
     return {
+      activeName: 1,
       sound: {
-        url: '',
-        controlList: 'noDownload noSpeed onlyOnePlaying'
+        url: "",
+        controlList: "noDownload noSpeed onlyOnePlaying",
       },
-      soundShow: false // 显示音频弹窗
-    }
+      soundShow: false, // 显示音频弹窗
+    };
   },
   computed: {
     address() {
-      const address_ori = [this.caseForm.areaName, this.caseForm.streetName, this.caseForm.communityName, this.caseForm.fieldintro]
-      const address = address_ori.filter(item => item && item.length > 0)
-      return address.join('-')
+      const address_ori = [
+        this.caseForm.areaName,
+        this.caseForm.streetName,
+        this.caseForm.communityName,
+        this.caseForm.fieldintro,
+      ];
+      const address = address_ori.filter((item) => item && item.length > 0);
+      return address.join("-");
     },
-    caseImage(){
-      if(this.caseForm.caseImage){
-        const base_url = process.env.BASE_API + '/static/'
-        const image_ori = this.caseForm.caseImage.split(';')
-        const imageList = image_ori.map(item=>base_url+ item)
-        return imageList
-      }else{
-        return []
+    caseImage() {
+      if (this.caseForm.caseImage) {
+        const base_url = process.env.BASE_API + "/static/";
+        const image_ori = this.caseForm.caseImage.split(";");
+        const imageList = image_ori.map((item) => base_url + item);
+        return imageList;
+      } else {
+        return [];
       }
-    }
+    },
   },
   methods: {
     // 播放录音
     playSound(sound) {
       if (sound) {
-        getSoundName(sound).then(res => {
-          const recordName = res.data
+        getSoundName(sound).then((res) => {
+          const recordName = res.data;
           if (recordName) {
-            this.sound.url = recordName
-            this.soundShow = true
+            this.sound.url = recordName;
+            this.soundShow = true;
           } else {
-            this.$message.warning('无录音')
+            this.$message.warning("无录音");
           }
-        })
+        });
       } else {
-        this.$message.warning('无录音')
+        this.$message.warning("无录音");
       }
     },
     // 关闭播放弹窗
     closeSound() {
-      this.$refs.adplayer.pausePlay()
-    }
-  }
-}
+      this.$refs.adplayer.pausePlay();
+    },
+  },
+};
 </script>
 <style lang="scss" scoped>
-  .image-container{
-    display: flex;
-    justify-content: flex-start;
-    .case-image{
-      width:100px;
-      height:100px;
-      margin-right: 10px;
-    }
+.image-container {
+  display: flex;
+  justify-content: flex-start;
+  .case-image {
+    width: 100px;
+    height: 100px;
+    margin-right: 10px;
   }
+}
+.collapse-title {
+  font-size: 14px;
+  color: #606266;
+  font-weight: 800;
+  position: absolute;
+  right: 80px;
+  margin-top: -85px;
+}
+/deep/.el-collapse-item__arrow {
+  margin-top: -85px;
+}
+/deep/.el-collapse {
+  border: 0;
+}
+/deep/.el-collapse-item__header {
+  justify-content: end;
+  border: 0;
+  height: 0;
+}
 </style>
diff --git a/src/views/caseManage/caseCommon/caseImgShow.vue b/src/views/caseManage/caseCommon/caseImgShow.vue
new file mode 100644
index 0000000..c6c911d
--- /dev/null
+++ b/src/views/caseManage/caseCommon/caseImgShow.vue
@@ -0,0 +1,42 @@
+<template>
+  <SwiperImg
+    v-if="imgs.length > 0"
+    style="width: 300px; height: 450px; overflow: hidden"
+    :gallery="imgs"
+  />
+  <el-image v-else>
+    <div slot="error" class="image-slot">
+      暂无图片
+    </div>
+  </el-image>
+</template>
+
+<script>
+import SwiperImg from "./SwiperImg.vue";
+export default {
+  components: {
+    SwiperImg,
+  },
+  props: {
+    imgs: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.el-image {
+  margin-top: 3px;
+  width: 300px;
+  height: 450px;
+  line-height: 450px;
+  overflow: hidden;
+  text-align: center;
+  background: #f5f7fa;
+  color: #909399;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/caseManage/caseCommon/caseProcessTable.vue b/src/views/caseManage/caseCommon/caseProcessTable.vue
new file mode 100644
index 0000000..4c54b7f
--- /dev/null
+++ b/src/views/caseManage/caseCommon/caseProcessTable.vue
@@ -0,0 +1,423 @@
+<template>
+  <div class="case-wrap">
+      {{showAll}}
+      {{listData}}
+    <div class="showAllDetail">
+      <el-switch
+        v-model="showAll"
+        active-color="#13ce66"
+        active-text="展开全部信息"
+      >
+      </el-switch>
+    </div>
+    <div class="moreDetail" v-show="!showAll">
+      <!-- 两条数据显示 -->
+      <!-- <div class="step-wrap" style="display:none">
+        <div class="before line">
+          <div class="icon"></div>
+          <div class="title">
+            {{ detailObj.end.processTitle }} &nbsp;&nbsp;&nbsp;&nbsp;
+            <span>{{ detailObj.end.time }}</span>
+          </div>
+          <div class="content">
+            <div class="left">
+              <p>发送人:{{ detailObj.end.sender }}</p>
+              <p>接收人:{{ detailObj.end.sender }}</p>
+              <p>处置详情:{{ detailObj.end.processTitle }}</p>
+            </div>
+            <div class="right">
+              <div class="imgs-wrap">
+                <el-image
+                  v-for="img in detailObj.end.imgs"
+                  :key="img"
+                  :src="img"
+                  class="zoom"
+                  fit="fill"
+                  :preview-src-list="caseImage(img)"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="after">
+          <div class="icon"></div>
+          <div class="title">
+            {{ detailObj.end.processTitle }} &nbsp;&nbsp;&nbsp;&nbsp;
+            <span>{{ detailObj.end.time }}</span>
+          </div>
+          <div class="content">
+            <div class="left">
+              <p>发送人:{{ detailObj.end.sender }}</p>
+              <p>接收人:{{ detailObj.end.sender }}</p>
+              <p>处置详情:{{ detailObj.end.processTitle }}</p>
+            </div>
+            <div class="right">
+              <div class="imgs-wrap">
+                <el-image
+                  v-for="img in detailObj.end.imgs"
+                  :key="img"
+                  :src="img"
+                  class="zoom"
+                  fit="fill"
+                  :preview-src-list="caseImage(img)"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div> -->
+        <div class="step-more-wrap">
+        <div class="detail-wrap" v-for="(item,index) in tempList" :Key="index">
+          <div class="leftLine" v-if="index != tempList.length-1"></div>
+          <div class="title">
+          <div v-if="item.nextId" class="done"></div>
+          <div v-else class="process"></div>
+            {{ item.processTitle }} &nbsp;&nbsp;&nbsp;&nbsp;
+            <span>{{ item.time }}</span>
+          </div>
+          <div class="content">
+            <div class="left">
+              <p>发送人:{{ item.sender }}</p>
+              <p>接收人:{{ item.sender }}</p>
+              <p>处置详情:{{item.processTitle }}</p>
+            </div>
+            <div class="right">
+              <div class="imgs-wrap">
+                <el-image
+                  v-for="img in item.imgs"
+                  :key="img"
+                  :src="img"
+                  class="zoom"
+                  fit="fill"
+                  :preview-src-list="caseImage(img)"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="moreDetail">
+      <div class="step-more-wrap" v-show="showAll">
+        <div class="detail-wrap" v-for="(item,index) in listData" :Key="index">
+          <div class="leftLine" v-if="index != listData.length-1"></div>
+          <div class="title">
+          <div v-if="item.nextId" class="done"></div>
+          <div v-else class="process"></div>
+            {{ item.processTitle }} &nbsp;&nbsp;&nbsp;&nbsp;
+            <span>{{ item.time }}</span>
+          </div>
+          <div class="content">
+            <div class="left">
+              <p>发送人:{{ item.sender }}</p>
+              <p>接收人:{{ item.sender }}</p>
+              <p :title="item.processTitle">处置详情:{{item.processTitle }}</p>
+            </div>
+            <div class="right">
+              <div class="imgs-wrap">
+                <el-image
+                  v-for="img in item.imgs"
+                  :key="img"
+                  :src="img"
+                  class="zoom"
+                  fit="fill"
+                  :preview-src-list="caseImage(img)"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    list: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      showAll: false,
+      photoVisible: false,
+      bigImgUrl: "",
+      detailObj: {
+        start: {},
+        end: {},
+      },
+      imgs: [
+        "https://t7.baidu.com/it/u=1742010762,3975931984&fm=193&f=GIF",
+        "https://t7.baidu.com/it/u=1302518827,2012573433&fm=193&f=GIF",
+        "https://t7.baidu.com/it/u=1216634532,1327384749&fm=193&f=GIF",
+      ],
+      listData: [], // 全部数据
+      tempList: [], // 首尾数据
+    };
+  },
+  watch:{
+    list(val){
+      // alert(val)
+      console.log(val)
+    }
+  },
+  created() {
+          // alert(this.list)
+    // this.listData = this.treeDataToCompressed(this.list).reverse();
+      // 处理之后的数据 获取首尾数据
+    this.listData = this.list;
+    this.tempList = [this.listData[0],this.listData.at(-1)];
+    this.listData = this.listData.map((item) => {
+      item.imgs = this.imgs;
+      return item; 
+    });
+  },
+  methods: {
+    showBigImage(e) {
+      //点击图片函数，点击后，把photoVisible设置成true
+      if (e != "") {
+        this.photoVisible = true;
+        this.bigImgUrl = e.currentTarget.src;
+      }
+    },
+    caseImage(img) {
+      return img ? [].concat(img) : [];
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.case-wrap {
+  width: 60vw;
+  padding-top: 20px;
+}
+.before::after {
+  content: "";
+  display: inline-block;
+  position: absolute;
+  top: 12px;
+  left: -31px;
+  width: 2px;
+  height: 90%;
+  border-left: 2px dashed #ccc;
+}
+.moreDetail {
+  font-size: 14px !important;
+  position: relative;
+  margin-top: 20px;
+}
+.step-wrap {
+  box-sizing: border-box;
+  height: 300px;
+  padding-left: 30px;
+}
+.step-wrap {
+  .before {
+    position: relative;
+    height: 50%;
+  }
+  .after {
+    position: relative;
+    height: 50%;
+  }
+  .content {
+    margin-top: 20px;
+    width: 95%;
+    height: 100px;
+    background: #f0f0f0;
+    padding: 20px 30px;
+    border-radius: 10px;
+    display: flex;
+
+    .left {
+      width: 420px;
+      p {
+        font-size: 14px !important;
+        padding: 0;
+        margin: 0;
+        margin-top: 2px;
+        line-height: 20px;
+      }
+    }
+    .right {
+      position: relative;
+      flex: 1;
+    }
+  }
+}
+.title {
+  font-weight: 800;
+  span {
+    color: #ccc;
+    font-weight: 400 !important;
+  }
+}
+.moreDetail .process {
+  z-index: 10;
+  content: "";
+  display: inline-block;
+  width: 25px;
+  height: 25px;
+  background: url("../../../assets/global_images/process.png") no-repeat;
+  position: absolute;
+  top: -8px;
+  left: -12px;
+  background-size: contain;
+}
+.moreDetail .done {
+  z-index: 10;
+  content: "";
+  display: inline-block;
+  width: 25px;
+  height: 25px;
+  background: url("../../../assets/global_images/done.png") no-repeat;
+  position: absolute;
+  bottom: -8px;
+  left: -12px;
+  background-size: contain;
+}
+.before .icon,.after .icon {
+  z-index: 10;
+  display: inline-block;
+  width: 25px;
+  height: 25px;
+  background: url("../../../assets/global_images/done.png") no-repeat;
+  position: absolute;
+  top: -3px;
+  left: -42px;
+  background-size: contain;
+}
+.imgs-wrap {
+  position: absolute;
+  left: -5px;
+  top: -10px;
+  width: 400px;
+  height: 80px;
+  overflow-y: auto;
+}
+.text-over {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.text-over-more {
+  overflow: hidden; // 溢出隐藏
+  text-overflow: ellipsis; // 溢出用省略号显示
+  display: -webkit-box; // 作为弹性伸缩盒子模型显示。
+  -webkit-box-orient: vertical; // 设置伸缩盒子的子元素排列方式：从上到下垂直排列
+  -webkit-line-clamp: 2; // 显示的行数
+}
+/deep/.zoom {
+  display: inline-block;
+  box-sizing: border-box;
+  width: 120px;
+  height: 70px;
+  margin-right: 10px;
+  margin-top: 5px;
+  cursor: pointer;
+}
+.leftLine{
+    position: absolute;
+    top: 18px;
+    left: -19px;
+    width: 2px;
+    height: 99%;
+    border-left: 2px dashed #ccc;
+}
+.moreDetail {
+  .step-more-wrap {
+    box-sizing: border-box;
+    padding-left: 30px;
+    height: 360px;
+    overflow-y: auto;
+    .detail-wrap {
+      margin-top: 3px;
+      margin-bottom: 20px;
+      position: relative;
+      .title{
+        position: relative;
+        .process{
+          z-index: 10 !important;
+          position: absolute;
+          top: -3px;
+          left: -30px;
+          width: 25px;
+          height: 25px;
+          background: url("../../../assets/global_images/process.png") no-repeat;
+          background-size: contain;
+        }
+        .done{
+          z-index: 10 !important;
+          position: absolute;
+          top: -3px;
+          left: -30px;
+          width: 25px;
+          height: 25px;
+          background: url("../../../assets/global_images/done.png") no-repeat;
+          background-size: contain;
+        }
+      }
+      p {
+        font-size: 14px !important;
+        padding: 0;
+        margin: 0;
+        margin-top: 2px;
+        line-height: 20px;
+        width: 90%;
+          overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+      }
+      .content {
+        margin-top: 20px;
+        width: 96%;
+        height: 100px;
+        background: #f0f0f0;
+        padding: 20px 30px;
+        border-radius: 10px;
+        display: flex;
+
+        .left {
+          width: 420px;
+          p {
+            font-size: 14px !important;
+            padding: 0;
+            margin: 0;
+            margin-top: 2px;
+            line-height: 20px;
+          }
+        }
+        .right {
+          position: relative;
+          flex: 1;
+        }
+      }
+    }
+  }
+}
+
+::-webkit-scrollbar {
+  /*滚动条整体样式*/
+  width: 6px; /*高宽分别对应横竖滚动条的尺寸*/
+  height: 8px;
+}
+::-webkit-scrollbar-thumb {
+  /*滚动条里面小方块*/
+  border-radius: 5px;
+  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  background: rgba(0, 0, 0, 0.1);
+}
+::-webkit-scrollbar-track {
+  /*滚动条里面轨道*/
+  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  border-radius: 5px;
+  background: rgba(0, 0, 0, 0.1);
+}
+
+</style>
\ No newline at end of file
diff --git a/src/views/caseManage/caseCommon/process.json b/src/views/caseManage/caseCommon/process.json
new file mode 100644
index 0000000..db58784
--- /dev/null
+++ b/src/views/caseManage/caseCommon/process.json
@@ -0,0 +1,251 @@
+{
+    "state": true,
+    "msg": "",
+    "data": [
+        {
+            "id": "1E03D7C7D3C84E838D1A4C6E8DFC4240",
+            "info": {
+                "id": "1E03D7C7D3C84E838D1A4C6E8DFC4240",
+                "businessId": "aa00ac6d759540d4942de3b00990bacc",
+                "processType": "15",
+                "processInstId": "36008397",
+                "processTaskId": null,
+                "processTaskName": null,
+                "processAssigneeId": "465546017",
+                "processAssigneeName": "呼叫中心系统",
+                "processNextTaskId": "36008446",
+                "processNextTaskName": "专项系统对接待分拨",
+                "processNextAssigneeId": "465546017",
+                "processNextAssigneeName": "呼叫中心系统",
+                "processStepTitle": "新建",
+                "approveMsg": null,
+                "processStepName": "提交",
+                "regulationCompleteTime": null,
+                "createTime": "2022-09-22 09:57:03",
+                "parentTitleId": null,
+                "fileId": null,
+                "parentInstanceId": null,
+                "applyWay": null,
+                "dataLv": null,
+                "processStepExtend": null,
+                "isAuto": null,
+                "processAssigneeDeptName": "专项系统对接",
+                "processNextAssigneeDeptName": "专项系统对接"
+            },
+            "parentTitleId": null,
+            "processStepTitle": "新建",
+            "children": [
+                {
+                    "id": "1AB4B8BD0E034AE08DFF0EAE1F7750DE",
+                    "info": {
+                        "id": "1AB4B8BD0E034AE08DFF0EAE1F7750DE",
+                        "businessId": "aa00ac6d759540d4942de3b00990bacc",
+                        "processType": "15",
+                        "processInstId": "36008397",
+                        "processTaskId": "36008446",
+                        "processTaskName": "专项系统对接待分拨",
+                        "processAssigneeId": "465546017",
+                        "processAssigneeName": "呼叫中心系统",
+                        "processNextTaskId": "36008473",
+                        "processNextTaskName": "蓉江新区待分拨",
+                        "processNextAssigneeId": "465546577",
+                        "processNextAssigneeName": "刘晓梅",
+                        "processStepTitle": "上报蓉江新区",
+                        "approveMsg": null,
+                        "processStepName": null,
+                        "regulationCompleteTime": null,
+                        "createTime": "2022-09-22 09:57:03",
+                        "parentTitleId": "1E03D7C7D3C84E838D1A4C6E8DFC4240",
+                        "fileId": null,
+                        "parentInstanceId": null,
+                        "applyWay": null,
+                        "dataLv": null,
+                        "processStepExtend": null,
+                        "isAuto": null,
+                        "processAssigneeDeptName": "专项系统对接",
+                        "processNextAssigneeDeptName": "蓉江新区"
+                    },
+                    "parentTitleId": "1E03D7C7D3C84E838D1A4C6E8DFC4240",
+                    "processStepTitle": "上报蓉江新区",
+                    "children": [
+                        {
+                            "id": "7F644436F8B04DAEBEB475214F64783E",
+                            "info": {
+                                "id": "7F644436F8B04DAEBEB475214F64783E",
+                                "businessId": "aa00ac6d759540d4942de3b00990bacc",
+                                "processType": "15",
+                                "processInstId": "36008397",
+                                "processTaskId": "36008473",
+                                "processTaskName": "蓉江新区待分拨",
+                                "processAssigneeId": "465546577",
+                                "processAssigneeName": "刘晓梅",
+                                "processNextTaskId": "36010141",
+                                "processNextTaskName": "蓉江新区待分拨",
+                                "processNextAssigneeId": "465546577",
+                                "processNextAssigneeName": "刘晓梅",
+                                "processStepTitle": "立案",
+                                "approveMsg": null,
+                                "processStepName": null,
+                                "regulationCompleteTime": null,
+                                "createTime": "2022-09-22 10:07:02",
+                                "parentTitleId": "1AB4B8BD0E034AE08DFF0EAE1F7750DE",
+                                "fileId": null,
+                                "parentInstanceId": null,
+                                "applyWay": null,
+                                "dataLv": null,
+                                "processStepExtend": null,
+                                "isAuto": null,
+                                "processAssigneeDeptName": "蓉江新区",
+                                "processNextAssigneeDeptName": "蓉江新区"
+                            },
+                            "parentTitleId": "1AB4B8BD0E034AE08DFF0EAE1F7750DE",
+                            "processStepTitle": "立案",
+                            "children": [
+                                {
+                                    "id": "156D83539A10444BBDE445E132E551C1",
+                                    "info": {
+                                        "id": "156D83539A10444BBDE445E132E551C1",
+                                        "businessId": "aa00ac6d759540d4942de3b00990bacc",
+                                        "processType": "15",
+                                        "processInstId": "36008397",
+                                        "processTaskId": "36010141",
+                                        "processTaskName": "蓉江新区待分拨",
+                                        "processAssigneeId": "465546577",
+                                        "processAssigneeName": "刘晓梅",
+                                        "processNextTaskId": "36010490",
+                                        "processNextTaskName": "高校园区管理处待分拨",
+                                        "processNextAssigneeId": "465546697",
+                                        "processNextAssigneeName": "张萍",
+                                        "processStepTitle": "蓉江新区分拨",
+                                        "approveMsg": null,
+                                        "processStepName": null,
+                                        "regulationCompleteTime": null,
+                                        "createTime": "2022-09-22 10:08:11",
+                                        "parentTitleId": "7F644436F8B04DAEBEB475214F64783E",
+                                        "fileId": "371daad0c65b871f532a49ccae8d34dc",
+                                        "parentInstanceId": null,
+                                        "applyWay": "1",
+                                        "dataLv": null,
+                                        "processStepExtend": null,
+                                        "isAuto": null,
+                                        "processAssigneeDeptName": "蓉江新区",
+                                        "processNextAssigneeDeptName": "高校园区管理处"
+                                    },
+                                    "parentTitleId": "7F644436F8B04DAEBEB475214F64783E",
+                                    "processStepTitle": "蓉江新区分拨",
+                                    "children": [
+                                        {
+                                            "id": "DCEB4053DCD040FC907CA8CBDAFB9BED",
+                                            "info": {
+                                                "id": "DCEB4053DCD040FC907CA8CBDAFB9BED",
+                                                "businessId": "aa00ac6d759540d4942de3b00990bacc",
+                                                "processType": "15",
+                                                "processInstId": "36008397",
+                                                "processTaskId": "36010490",
+                                                "processTaskName": "高校园区管理处待分拨",
+                                                "processAssigneeId": "465546697",
+                                                "processAssigneeName": "张萍",
+                                                "processNextTaskId": "36021140",
+                                                "processNextTaskName": "高校园区管理处待分拨",
+                                                "processNextAssigneeId": "465546697",
+                                                "processNextAssigneeName": "张萍",
+                                                "processStepTitle": "签收",
+                                                "approveMsg": null,
+                                                "processStepName": null,
+                                                "regulationCompleteTime": null,
+                                                "createTime": "2022-09-22 11:11:10",
+                                                "parentTitleId": "156D83539A10444BBDE445E132E551C1",
+                                                "fileId": null,
+                                                "parentInstanceId": null,
+                                                "applyWay": "1",
+                                                "dataLv": null,
+                                                "processStepExtend": null,
+                                                "isAuto": null,
+                                                "processAssigneeDeptName": "高校园区管理处",
+                                                "processNextAssigneeDeptName": "高校园区管理处"
+                                            },
+                                            "parentTitleId": "156D83539A10444BBDE445E132E551C1",
+                                            "processStepTitle": "签收",
+                                            "children": [
+                                                {
+                                                    "id": "0DDDAFE1B10C444B95E5D61E8483F1D4",
+                                                    "info": {
+                                                        "id": "0DDDAFE1B10C444B95E5D61E8483F1D4",
+                                                        "businessId": "aa00ac6d759540d4942de3b00990bacc",
+                                                        "processType": "15",
+                                                        "processInstId": "36008397",
+                                                        "processTaskId": "36021140",
+                                                        "processTaskName": "高校园区管理处待分拨",
+                                                        "processAssigneeId": "465546697",
+                                                        "processAssigneeName": "张萍",
+                                                        "processNextTaskId": "36021489",
+                                                        "processNextTaskName": "蓉江新区办理结果确认",
+                                                        "processNextAssigneeId": "465546577",
+                                                        "processNextAssigneeName": "刘晓梅",
+                                                        "processStepTitle": "高校园区管理处提交结果",
+                                                        "approveMsg": "已处理",
+                                                        "processStepName": null,
+                                                        "regulationCompleteTime": null,
+                                                        "createTime": "2022-09-22 11:11:38",
+                                                        "parentTitleId": "DCEB4053DCD040FC907CA8CBDAFB9BED",
+                                                        "fileId": "ec8a05e25dae5571154f17e998653339",
+                                                        "parentInstanceId": null,
+                                                        "applyWay": null,
+                                                        "dataLv": null,
+                                                        "processStepExtend": null,
+                                                        "isAuto": null,
+                                                        "processAssigneeDeptName": "高校园区管理处",
+                                                        "processNextAssigneeDeptName": "蓉江新区"
+                                                    },
+                                                    "parentTitleId": "DCEB4053DCD040FC907CA8CBDAFB9BED",
+                                                    "processStepTitle": "高校园区管理处提交结果",
+                                                    "children": [
+                                                        {
+                                                            "id": "ED0DDD8B224747B88F051E28F1A4AF39",
+                                                            "info": {
+                                                                "id": "ED0DDD8B224747B88F051E28F1A4AF39",
+                                                                "businessId": "aa00ac6d759540d4942de3b00990bacc",
+                                                                "processType": "15",
+                                                                "processInstId": "36008397",
+                                                                "processTaskId": "36021489",
+                                                                "processTaskName": "蓉江新区办理结果确认",
+                                                                "processAssigneeId": "465546577",
+                                                                "processAssigneeName": "刘晓梅",
+                                                                "processNextTaskId": null,
+                                                                "processNextTaskName": null,
+                                                                "processNextAssigneeId": null,
+                                                                "processNextAssigneeName": null,
+                                                                "processStepTitle": "结案",
+                                                                "approveMsg": null,
+                                                                "processStepName": "结束",
+                                                                "regulationCompleteTime": null,
+                                                                "createTime": "2022-09-26 09:03:08",
+                                                                "parentTitleId": "0DDDAFE1B10C444B95E5D61E8483F1D4",
+                                                                "fileId": null,
+                                                                "parentInstanceId": null,
+                                                                "applyWay": null,
+                                                                "dataLv": null,
+                                                                "processStepExtend": null,
+                                                                "isAuto": null,
+                                                                "processAssigneeDeptName": "蓉江新区",
+                                                                "processNextAssigneeDeptName": null
+                                                            },
+                                                            "parentTitleId": "0DDDAFE1B10C444B95E5D61E8483F1D4",
+                                                            "processStepTitle": "结案",
+                                                            "children": []
+                                                        }
+                                                    ]
+                                                }
+                                            ]
+                                        }
+                                    ]
+                                }
+                            ]
+                        }
+                    ]
+                }
+            ]
+        }
+    ],
+    "code": 200
+}
\ No newline at end of file

diff --git a/package.json b/package.json
index fb32aa2..c325e45 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
     "vue-amap": "^0.5.9",
     "vue-baidu-map": "^0.21.22",
     "vue-router": "3.0.1",
+    "vue-slide-mini": "^1.0.4",
     "vuex": "3.0.1",
     "wangeditor": "^3.1.1"
   },
diff --git a/src/api/callCase.js b/src/api/callCase.js
index cd61986..9da1fc7 100644
--- a/src/api/callCase.js
+++ b/src/api/callCase.js
@@ -126,3 +126,12 @@
     }
   })
 }
+
+// 社会治理事流转步骤接口
+export function eventStepList(data) {
+  return request({
+    url: '/callcenter/api/case/eventStepList',
+    method: 'post',
+    data
+  })
+}
diff --git a/src/assets/global_images/done.png b/src/assets/global_images/done.png
new file mode 100644
index 0000000..c9a2c5e
--- /dev/null
+++ b/src/assets/global_images/done.png
Binary files differ
diff --git a/src/assets/global_images/process.png b/src/assets/global_images/process.png
new file mode 100644
index 0000000..311fe3a
--- /dev/null
+++ b/src/assets/global_images/process.png
Binary files differ
diff --git a/src/components/NomalTable/index.vue b/src/components/NomalTable/index.vue
index 55a7378..8616987 100644
--- a/src/components/NomalTable/index.vue
+++ b/src/components/NomalTable/index.vue
@@ -55,7 +55,7 @@
         </el-col>
       </el-row>
       <!-- 表格正文-->
-      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="handleSelectionChange">
+      <el-table v-loading="listLoading" :data="data" :height="height" :size="size" class="table" row-class-name="small-row-class" border @selection-change="handleSelectionChange">
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns"/>
         <!--多选选中列-->
@@ -176,7 +176,10 @@
           refresh: false // 是否需要刷新按钮
         }
       }
-    }// 表格工具配置
+    },// 表格工具配置
+    height:{
+      type:String,
+    }
   },
   data() {
     return {
diff --git a/src/components/SelectTree/singleSelect.vue b/src/components/SelectTree/singleSelect.vue
index ba15b20..3336346 100644
--- a/src/components/SelectTree/singleSelect.vue
+++ b/src/components/SelectTree/singleSelect.vue
@@ -6,7 +6,8 @@
     trigger="click"
     class="select-tree scrollbar"
     @show="onShowPopover"
-    @hide="onHidePopover">
+    @hide="onHidePopover"
+  >
     <el-tree
       ref="tree"
       :style="`min-width: ${treeWidth}`"
@@ -14,265 +15,276 @@
       :props="props"
       :expand-on-click-node="false"
       :filter-node-method="filterNode"
-      :default-expand-all="false"
+      :default-expand-all="expandAll"
       class="innerbox"
       highlight-current
       accordion
-      @node-click="onClickNode"/>
+      @node-click="onClickNode"
+    />
     <el-input
       slot="reference"
       ref="input"
       v-model="labelModel"
       :style="`width: ${width}px`"
       :size="size"
-      :class="{ 'rotate': showStatus }"
+      :class="{ rotate: showStatus }"
       :placeholder="placeholder"
       :disabled="disabled"
       clearable
-      suffix-icon="el-icon-arrow-down"/>
+      suffix-icon="el-icon-arrow-down"
+    />
   </el-popover>
 </template>
 
 <script>
-
 export default {
-  name: 'SelectTree',
+  name: "SelectTree",
+
   // 设置绑定参数
   model: {
-    prop: 'value',
-    event: 'selected'
+    prop: "value",
+    event: "selected",
   },
   props: {
+    // 是否默认展开全部
+    expandAll: {
+      type: Boolean,
+      default: false,
+    },
     // 接收绑定参数
     value: {
       type: String,
-      default: ''
+      default: "",
     },
     // 输入框宽度
     width: {
       type: String,
-      default: ''
+      default: "",
     },
     size: {
       type: String,
-      default: ''
+      default: "",
     },
     // 输入框宽度
     disabled: {
       type: Boolean,
-      default: false
+      default: false,
     },
     // 选项数据
     options: {
       type: Array,
-      required: true
+      required: true,
     },
     // 输入框占位符
     placeholder: {
       type: String,
       required: false,
-      default: '请选择'
+      default: "请选择",
     },
     // 树节点配置选项
     props: {
       type: Object,
       required: false,
       default: () => ({
-        parent: 'parentId',
-        value: 'rowGuid',
-        label: 'areaName',
-        children: 'children'
-      })
-    }
+        parent: "parentId",
+        value: "rowGuid",
+        label: "areaName",
+        children: "children",
+      }),
+    },
   },
   data() {
     return {
       // 树状菜单显示状态
       showStatus: false,
       // 菜单宽度
-      treeWidth: 'auto',
+      treeWidth: "auto",
       // 输入框显示值
-      labelModel: '',
+      labelModel: "",
       // 实际请求传值
-      valueModel: ''
-    }
+      valueModel: "",
+    };
   },
   computed: {
     // 是否为树状结构数据
     dataType() {
-      const jsonStr = JSON.stringify(this.options)
-      return jsonStr.indexOf(this.props.children) !== -1
+      const jsonStr = JSON.stringify(this.options);
+      return jsonStr.indexOf(this.props.children) !== -1;
     },
     // 若非树状结构，则转化为树状结构数据
     data() {
       // return this.dataType ? this.options : this.switchTree()
-      return this.options
-    }
+      return this.options;
+    },
   },
   watch: {
     labelModel(val) {
-      console.log('labelModel change:' + val)
+      console.log("labelModel change:" + val);
       if (!val) {
-        if (val === '') {
-          this.valueModel = ''
-          this.onCloseTree()
-          this.$emit('selected', this.valueModel)
+        if (val === "") {
+          this.valueModel = "";
+          this.onCloseTree();
+          this.$emit("selected", this.valueModel);
         }
-        this.valueModel = ''
+        this.valueModel = "";
       }
-      this.$refs.tree.filter(val)
+      this.$refs.tree.filter(val);
     },
     value(val) {
-      this.labelModel = this.queryTree(this.data, val)
-    }
+      this.labelModel = this.queryTree(this.data, val);
+    },
   },
   created() {
     // 检测输入框原有值并显示对应 label
     if (this.value) {
-      this.labelModel = this.queryTree(this.data, this.value)
+      this.labelModel = this.queryTree(this.data, this.value);
     }
     // 获取输入框宽度同步至树状菜单宽度
     this.$nextTick(() => {
-      this.treeWidth = `${(this.width || this.$refs.input.$refs.input.clientWidth) - 24}px`
-    })
+      this.treeWidth = `${
+        (this.width || this.$refs.input.$refs.input.clientWidth) - 24
+      }px`;
+    });
   },
   methods: {
     // 单击节点
     onClickNode(node) {
-      this.labelModel = node[this.props.label]
-      this.valueModel = node[this.props.value]
-      this.onCloseTree()
+      this.labelModel = node[this.props.label];
+      this.valueModel = node[this.props.value];
+      this.onCloseTree();
     },
     // 偏平数组转化为树状层级结构
     switchTree() {
-      return this.cleanChildren(this.buildTree(this.options, '0'))
+      return this.cleanChildren(this.buildTree(this.options, "0"));
     },
     // 隐藏树状菜单
     onCloseTree() {
-      this.$refs.popover.showPopper = false
+      this.$refs.popover.showPopper = false;
     },
     // 显示时触发
     onShowPopover() {
-      this.showStatus = true
-      this.$refs.tree.filter(false)
+      this.showStatus = true;
+      this.$refs.tree.filter(false);
     },
     // 隐藏时触发
     onHidePopover() {
-      this.showStatus = false
-      console.log('onHidePopover:' + this.valueModel)
+      this.showStatus = false;
+      console.log("onHidePopover:" + this.valueModel);
       // if (this.valueModel !== '') {
       //   this.$emit('selected', this.valueModel)
       // }
-      this.$emit('selected', this.valueModel)
+      this.$emit("selected", this.valueModel);
     },
     // 树节点过滤方法
     filterNode(query, data) {
-      if (!query) return true
-      return data[this.props.label].indexOf(query) !== -1
+      if (!query) return true;
+      return data[this.props.label].indexOf(query) !== -1;
     },
     // 搜索树状数据中的 ID
     queryTree(tree, id) {
-      let stark = []
-      stark = stark.concat(tree)
+      let stark = [];
+      stark = stark.concat(tree);
       while (stark.length) {
-        const temp = stark.shift()
+        const temp = stark.shift();
         if (temp[this.props.children]) {
-          stark = stark.concat(temp[this.props.children])
+          stark = stark.concat(temp[this.props.children]);
         }
         if (temp[this.props.value] === id) {
-          return temp[this.props.label]
+          return temp[this.props.label];
         }
       }
-      return ''
+      return "";
     },
     // 将一维的扁平数组转换为多层级对象
-    buildTree(data, id = '0') {
+    buildTree(data, id = "0") {
       const fa = (parentId) => {
-        console.log('parentId:' + parentId)
-        const temp = []
+        console.log("parentId:" + parentId);
+        const temp = [];
         for (let i = 0; i < data.length; i++) {
-          const n = data[i]
+          const n = data[i];
           if (n[this.props.parent] === parentId) {
-            n.children = fa(n.code)
-            temp.push(n)
+            n.children = fa(n.code);
+            temp.push(n);
           }
         }
-        return temp
-      }
-      return fa(id)
+        return temp;
+      };
+      return fa(id);
     },
     // 清除空 children项
     cleanChildren(data) {
       const fa = (list) => {
         list.map((e) => {
           if (e.children.length) {
-            fa(e.children)
+            fa(e.children);
           } else {
-            delete e.children
+            delete e.children;
           }
-          return e
-        })
-        return list
-      }
-      return fa(data)
-    }
-  }
-}
+          return e;
+        });
+        return list;
+      };
+      return fa(data);
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-  .scrollbar {
-    overflow-y: scroll;
-    &::-webkit-scrollbar {
-      z-index: 11;
-      width: 6px;
-    }
-    &::-webkit-scrollbar-track,
-    &::-webkit-scrollbar-corner {
-      background: #fff;
-    }
-    &::-webkit-scrollbar-thumb {
-      // border-radius: 5px;
-      width: 6px;
-      background-color: #eee;
-      &:hover {
-        background-color: #ccc;
-      }
-    }
-    &::-webkit-scrollbar-track-piece {
-      background: #fff;
-      width: 6px;
+.scrollbar {
+  overflow-y: scroll;
+  &::-webkit-scrollbar {
+    z-index: 11;
+    width: 6px;
+  }
+  &::-webkit-scrollbar-track,
+  &::-webkit-scrollbar-corner {
+    background: #fff;
+  }
+  &::-webkit-scrollbar-thumb {
+    // border-radius: 5px;
+    width: 6px;
+    background-color: #eee;
+    &:hover {
+      background-color: #ccc;
     }
   }
-  .select-tree .el-tree {
-    max-height: 350px;
+  &::-webkit-scrollbar-track-piece {
+    background: #fff;
+    width: 6px;
   }
-  .select-tree .el-input.el-input--suffix {
-    cursor: pointer;
-  }
-  .select-tree .el-input.el-input--suffix.rotate .el-input__suffix {
-    transform: rotate(180deg);
-  }
+}
+.select-tree .el-tree {
+  max-height: 350px;
+}
+.select-tree .el-input.el-input--suffix {
+  cursor: pointer;
+}
+.select-tree .el-input.el-input--suffix.rotate .el-input__suffix {
+  transform: rotate(180deg);
+}
 
-  .innerbox::-webkit-scrollbar {/*滚动条整体样式*/
-    width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
-    height: 4px;
-  }
-  .innerbox::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
-    border-radius: 5px;
-    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
-    background: rgba(0,0,0,0.2);
-  }
-  .innerbox::-webkit-scrollbar-track { /*滚动条里面轨道*/
-    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
-    border-radius: 0;
-    background: rgba(0, 0, 0, 0.1);
-  }
+.innerbox::-webkit-scrollbar {
+  /*滚动条整体样式*/
+  width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
+  height: 4px;
+}
+.innerbox::-webkit-scrollbar-thumb {
+  /*滚动条里面小方块*/
+  border-radius: 5px;
+  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  background: rgba(0, 0, 0, 0.2);
+}
+.innerbox::-webkit-scrollbar-track {
+  /*滚动条里面轨道*/
+  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  border-radius: 0;
+  background: rgba(0, 0, 0, 0.1);
+}
 </style>
 <style lang="scss">
-  .el-popover{
-    max-height: 400px;
-    overflow: auto;
-  }
-
+.el-popover {
+  max-height: 400px;
+  overflow: auto;
+}
 </style>
diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss
index 65abe46..8236420 100644
--- a/src/styles/sidebar.scss
+++ b/src/styles/sidebar.scss
@@ -212,3 +212,8 @@
 .is-active>.light-line{
   background-color: $menuActiveText
 }
+
+.el-image-viewer__close{
+  color: #fff !important;
+  font-size: 52px !important;
+}
\ No newline at end of file
diff --git a/src/views/caseManage/caseCommon/SwiperImg.vue b/src/views/caseManage/caseCommon/SwiperImg.vue
new file mode 100644
index 0000000..4ff3fd2
--- /dev/null
+++ b/src/views/caseManage/caseCommon/SwiperImg.vue
@@ -0,0 +1,88 @@
+<template>
+	<div class="swiper" @mouseover="overHd" @mouseout="auto">
+		<div class="swiper-item" v-for="(item,ind) in gallery" :key="item" v-show="ind==index">
+			<img :src="item" width="100%"  style="width: 300px; height: 450px; overflow: hidden">
+		</div>
+		<div class="thumbs" v-if="gallery.length > 1">
+			<span class="thumb" :class="{'active' :item==index+1}" v-for="item in gallery.length" :key='item'
+				@click="index=item-1">{{item}}</span>
+		</div>
+	</div>
+</template>
+ 
+<script>
+	export default {
+		props: {
+			gallery: {
+				type: Array,
+				default () {
+					return []
+				}
+			}
+		},
+		data() {
+			return {
+				//默认显示 
+				index: 0,
+				stopID: null,
+			}
+		},
+		// 当组件挂载完毕 执行自动播放
+		created() {
+			this.auto();
+		},
+		beforeDestroy(){
+			this.overHd();
+		},
+		methods: {
+			//鼠标一开  auto自动执行
+			auto() {
+				this.stopID = setInterval(() => {
+					this.index++;
+					this.check();
+				}, 5000)
+			},
+			overHd() {
+				clearInterval(this.stopID);
+			},
+			//检查边界
+			check() {
+				if (this.index == this.gallery.length) {
+					this.index = 0;
+				}
+			}
+		}
+	}
+</script>
+ 
+<style scoped="scoped">
+	.swiper {
+		position: relative;
+	}
+ 
+	.swiper .thumbs {
+		position: absolute;
+		bottom: 10px;
+		width: 100%;
+		text-align: center;
+	}
+ 
+	.thumb {
+		width: 10px;
+		height: 10px;
+		display: inline-block;
+		border-radius: 15px;
+		text-indent: 9999em;
+		margin: 0 5px;
+		background-color: #fff;
+	}
+ 
+	.thumb:hover {
+		cursor: pointer;
+		background-color: #42b983;
+	}
+	.active {
+		background-color: #42b983;
+ 
+	}
+</style>
\ No newline at end of file
diff --git a/src/views/caseManage/caseCommon/caseFormProcess.vue b/src/views/caseManage/caseCommon/caseFormProcess.vue
index f8a9666..e6a6446 100644
--- a/src/views/caseManage/caseCommon/caseFormProcess.vue
+++ b/src/views/caseManage/caseCommon/caseFormProcess.vue
@@ -4,138 +4,183 @@
       <el-row :gutter="20">
         <el-col :span="6">
           <el-form-item label="事件编号">
-            <el-input :value="caseForm.caseId" size="small"/>
+            <el-input :value="caseForm.caseId" size="small" />
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="来电时间">
-            <el-input :value="caseForm.callTime" size="small"/>
+            <el-input :value="caseForm.callTime" size="small" />
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="联系人">
-            <el-input :value="caseForm.reporterName" size="small"/>
+            <el-input :value="caseForm.reporterName" size="small" />
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="联系电话">
-            <el-input :value="caseForm.reporterPhone" size="small"/>
+            <el-input :value="caseForm.reporterPhone" size="small" />
           </el-form-item>
         </el-col>
       </el-row>
       <el-row :gutter="20">
         <el-col :span="6">
           <el-form-item label="事件来源">
-            <el-input :value="caseForm.sourceName" size="small"/>
+            <el-input :value="caseForm.sourceName" size="small" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="事件类型">
+            <el-input :value="caseForm.sourceType" size="small" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="精细化平台事件编号">
+            <el-input :value="caseForm.sourceNumber" size="small" />
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="事件分类">
-            <el-input :value="caseForm.eorcName" size="small"/>
+            <el-input :value="caseForm.eorcName" size="small" />
             <!--<el-input :value="caseForm.eorcName + '/' + caseForm.caseTypeName" size="small"/>-->
             <!--<el-input :value="caseForm.eorcName + '/' + caseForm.caseTypeName + '/' + caseForm.caseDetailTypeName" size="small"/>-->
           </el-form-item>
         </el-col>
-        <el-col :span="6">
-          <el-form-item label="紧急程度">
-            <el-input :value="caseForm.caseLevelName" size="small"/>
-          </el-form-item>
-        </el-col>
+
         <el-col :span="6">
           <el-form-item label="限办日期">
-            <el-input :value="caseForm.limitedTime" size="small"/>
+            <el-input :value="caseForm.limitedTime" size="small" />
           </el-form-item>
         </el-col>
-      </el-row>
-      <el-row :gutter="20">
         <el-col :span="6">
           <el-form-item label="事件地址">
             <!--<el-input :value="caseForm.areaName + '-' + caseForm.streetName + '-' + caseForm.communityName + '-' + caseForm.fieldintro" size="small"/>-->
-            <el-input :value="address" size="small"/>
+            <el-input :value="address" size="small" />
           </el-form-item>
         </el-col>
         <el-col :span="6">
-          <el-form-item label="事件辖区">
-            <el-input :value="caseForm.areaName" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="典型案例">
-            <el-input :value="caseForm.isTypical === '1' ? '是' : '否'" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="要情">
-            <el-input :value="caseForm.isImportant === '1' ? '是' : '否'" size="small"/>
+          <!-- <el-form-item label="紧急程度"> -->
+          <el-form-item label="事件状态">
+            <el-input :value="caseForm.caseLevelName" size="small" />
           </el-form-item>
         </el-col>
       </el-row>
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item label="当前事件状态">
-            <el-input :value="caseForm.stateName" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="当前处理方式">
-            <el-input :value="caseForm.caseStateName" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="需要回访">
-            <el-input :value="caseForm.isReturnVisit === '1' ? '是' : '否'" size="small"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="受理录音">
-            <el-input :value="caseForm.sound" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-button type="text" @click="playSound(caseForm.sound)">播放录音</el-button>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="回访录音">
-            <el-input :value="caseForm.satisfactionSound" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-button type="text" @click="playSound(caseForm.satisfactionSound)">播放录音</el-button>
-        <el-popover
-          v-if="caseForm.caseState === 5"
-          placement="top"
-          width="180"
-          v-model="popoverVisible">
-          <div style="text-align:center; margin: 0">
-            <el-button size="mini"  @click="revisit('')">本地号码</el-button>
-            <el-button type="primary" size="mini"  @click="revisit('0')">外地号码</el-button>
-          </div>
-          <el-button slot="reference" type="text">回访拨号</el-button>
-        </el-popover>
-      </el-row>
-      <el-row>
-        <el-col :span="24">
-          <el-form-item label="事件标题">
-            <el-input :value="caseForm.title" size="small"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row>
-        <el-col :span="24">
-          <el-form-item label="事件内容">
-            <el-input :value="caseForm.description" size="small"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row v-show="this.caseImage.length>0">
-        <el-form-item label="事件图片">
-          <!-- 图片展示 -->
-          <div class="image-container">
-            <el-image v-for="img in caseImage" :key="img" :src="img" fit="fill" class="case-image" :preview-src-list="caseImage"/>
-          </div>
-        </el-form-item>
-      </el-row>
+      <el-collapse v-model="activeName" accordion>
+        <el-collapse-item name="1">
+          <template slot="title">
+            <span class="collapse-title">更多信息</span>
+          </template>
+          <el-row :gutter="20">
+            <el-col :span="6">
+              <el-form-item label="事件辖区">
+                <el-input :value="caseForm.areaName" size="small" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="典型案例">
+                <el-input
+                  :value="caseForm.isTypical === '1' ? '是' : '否'"
+                  size="small"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="要情">
+                <el-input
+                  :value="caseForm.isImportant === '1' ? '是' : '否'"
+                  size="small"
+                />
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <el-row :gutter="20">
+            <el-col :span="6">
+              <el-form-item label="当前事件状态">
+                <el-input :value="caseForm.stateName" size="small" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="当前处理方式">
+                <el-input :value="caseForm.caseStateName" size="small" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="需要回访">
+                <el-input
+                  :value="caseForm.isReturnVisit === '1' ? '是' : '否'"
+                  size="small"
+                />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <el-form-item label="受理录音">
+                <el-input :value="caseForm.sound" size="small" />
+              </el-form-item>
+            </el-col>
+            <el-button type="text" @click="playSound(caseForm.sound)"
+              >播放录音</el-button
+            >
+          </el-row>
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <el-form-item label="回访录音">
+                <el-input :value="caseForm.satisfactionSound" size="small" />
+              </el-form-item>
+            </el-col>
+            <el-button
+              type="text"
+              @click="playSound(caseForm.satisfactionSound)"
+              >播放录音</el-button
+            >
+            <el-popover
+              v-if="caseForm.caseState === 5"
+              placement="top"
+              width="180"
+              v-model="popoverVisible"
+            >
+              <div style="text-align: center; margin: 0">
+                <el-button size="mini" @click="revisit('')">本地号码</el-button>
+                <el-button type="primary" size="mini" @click="revisit('0')"
+                  >外地号码</el-button
+                >
+              </div>
+              <el-button slot="reference" type="text">回访拨号</el-button>
+            </el-popover>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="事件标题">
+                <el-input :value="caseForm.title" size="small" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="事件内容">
+                <el-input :value="caseForm.description" size="small" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row v-show="this.caseImage.length > 0">
+            <el-form-item label="事件图片">
+              <!-- 图片展示 -->
+              <div class="image-container">
+                <el-image
+                  v-for="img in caseImage"
+                  :key="img"
+                  :src="img"
+                  fit="fill"
+                  class="case-image"
+                  :preview-src-list="caseImage"
+                />
+              </div>
+            </el-form-item>
+          </el-row>
+        </el-collapse-item>
+      </el-collapse>
       <!--<el-row>-->
       <!--<el-col :span="24">-->
       <!--<el-form-item label="备注信息">-->
@@ -151,98 +196,128 @@
       width="600px"
       append-to-body
       custom-class="sound-dialog"
-      @close="closeSound">
-      <audio-player ref="adplayer" :the-url="sound.url" :the-control-ist="sound.controlList"/>
+      @close="closeSound"
+    >
+      <audio-player
+        ref="adplayer"
+        :the-url="sound.url"
+        :the-control-ist="sound.controlList"
+      />
     </el-dialog>
   </div>
 </template>
 
 <script>
 // import { caseDetail } from '@/api/callCase'
-import { getSoundName } from '@/api/sound'
-import AudioPlayer from '@/components/AudioPlayer/AudioPlayer'
+import { getSoundName } from "@/api/sound";
+import AudioPlayer from "@/components/AudioPlayer/AudioPlayer";
 
 export default {
-  name: 'CaseFormProcess',
+  name: "CaseFormProcess",
   components: { AudioPlayer },
   props: {
     id: {
       type: String,
-      default: ''
+      default: "",
     }, // 事件id（主键id）
     caseForm: {
       type: Object,
       default() {
-        return {}
-      }
-    }
+        return {};
+      },
+    },
   },
   data() {
     return {
+      activeName: 1,
       sound: {
-        url: '',
-        controlList: 'noDownload noSpeed onlyOnePlaying'
+        url: "",
+        controlList: "noDownload noSpeed onlyOnePlaying",
       },
       popoverVisible: false, // 选择本地外地呼叫的弹窗
-      soundShow: false // 显示音频弹窗
-    }
+      soundShow: false, // 显示音频弹窗
+    };
   },
   computed: {
     address() {
-      const address_ori = [this.caseForm.areaName, this.caseForm.streetName, this.caseForm.communityName, this.caseForm.fieldintro]
-      const address = address_ori.filter(item => item && item.length > 0)
-      return address.join('-')
+      const address_ori = [
+        this.caseForm.areaName,
+        this.caseForm.streetName,
+        this.caseForm.communityName,
+        this.caseForm.fieldintro,
+      ];
+      const address = address_ori.filter((item) => item && item.length > 0);
+      return address.join("-");
     },
-    caseImage(){
-      if(this.caseForm.caseImage){
-        const base_url = process.env.BASE_API + '/static/'
-        const image_ori = this.caseForm.caseImage.split(';')
-        const imageList = image_ori.map(item=>base_url+ item)
-        return imageList
-      }else{
-        return []
+    caseImage() {
+      if (this.caseForm.caseImage) {
+        const base_url = process.env.BASE_API + "/static/";
+        const image_ori = this.caseForm.caseImage.split(";");
+        const imageList = image_ori.map((item) => base_url + item);
+        return imageList;
+      } else {
+        return [];
       }
-    }
+    },
   },
   methods: {
     // 播放录音
     playSound(sound) {
       if (sound) {
-        getSoundName(sound).then(res => {
-          const recordName = res.data
+        getSoundName(sound).then((res) => {
+          const recordName = res.data;
           if (recordName) {
-            this.sound.url = recordName
-            this.soundShow = true
+            this.sound.url = recordName;
+            this.soundShow = true;
           } else {
-            this.$message.warning('无录音')
+            this.$message.warning("无录音");
           }
-        })
+        });
       } else {
-        this.$message.warning('无录音')
+        this.$message.warning("无录音");
       }
     },
     // 关闭播放弹窗
     closeSound() {
-      this.$refs.adplayer.pausePlay()
+      this.$refs.adplayer.pausePlay();
     },
     // 拨打回访电话
     revisit(middleString) {
       // middleString为空或0，分别表示本地或外地
-      const tel = '9' + middleString + this.caseForm.reporterPhone
-      this.$store.dispatch('dial', tel)
-      this.popoverVisible = false
-    }
-  }
-}
+      const tel = "9" + middleString + this.caseForm.reporterPhone;
+      this.$store.dispatch("dial", tel);
+      this.popoverVisible = false;
+    },
+  },
+};
 </script>
 <style lang="scss" scoped>
-  .image-container{
-    display: flex;
-    justify-content: flex-start;
-    .case-image{
-      width:100px;
-      height:100px;
-      margin-right: 10px;
-    }
+.image-container {
+  display: flex;
+  justify-content: flex-start;
+  .case-image {
+    width: 100px;
+    height: 100px;
+    margin-right: 10px;
   }
+}
+.collapse-title {
+  font-size: 14px;
+  color: #606266;
+  font-weight: 800;
+  position: absolute;
+  right: 80px;
+  margin-top: -85px;
+}
+/deep/.el-collapse-item__arrow{
+  margin-top: -85px;
+}
+/deep/.el-collapse {
+  border: 0;
+}
+/deep/.el-collapse-item__header {
+  justify-content: end;
+  border: 0;
+  height: 0;
+}
 </style>
diff --git a/src/views/caseManage/caseCommon/caseFormRead.vue b/src/views/caseManage/caseCommon/caseFormRead.vue
index 897023a..7fa39af 100644
--- a/src/views/caseManage/caseCommon/caseFormRead.vue
+++ b/src/views/caseManage/caseCommon/caseFormRead.vue
@@ -4,134 +4,173 @@
       <el-row :gutter="20">
         <el-col :span="6">
           <el-form-item label="事件编号">
-            <el-input :value="caseForm.caseId" size="small"/>
+            <el-input :value="caseForm.caseId" size="small" />
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="来电时间">
-            <el-input :value="caseForm.callTime" size="small"/>
+            <el-input :value="caseForm.callTime" size="small" />
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="联系人">
-            <el-input :value="caseForm.reporterName" size="small"/>
+            <el-input :value="caseForm.reporterName" size="small" />
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="联系电话">
-            <el-input :value="caseForm.reporterPhone" size="small"/>
+            <el-input :value="caseForm.reporterPhone" size="small" />
           </el-form-item>
         </el-col>
       </el-row>
       <el-row :gutter="20">
         <el-col :span="6">
           <el-form-item label="事件来源">
-            <el-input :value="caseForm.sourceName" size="small"/>
+            <el-input :value="caseForm.sourceName" size="small" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="事件类型">
+            <el-input :value="caseForm.sourceType" size="small" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="精细化平台事件编号">
+            <el-input :value="caseForm.sourceNumber" size="small" />
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="事件分类">
-            <el-input :value="caseForm.eorcName" size="small"/>
+            <el-input :value="caseForm.eorcName" size="small" />
             <!--<el-input :value="caseForm.eorcName + '/' + caseForm.caseTypeName" size="small"/>-->
             <!--<el-input :value="caseForm.eorcName + '/' + caseForm.caseTypeName + '/' + caseForm.caseDetailTypeName" size="small"/>-->
           </el-form-item>
         </el-col>
-        <el-col :span="6">
-          <el-form-item label="紧急程度">
-            <el-input :value="caseForm.caseLevelName" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="限办日期">
-            <el-input :value="caseForm.limitedTime" size="small"/>
-          </el-form-item>
-        </el-col>
       </el-row>
       <el-row :gutter="20">
         <el-col :span="6">
+          <el-form-item label="限办日期">
+            <el-input :value="caseForm.limitedTime" size="small" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
           <el-form-item label="事件地址">
             <!--<el-input :value="caseForm.areaName + '-' + caseForm.streetName + '-' + caseForm.communityName + '-' + caseForm.fieldintro" size="small"/>-->
-            <el-input :value="address" size="small"/>
+            <el-input :value="address" size="small" />
           </el-form-item>
         </el-col>
         <el-col :span="6">
-          <el-form-item label="事件辖区">
-            <el-input :value="caseForm.areaName" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="典型案例">
-            <el-input :value="caseForm.isTypical === '1' ? '是' : '否'" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="要情">
-            <el-input :value="caseForm.isImportant === '1' ? '是' : '否'" size="small"/>
+          <el-form-item label="事件状态">
+            <el-input :value="caseForm.caseLevelName" size="small" />
           </el-form-item>
         </el-col>
       </el-row>
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item label="当前事件状态">
-            <el-input :value="caseForm.stateName" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="当前处理方式">
-            <el-input :value="caseForm.caseStateName" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="需要回访">
-            <el-input :value="caseForm.isReturnVisit === '1' ? '是' : '否'" size="small"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row v-if="caseForm.sound" :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="受理录音">
-            <el-input :value="caseForm.sound" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-button type="text" @click="playSound(caseForm.sound)">播放录音</el-button>
-      </el-row>
-      <el-row v-if="caseForm.satisfactionSound" :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="回访录音">
-            <el-input :value="caseForm.satisfactionSound" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-button type="text" @click="playSound(caseForm.satisfactionSound)">播放录音</el-button>
-      </el-row>
-      <el-row>
-        <el-col :span="24">
-          <el-form-item label="事件标题">
-            <el-input :value="caseForm.title" size="small"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row>
-        <el-col :span="24">
-          <el-form-item label="事件内容">
-            <el-input :value="caseForm.description" size="small"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row v-show="this.caseImage.length>0">
-        <el-form-item label="事件图片">
-        <!-- 图片展示 -->
-        <div class="image-container">
-          <el-image v-for="img in caseImage" :key="img" :src="img" fit="fill" class="case-image" :preview-src-list="caseImage"/>
-        </div>
-        </el-form-item>
-      </el-row>
-      <!--<el-row>-->
-      <!--<el-col :span="24">-->
-      <!--<el-form-item label="备注信息">-->
-      <!--<el-input :value="caseForm.remarks" size="small"/>-->
-      <!--</el-form-item>-->
-      <!--</el-col>-->
-      <!--</el-row>-->
+      <el-collapse v-model="activeName" accordion>
+        <el-collapse-item name="1">
+          <template slot="title">
+            <span class="collapse-title">更多信息</span>
+          </template>
+          <el-row :gutter="20">
+            <el-col :span="6">
+              <el-form-item label="事件辖区">
+                <el-input :value="caseForm.areaName" size="small" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="典型案例">
+                <el-input
+                  :value="caseForm.isTypical === '1' ? '是' : '否'"
+                  size="small"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="要情">
+                <el-input
+                  :value="caseForm.isImportant === '1' ? '是' : '否'"
+                  size="small"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="当前事件状态">
+                <el-input :value="caseForm.stateName" size="small" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="当前处理方式">
+                <el-input :value="caseForm.caseStateName" size="small" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="需要回访">
+                <el-input
+                  :value="caseForm.isReturnVisit === '1' ? '是' : '否'"
+                  size="small"
+                />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row v-if="caseForm.sound" :gutter="20">
+            <el-col :span="12">
+              <el-form-item label="受理录音">
+                <el-input :value="caseForm.sound" size="small" />
+              </el-form-item>
+            </el-col>
+            <el-button type="text" @click="playSound(caseForm.sound)"
+              >播放录音</el-button
+            >
+          </el-row>
+          <el-row v-if="caseForm.satisfactionSound" :gutter="20">
+            <el-col :span="12">
+              <el-form-item label="回访录音">
+                <el-input :value="caseForm.satisfactionSound" size="small" />
+              </el-form-item>
+            </el-col>
+            <el-button
+              type="text"
+              @click="playSound(caseForm.satisfactionSound)"
+              >播放录音</el-button
+            >
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="事件标题">
+                <el-input :value="caseForm.title" size="small" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="事件内容">
+                <el-input :value="caseForm.description" size="small" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row v-show="this.caseImage.length > 0">
+            <el-form-item label="事件图片">
+              <!-- 图片展示 -->
+              <div class="image-container">
+                <el-image
+                  v-for="img in caseImage"
+                  :key="img"
+                  :src="img"
+                  fit="fill"
+                  class="case-image"
+                  :preview-src-list="caseImage"
+                />
+              </div>
+            </el-form-item>
+          </el-row>
+          <!--<el-row>-->
+          <!--<el-col :span="24">-->
+          <!--<el-form-item label="备注信息">-->
+          <!--<el-input :value="caseForm.remarks" size="small"/>-->
+          <!--</el-form-item>-->
+          <!--</el-col>-->
+          <!--</el-row>-->
+        </el-collapse-item>
+      </el-collapse>
     </el-form>
     <!--播放音频弹窗-->
     <el-dialog
@@ -140,90 +179,120 @@
       width="600px"
       append-to-body
       custom-class="sound-dialog"
-      @close="closeSound">
-      <audio-player ref="adplayer" :the-url="sound.url" :the-control-ist="sound.controlList"/>
+      @close="closeSound"
+    >
+      <audio-player
+        ref="adplayer"
+        :the-url="sound.url"
+        :the-control-ist="sound.controlList"
+      />
     </el-dialog>
   </div>
 </template>
 
 <script>
 // import { caseDetail } from '@/api/callCase'
-import { getSoundName } from '@/api/sound'
-import AudioPlayer from '@/components/AudioPlayer/AudioPlayer'
+import { getSoundName } from "@/api/sound";
+import AudioPlayer from "@/components/AudioPlayer/AudioPlayer";
 
 export default {
-  name: 'CaseFormRead',
+  name: "CaseFormRead",
   components: { AudioPlayer },
   props: {
     id: {
       type: String,
-      default: ''
+      default: "",
     }, // 事件id（主键id）
     caseForm: {
       type: Object,
       default() {
-        return {}
-      }
-    }
+        return {};
+      },
+    },
   },
   data() {
     return {
+      activeName: 1,
       sound: {
-        url: '',
-        controlList: 'noDownload noSpeed onlyOnePlaying'
+        url: "",
+        controlList: "noDownload noSpeed onlyOnePlaying",
       },
-      soundShow: false // 显示音频弹窗
-    }
+      soundShow: false, // 显示音频弹窗
+    };
   },
   computed: {
     address() {
-      const address_ori = [this.caseForm.areaName, this.caseForm.streetName, this.caseForm.communityName, this.caseForm.fieldintro]
-      const address = address_ori.filter(item => item && item.length > 0)
-      return address.join('-')
+      const address_ori = [
+        this.caseForm.areaName,
+        this.caseForm.streetName,
+        this.caseForm.communityName,
+        this.caseForm.fieldintro,
+      ];
+      const address = address_ori.filter((item) => item && item.length > 0);
+      return address.join("-");
     },
-    caseImage(){
-      if(this.caseForm.caseImage){
-        const base_url = process.env.BASE_API + '/static/'
-        const image_ori = this.caseForm.caseImage.split(';')
-        const imageList = image_ori.map(item=>base_url+ item)
-        return imageList
-      }else{
-        return []
+    caseImage() {
+      if (this.caseForm.caseImage) {
+        const base_url = process.env.BASE_API + "/static/";
+        const image_ori = this.caseForm.caseImage.split(";");
+        const imageList = image_ori.map((item) => base_url + item);
+        return imageList;
+      } else {
+        return [];
       }
-    }
+    },
   },
   methods: {
     // 播放录音
     playSound(sound) {
       if (sound) {
-        getSoundName(sound).then(res => {
-          const recordName = res.data
+        getSoundName(sound).then((res) => {
+          const recordName = res.data;
           if (recordName) {
-            this.sound.url = recordName
-            this.soundShow = true
+            this.sound.url = recordName;
+            this.soundShow = true;
           } else {
-            this.$message.warning('无录音')
+            this.$message.warning("无录音");
           }
-        })
+        });
       } else {
-        this.$message.warning('无录音')
+        this.$message.warning("无录音");
       }
     },
     // 关闭播放弹窗
     closeSound() {
-      this.$refs.adplayer.pausePlay()
-    }
-  }
-}
+      this.$refs.adplayer.pausePlay();
+    },
+  },
+};
 </script>
 <style lang="scss" scoped>
-  .image-container{
-    display: flex;
-    justify-content: flex-start;
-    .case-image{
-      width:100px;
-      height:100px;
-      margin-right: 10px;
-    }
+.image-container {
+  display: flex;
+  justify-content: flex-start;
+  .case-image {
+    width: 100px;
+    height: 100px;
+    margin-right: 10px;
   }
+}
+.collapse-title {
+  font-size: 14px;
+  color: #606266;
+  font-weight: 800;
+  position: absolute;
+  right: 80px;
+  margin-top: -85px;
+}
+/deep/.el-collapse-item__arrow {
+  margin-top: -85px;
+}
+/deep/.el-collapse {
+  border: 0;
+}
+/deep/.el-collapse-item__header {
+  justify-content: end;
+  border: 0;
+  height: 0;
+}
 </style>
diff --git a/src/views/caseManage/caseCommon/caseImgShow.vue b/src/views/caseManage/caseCommon/caseImgShow.vue
new file mode 100644
index 0000000..c6c911d
--- /dev/null
+++ b/src/views/caseManage/caseCommon/caseImgShow.vue
@@ -0,0 +1,42 @@
+<template>
+  <SwiperImg
+    v-if="imgs.length > 0"
+    style="width: 300px; height: 450px; overflow: hidden"
+    :gallery="imgs"
+  />
+  <el-image v-else>
+    <div slot="error" class="image-slot">
+      暂无图片
+    </div>
+  </el-image>
+</template>
+
+<script>
+import SwiperImg from "./SwiperImg.vue";
+export default {
+  components: {
+    SwiperImg,
+  },
+  props: {
+    imgs: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.el-image {
+  margin-top: 3px;
+  width: 300px;
+  height: 450px;
+  line-height: 450px;
+  overflow: hidden;
+  text-align: center;
+  background: #f5f7fa;
+  color: #909399;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/caseManage/caseCommon/caseProcessTable.vue b/src/views/caseManage/caseCommon/caseProcessTable.vue
new file mode 100644
index 0000000..4c54b7f
--- /dev/null
+++ b/src/views/caseManage/caseCommon/caseProcessTable.vue
@@ -0,0 +1,423 @@
+<template>
+  <div class="case-wrap">
+      {{showAll}}
+      {{listData}}
+    <div class="showAllDetail">
+      <el-switch
+        v-model="showAll"
+        active-color="#13ce66"
+        active-text="展开全部信息"
+      >
+      </el-switch>
+    </div>
+    <div class="moreDetail" v-show="!showAll">
+      <!-- 两条数据显示 -->
+      <!-- <div class="step-wrap" style="display:none">
+        <div class="before line">
+          <div class="icon"></div>
+          <div class="title">
+            {{ detailObj.end.processTitle }} &nbsp;&nbsp;&nbsp;&nbsp;
+            <span>{{ detailObj.end.time }}</span>
+          </div>
+          <div class="content">
+            <div class="left">
+              <p>发送人:{{ detailObj.end.sender }}</p>
+              <p>接收人:{{ detailObj.end.sender }}</p>
+              <p>处置详情:{{ detailObj.end.processTitle }}</p>
+            </div>
+            <div class="right">
+              <div class="imgs-wrap">
+                <el-image
+                  v-for="img in detailObj.end.imgs"
+                  :key="img"
+                  :src="img"
+                  class="zoom"
+                  fit="fill"
+                  :preview-src-list="caseImage(img)"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="after">
+          <div class="icon"></div>
+          <div class="title">
+            {{ detailObj.end.processTitle }} &nbsp;&nbsp;&nbsp;&nbsp;
+            <span>{{ detailObj.end.time }}</span>
+          </div>
+          <div class="content">
+            <div class="left">
+              <p>发送人:{{ detailObj.end.sender }}</p>
+              <p>接收人:{{ detailObj.end.sender }}</p>
+              <p>处置详情:{{ detailObj.end.processTitle }}</p>
+            </div>
+            <div class="right">
+              <div class="imgs-wrap">
+                <el-image
+                  v-for="img in detailObj.end.imgs"
+                  :key="img"
+                  :src="img"
+                  class="zoom"
+                  fit="fill"
+                  :preview-src-list="caseImage(img)"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div> -->
+        <div class="step-more-wrap">
+        <div class="detail-wrap" v-for="(item,index) in tempList" :Key="index">
+          <div class="leftLine" v-if="index != tempList.length-1"></div>
+          <div class="title">
+          <div v-if="item.nextId" class="done"></div>
+          <div v-else class="process"></div>
+            {{ item.processTitle }} &nbsp;&nbsp;&nbsp;&nbsp;
+            <span>{{ item.time }}</span>
+          </div>
+          <div class="content">
+            <div class="left">
+              <p>发送人:{{ item.sender }}</p>
+              <p>接收人:{{ item.sender }}</p>
+              <p>处置详情:{{item.processTitle }}</p>
+            </div>
+            <div class="right">
+              <div class="imgs-wrap">
+                <el-image
+                  v-for="img in item.imgs"
+                  :key="img"
+                  :src="img"
+                  class="zoom"
+                  fit="fill"
+                  :preview-src-list="caseImage(img)"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="moreDetail">
+      <div class="step-more-wrap" v-show="showAll">
+        <div class="detail-wrap" v-for="(item,index) in listData" :Key="index">
+          <div class="leftLine" v-if="index != listData.length-1"></div>
+          <div class="title">
+          <div v-if="item.nextId" class="done"></div>
+          <div v-else class="process"></div>
+            {{ item.processTitle }} &nbsp;&nbsp;&nbsp;&nbsp;
+            <span>{{ item.time }}</span>
+          </div>
+          <div class="content">
+            <div class="left">
+              <p>发送人:{{ item.sender }}</p>
+              <p>接收人:{{ item.sender }}</p>
+              <p :title="item.processTitle">处置详情:{{item.processTitle }}</p>
+            </div>
+            <div class="right">
+              <div class="imgs-wrap">
+                <el-image
+                  v-for="img in item.imgs"
+                  :key="img"
+                  :src="img"
+                  class="zoom"
+                  fit="fill"
+                  :preview-src-list="caseImage(img)"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    list: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      showAll: false,
+      photoVisible: false,
+      bigImgUrl: "",
+      detailObj: {
+        start: {},
+        end: {},
+      },
+      imgs: [
+        "https://t7.baidu.com/it/u=1742010762,3975931984&fm=193&f=GIF",
+        "https://t7.baidu.com/it/u=1302518827,2012573433&fm=193&f=GIF",
+        "https://t7.baidu.com/it/u=1216634532,1327384749&fm=193&f=GIF",
+      ],
+      listData: [], // 全部数据
+      tempList: [], // 首尾数据
+    };
+  },
+  watch:{
+    list(val){
+      // alert(val)
+      console.log(val)
+    }
+  },
+  created() {
+          // alert(this.list)
+    // this.listData = this.treeDataToCompressed(this.list).reverse();
+      // 处理之后的数据 获取首尾数据
+    this.listData = this.list;
+    this.tempList = [this.listData[0],this.listData.at(-1)];
+    this.listData = this.listData.map((item) => {
+      item.imgs = this.imgs;
+      return item; 
+    });
+  },
+  methods: {
+    showBigImage(e) {
+      //点击图片函数，点击后，把photoVisible设置成true
+      if (e != "") {
+        this.photoVisible = true;
+        this.bigImgUrl = e.currentTarget.src;
+      }
+    },
+    caseImage(img) {
+      return img ? [].concat(img) : [];
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.case-wrap {
+  width: 60vw;
+  padding-top: 20px;
+}
+.before::after {
+  content: "";
+  display: inline-block;
+  position: absolute;
+  top: 12px;
+  left: -31px;
+  width: 2px;
+  height: 90%;
+  border-left: 2px dashed #ccc;
+}
+.moreDetail {
+  font-size: 14px !important;
+  position: relative;
+  margin-top: 20px;
+}
+.step-wrap {
+  box-sizing: border-box;
+  height: 300px;
+  padding-left: 30px;
+}
+.step-wrap {
+  .before {
+    position: relative;
+    height: 50%;
+  }
+  .after {
+    position: relative;
+    height: 50%;
+  }
+  .content {
+    margin-top: 20px;
+    width: 95%;
+    height: 100px;
+    background: #f0f0f0;
+    padding: 20px 30px;
+    border-radius: 10px;
+    display: flex;
+
+    .left {
+      width: 420px;
+      p {
+        font-size: 14px !important;
+        padding: 0;
+        margin: 0;
+        margin-top: 2px;
+        line-height: 20px;
+      }
+    }
+    .right {
+      position: relative;
+      flex: 1;
+    }
+  }
+}
+.title {
+  font-weight: 800;
+  span {
+    color: #ccc;
+    font-weight: 400 !important;
+  }
+}
+.moreDetail .process {
+  z-index: 10;
+  content: "";
+  display: inline-block;
+  width: 25px;
+  height: 25px;
+  background: url("../../../assets/global_images/process.png") no-repeat;
+  position: absolute;
+  top: -8px;
+  left: -12px;
+  background-size: contain;
+}
+.moreDetail .done {
+  z-index: 10;
+  content: "";
+  display: inline-block;
+  width: 25px;
+  height: 25px;
+  background: url("../../../assets/global_images/done.png") no-repeat;
+  position: absolute;
+  bottom: -8px;
+  left: -12px;
+  background-size: contain;
+}
+.before .icon,.after .icon {
+  z-index: 10;
+  display: inline-block;
+  width: 25px;
+  height: 25px;
+  background: url("../../../assets/global_images/done.png") no-repeat;
+  position: absolute;
+  top: -3px;
+  left: -42px;
+  background-size: contain;
+}
+.imgs-wrap {
+  position: absolute;
+  left: -5px;
+  top: -10px;
+  width: 400px;
+  height: 80px;
+  overflow-y: auto;
+}
+.text-over {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.text-over-more {
+  overflow: hidden; // 溢出隐藏
+  text-overflow: ellipsis; // 溢出用省略号显示
+  display: -webkit-box; // 作为弹性伸缩盒子模型显示。
+  -webkit-box-orient: vertical; // 设置伸缩盒子的子元素排列方式：从上到下垂直排列
+  -webkit-line-clamp: 2; // 显示的行数
+}
+/deep/.zoom {
+  display: inline-block;
+  box-sizing: border-box;
+  width: 120px;
+  height: 70px;
+  margin-right: 10px;
+  margin-top: 5px;
+  cursor: pointer;
+}
+.leftLine{
+    position: absolute;
+    top: 18px;
+    left: -19px;
+    width: 2px;
+    height: 99%;
+    border-left: 2px dashed #ccc;
+}
+.moreDetail {
+  .step-more-wrap {
+    box-sizing: border-box;
+    padding-left: 30px;
+    height: 360px;
+    overflow-y: auto;
+    .detail-wrap {
+      margin-top: 3px;
+      margin-bottom: 20px;
+      position: relative;
+      .title{
+        position: relative;
+        .process{
+          z-index: 10 !important;
+          position: absolute;
+          top: -3px;
+          left: -30px;
+          width: 25px;
+          height: 25px;
+          background: url("../../../assets/global_images/process.png") no-repeat;
+          background-size: contain;
+        }
+        .done{
+          z-index: 10 !important;
+          position: absolute;
+          top: -3px;
+          left: -30px;
+          width: 25px;
+          height: 25px;
+          background: url("../../../assets/global_images/done.png") no-repeat;
+          background-size: contain;
+        }
+      }
+      p {
+        font-size: 14px !important;
+        padding: 0;
+        margin: 0;
+        margin-top: 2px;
+        line-height: 20px;
+        width: 90%;
+          overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+      }
+      .content {
+        margin-top: 20px;
+        width: 96%;
+        height: 100px;
+        background: #f0f0f0;
+        padding: 20px 30px;
+        border-radius: 10px;
+        display: flex;
+
+        .left {
+          width: 420px;
+          p {
+            font-size: 14px !important;
+            padding: 0;
+            margin: 0;
+            margin-top: 2px;
+            line-height: 20px;
+          }
+        }
+        .right {
+          position: relative;
+          flex: 1;
+        }
+      }
+    }
+  }
+}
+
+::-webkit-scrollbar {
+  /*滚动条整体样式*/
+  width: 6px; /*高宽分别对应横竖滚动条的尺寸*/
+  height: 8px;
+}
+::-webkit-scrollbar-thumb {
+  /*滚动条里面小方块*/
+  border-radius: 5px;
+  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  background: rgba(0, 0, 0, 0.1);
+}
+::-webkit-scrollbar-track {
+  /*滚动条里面轨道*/
+  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  border-radius: 5px;
+  background: rgba(0, 0, 0, 0.1);
+}
+
+</style>
\ No newline at end of file
diff --git a/src/views/caseManage/caseCommon/process.json b/src/views/caseManage/caseCommon/process.json
new file mode 100644
index 0000000..db58784
--- /dev/null
+++ b/src/views/caseManage/caseCommon/process.json
@@ -0,0 +1,251 @@
+{
+    "state": true,
+    "msg": "",
+    "data": [
+        {
+            "id": "1E03D7C7D3C84E838D1A4C6E8DFC4240",
+            "info": {
+                "id": "1E03D7C7D3C84E838D1A4C6E8DFC4240",
+                "businessId": "aa00ac6d759540d4942de3b00990bacc",
+                "processType": "15",
+                "processInstId": "36008397",
+                "processTaskId": null,
+                "processTaskName": null,
+                "processAssigneeId": "465546017",
+                "processAssigneeName": "呼叫中心系统",
+                "processNextTaskId": "36008446",
+                "processNextTaskName": "专项系统对接待分拨",
+                "processNextAssigneeId": "465546017",
+                "processNextAssigneeName": "呼叫中心系统",
+                "processStepTitle": "新建",
+                "approveMsg": null,
+                "processStepName": "提交",
+                "regulationCompleteTime": null,
+                "createTime": "2022-09-22 09:57:03",
+                "parentTitleId": null,
+                "fileId": null,
+                "parentInstanceId": null,
+                "applyWay": null,
+                "dataLv": null,
+                "processStepExtend": null,
+                "isAuto": null,
+                "processAssigneeDeptName": "专项系统对接",
+                "processNextAssigneeDeptName": "专项系统对接"
+            },
+            "parentTitleId": null,
+            "processStepTitle": "新建",
+            "children": [
+                {
+                    "id": "1AB4B8BD0E034AE08DFF0EAE1F7750DE",
+                    "info": {
+                        "id": "1AB4B8BD0E034AE08DFF0EAE1F7750DE",
+                        "businessId": "aa00ac6d759540d4942de3b00990bacc",
+                        "processType": "15",
+                        "processInstId": "36008397",
+                        "processTaskId": "36008446",
+                        "processTaskName": "专项系统对接待分拨",
+                        "processAssigneeId": "465546017",
+                        "processAssigneeName": "呼叫中心系统",
+                        "processNextTaskId": "36008473",
+                        "processNextTaskName": "蓉江新区待分拨",
+                        "processNextAssigneeId": "465546577",
+                        "processNextAssigneeName": "刘晓梅",
+                        "processStepTitle": "上报蓉江新区",
+                        "approveMsg": null,
+                        "processStepName": null,
+                        "regulationCompleteTime": null,
+                        "createTime": "2022-09-22 09:57:03",
+                        "parentTitleId": "1E03D7C7D3C84E838D1A4C6E8DFC4240",
+                        "fileId": null,
+                        "parentInstanceId": null,
+                        "applyWay": null,
+                        "dataLv": null,
+                        "processStepExtend": null,
+                        "isAuto": null,
+                        "processAssigneeDeptName": "专项系统对接",
+                        "processNextAssigneeDeptName": "蓉江新区"
+                    },
+                    "parentTitleId": "1E03D7C7D3C84E838D1A4C6E8DFC4240",
+                    "processStepTitle": "上报蓉江新区",
+                    "children": [
+                        {
+                            "id": "7F644436F8B04DAEBEB475214F64783E",
+                            "info": {
+                                "id": "7F644436F8B04DAEBEB475214F64783E",
+                                "businessId": "aa00ac6d759540d4942de3b00990bacc",
+                                "processType": "15",
+                                "processInstId": "36008397",
+                                "processTaskId": "36008473",
+                                "processTaskName": "蓉江新区待分拨",
+                                "processAssigneeId": "465546577",
+                                "processAssigneeName": "刘晓梅",
+                                "processNextTaskId": "36010141",
+                                "processNextTaskName": "蓉江新区待分拨",
+                                "processNextAssigneeId": "465546577",
+                                "processNextAssigneeName": "刘晓梅",
+                                "processStepTitle": "立案",
+                                "approveMsg": null,
+                                "processStepName": null,
+                                "regulationCompleteTime": null,
+                                "createTime": "2022-09-22 10:07:02",
+                                "parentTitleId": "1AB4B8BD0E034AE08DFF0EAE1F7750DE",
+                                "fileId": null,
+                                "parentInstanceId": null,
+                                "applyWay": null,
+                                "dataLv": null,
+                                "processStepExtend": null,
+                                "isAuto": null,
+                                "processAssigneeDeptName": "蓉江新区",
+                                "processNextAssigneeDeptName": "蓉江新区"
+                            },
+                            "parentTitleId": "1AB4B8BD0E034AE08DFF0EAE1F7750DE",
+                            "processStepTitle": "立案",
+                            "children": [
+                                {
+                                    "id": "156D83539A10444BBDE445E132E551C1",
+                                    "info": {
+                                        "id": "156D83539A10444BBDE445E132E551C1",
+                                        "businessId": "aa00ac6d759540d4942de3b00990bacc",
+                                        "processType": "15",
+                                        "processInstId": "36008397",
+                                        "processTaskId": "36010141",
+                                        "processTaskName": "蓉江新区待分拨",
+                                        "processAssigneeId": "465546577",
+                                        "processAssigneeName": "刘晓梅",
+                                        "processNextTaskId": "36010490",
+                                        "processNextTaskName": "高校园区管理处待分拨",
+                                        "processNextAssigneeId": "465546697",
+                                        "processNextAssigneeName": "张萍",
+                                        "processStepTitle": "蓉江新区分拨",
+                                        "approveMsg": null,
+                                        "processStepName": null,
+                                        "regulationCompleteTime": null,
+                                        "createTime": "2022-09-22 10:08:11",
+                                        "parentTitleId": "7F644436F8B04DAEBEB475214F64783E",
+                                        "fileId": "371daad0c65b871f532a49ccae8d34dc",
+                                        "parentInstanceId": null,
+                                        "applyWay": "1",
+                                        "dataLv": null,
+                                        "processStepExtend": null,
+                                        "isAuto": null,
+                                        "processAssigneeDeptName": "蓉江新区",
+                                        "processNextAssigneeDeptName": "高校园区管理处"
+                                    },
+                                    "parentTitleId": "7F644436F8B04DAEBEB475214F64783E",
+                                    "processStepTitle": "蓉江新区分拨",
+                                    "children": [
+                                        {
+                                            "id": "DCEB4053DCD040FC907CA8CBDAFB9BED",
+                                            "info": {
+                                                "id": "DCEB4053DCD040FC907CA8CBDAFB9BED",
+                                                "businessId": "aa00ac6d759540d4942de3b00990bacc",
+                                                "processType": "15",
+                                                "processInstId": "36008397",
+                                                "processTaskId": "36010490",
+                                                "processTaskName": "高校园区管理处待分拨",
+                                                "processAssigneeId": "465546697",
+                                                "processAssigneeName": "张萍",
+                                                "processNextTaskId": "36021140",
+                                                "processNextTaskName": "高校园区管理处待分拨",
+                                                "processNextAssigneeId": "465546697",
+                                                "processNextAssigneeName": "张萍",
+                                                "processStepTitle": "签收",
+                                                "approveMsg": null,
+                                                "processStepName": null,
+                                                "regulationCompleteTime": null,
+                                                "createTime": "2022-09-22 11:11:10",
+                                                "parentTitleId": "156D83539A10444BBDE445E132E551C1",
+                                                "fileId": null,
+                                                "parentInstanceId": null,
+                                                "applyWay": "1",
+                                                "dataLv": null,
+                                                "processStepExtend": null,
+                                                "isAuto": null,
+                                                "processAssigneeDeptName": "高校园区管理处",
+                                                "processNextAssigneeDeptName": "高校园区管理处"
+                                            },
+                                            "parentTitleId": "156D83539A10444BBDE445E132E551C1",
+                                            "processStepTitle": "签收",
+                                            "children": [
+                                                {
+                                                    "id": "0DDDAFE1B10C444B95E5D61E8483F1D4",
+                                                    "info": {
+                                                        "id": "0DDDAFE1B10C444B95E5D61E8483F1D4",
+                                                        "businessId": "aa00ac6d759540d4942de3b00990bacc",
+                                                        "processType": "15",
+                                                        "processInstId": "36008397",
+                                                        "processTaskId": "36021140",
+                                                        "processTaskName": "高校园区管理处待分拨",
+                                                        "processAssigneeId": "465546697",
+                                                        "processAssigneeName": "张萍",
+                                                        "processNextTaskId": "36021489",
+                                                        "processNextTaskName": "蓉江新区办理结果确认",
+                                                        "processNextAssigneeId": "465546577",
+                                                        "processNextAssigneeName": "刘晓梅",
+                                                        "processStepTitle": "高校园区管理处提交结果",
+                                                        "approveMsg": "已处理",
+                                                        "processStepName": null,
+                                                        "regulationCompleteTime": null,
+                                                        "createTime": "2022-09-22 11:11:38",
+                                                        "parentTitleId": "DCEB4053DCD040FC907CA8CBDAFB9BED",
+                                                        "fileId": "ec8a05e25dae5571154f17e998653339",
+                                                        "parentInstanceId": null,
+                                                        "applyWay": null,
+                                                        "dataLv": null,
+                                                        "processStepExtend": null,
+                                                        "isAuto": null,
+                                                        "processAssigneeDeptName": "高校园区管理处",
+                                                        "processNextAssigneeDeptName": "蓉江新区"
+                                                    },
+                                                    "parentTitleId": "DCEB4053DCD040FC907CA8CBDAFB9BED",
+                                                    "processStepTitle": "高校园区管理处提交结果",
+                                                    "children": [
+                                                        {
+                                                            "id": "ED0DDD8B224747B88F051E28F1A4AF39",
+                                                            "info": {
+                                                                "id": "ED0DDD8B224747B88F051E28F1A4AF39",
+                                                                "businessId": "aa00ac6d759540d4942de3b00990bacc",
+                                                                "processType": "15",
+                                                                "processInstId": "36008397",
+                                                                "processTaskId": "36021489",
+                                                                "processTaskName": "蓉江新区办理结果确认",
+                                                                "processAssigneeId": "465546577",
+                                                                "processAssigneeName": "刘晓梅",
+                                                                "processNextTaskId": null,
+                                                                "processNextTaskName": null,
+                                                                "processNextAssigneeId": null,
+                                                                "processNextAssigneeName": null,
+                                                                "processStepTitle": "结案",
+                                                                "approveMsg": null,
+                                                                "processStepName": "结束",
+                                                                "regulationCompleteTime": null,
+                                                                "createTime": "2022-09-26 09:03:08",
+                                                                "parentTitleId": "0DDDAFE1B10C444B95E5D61E8483F1D4",
+                                                                "fileId": null,
+                                                                "parentInstanceId": null,
+                                                                "applyWay": null,
+                                                                "dataLv": null,
+                                                                "processStepExtend": null,
+                                                                "isAuto": null,
+                                                                "processAssigneeDeptName": "蓉江新区",
+                                                                "processNextAssigneeDeptName": null
+                                                            },
+                                                            "parentTitleId": "0DDDAFE1B10C444B95E5D61E8483F1D4",
+                                                            "processStepTitle": "结案",
+                                                            "children": []
+                                                        }
+                                                    ]
+                                                }
+                                            ]
+                                        }
+                                    ]
+                                }
+                            ]
+                        }
+                    ]
+                }
+            ]
+        }
+    ],
+    "code": 200
+}
\ No newline at end of file
diff --git a/src/views/caseManage/caseCommon/process2.json b/src/views/caseManage/caseCommon/process2.json
new file mode 100644
index 0000000..53506ad
--- /dev/null
+++ b/src/views/caseManage/caseCommon/process2.json
@@ -0,0 +1,23 @@
+{
+    "code": 200,
+    "msg": "操作成功",
+    "success": true,
+    "data": {
+        "eventId": "866691836176740352",
+        "appCode": "A001",
+        "desc": "好吃多",
+        "status": 1,
+        "replyDatas": [
+            {
+                "id": "21345234523",
+                "time": "2021-07-19 14:42:34",
+                "name": "张三",
+                "content": "大师傅处置完成",
+                "attachments": "http://ztuploadfile.oss-cn-beijing.aliyuncs.com/%E8%BD%A6%E8%BE%86.jpeg?Expires=1934519183&OSSAccessKeyId=LTAI4G3j5y61aAVjgUB2sWXv&Signature=Ws%2BXAnQw6BPs8r3R7atb3MjzCFY%3D",
+                "status": "11",
+                "statusDesc": "成功",
+                "businessStatus": "success"
+            }
+        ]
+    }
+}
\ No newline at end of file

diff --git a/package.json b/package.json
index fb32aa2..c325e45 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
     "vue-amap": "^0.5.9",
     "vue-baidu-map": "^0.21.22",
     "vue-router": "3.0.1",
+    "vue-slide-mini": "^1.0.4",
     "vuex": "3.0.1",
     "wangeditor": "^3.1.1"
   },
diff --git a/src/api/callCase.js b/src/api/callCase.js
index cd61986..9da1fc7 100644
--- a/src/api/callCase.js
+++ b/src/api/callCase.js
@@ -126,3 +126,12 @@
     }
   })
 }
+
+// 社会治理事流转步骤接口
+export function eventStepList(data) {
+  return request({
+    url: '/callcenter/api/case/eventStepList',
+    method: 'post',
+    data
+  })
+}
diff --git a/src/assets/global_images/done.png b/src/assets/global_images/done.png
new file mode 100644
index 0000000..c9a2c5e
--- /dev/null
+++ b/src/assets/global_images/done.png
Binary files differ
diff --git a/src/assets/global_images/process.png b/src/assets/global_images/process.png
new file mode 100644
index 0000000..311fe3a
--- /dev/null
+++ b/src/assets/global_images/process.png
Binary files differ
diff --git a/src/components/NomalTable/index.vue b/src/components/NomalTable/index.vue
index 55a7378..8616987 100644
--- a/src/components/NomalTable/index.vue
+++ b/src/components/NomalTable/index.vue
@@ -55,7 +55,7 @@
         </el-col>
       </el-row>
       <!-- 表格正文-->
-      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="handleSelectionChange">
+      <el-table v-loading="listLoading" :data="data" :height="height" :size="size" class="table" row-class-name="small-row-class" border @selection-change="handleSelectionChange">
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns"/>
         <!--多选选中列-->
@@ -176,7 +176,10 @@
           refresh: false // 是否需要刷新按钮
         }
       }
-    }// 表格工具配置
+    },// 表格工具配置
+    height:{
+      type:String,
+    }
   },
   data() {
     return {
diff --git a/src/components/SelectTree/singleSelect.vue b/src/components/SelectTree/singleSelect.vue
index ba15b20..3336346 100644
--- a/src/components/SelectTree/singleSelect.vue
+++ b/src/components/SelectTree/singleSelect.vue
@@ -6,7 +6,8 @@
     trigger="click"
     class="select-tree scrollbar"
     @show="onShowPopover"
-    @hide="onHidePopover">
+    @hide="onHidePopover"
+  >
     <el-tree
       ref="tree"
       :style="`min-width: ${treeWidth}`"
@@ -14,265 +15,276 @@
       :props="props"
       :expand-on-click-node="false"
       :filter-node-method="filterNode"
-      :default-expand-all="false"
+      :default-expand-all="expandAll"
       class="innerbox"
       highlight-current
       accordion
-      @node-click="onClickNode"/>
+      @node-click="onClickNode"
+    />
     <el-input
       slot="reference"
       ref="input"
       v-model="labelModel"
       :style="`width: ${width}px`"
       :size="size"
-      :class="{ 'rotate': showStatus }"
+      :class="{ rotate: showStatus }"
       :placeholder="placeholder"
       :disabled="disabled"
       clearable
-      suffix-icon="el-icon-arrow-down"/>
+      suffix-icon="el-icon-arrow-down"
+    />
   </el-popover>
 </template>
 
 <script>
-
 export default {
-  name: 'SelectTree',
+  name: "SelectTree",
+
   // 设置绑定参数
   model: {
-    prop: 'value',
-    event: 'selected'
+    prop: "value",
+    event: "selected",
   },
   props: {
+    // 是否默认展开全部
+    expandAll: {
+      type: Boolean,
+      default: false,
+    },
     // 接收绑定参数
     value: {
       type: String,
-      default: ''
+      default: "",
     },
     // 输入框宽度
     width: {
       type: String,
-      default: ''
+      default: "",
     },
     size: {
       type: String,
-      default: ''
+      default: "",
     },
     // 输入框宽度
     disabled: {
       type: Boolean,
-      default: false
+      default: false,
     },
     // 选项数据
     options: {
       type: Array,
-      required: true
+      required: true,
     },
     // 输入框占位符
     placeholder: {
       type: String,
       required: false,
-      default: '请选择'
+      default: "请选择",
     },
     // 树节点配置选项
     props: {
       type: Object,
       required: false,
       default: () => ({
-        parent: 'parentId',
-        value: 'rowGuid',
-        label: 'areaName',
-        children: 'children'
-      })
-    }
+        parent: "parentId",
+        value: "rowGuid",
+        label: "areaName",
+        children: "children",
+      }),
+    },
   },
   data() {
     return {
       // 树状菜单显示状态
       showStatus: false,
       // 菜单宽度
-      treeWidth: 'auto',
+      treeWidth: "auto",
       // 输入框显示值
-      labelModel: '',
+      labelModel: "",
       // 实际请求传值
-      valueModel: ''
-    }
+      valueModel: "",
+    };
   },
   computed: {
     // 是否为树状结构数据
     dataType() {
-      const jsonStr = JSON.stringify(this.options)
-      return jsonStr.indexOf(this.props.children) !== -1
+      const jsonStr = JSON.stringify(this.options);
+      return jsonStr.indexOf(this.props.children) !== -1;
     },
     // 若非树状结构，则转化为树状结构数据
     data() {
       // return this.dataType ? this.options : this.switchTree()
-      return this.options
-    }
+      return this.options;
+    },
   },
   watch: {
     labelModel(val) {
-      console.log('labelModel change:' + val)
+      console.log("labelModel change:" + val);
       if (!val) {
-        if (val === '') {
-          this.valueModel = ''
-          this.onCloseTree()
-          this.$emit('selected', this.valueModel)
+        if (val === "") {
+          this.valueModel = "";
+          this.onCloseTree();
+          this.$emit("selected", this.valueModel);
         }
-        this.valueModel = ''
+        this.valueModel = "";
       }
-      this.$refs.tree.filter(val)
+      this.$refs.tree.filter(val);
     },
     value(val) {
-      this.labelModel = this.queryTree(this.data, val)
-    }
+      this.labelModel = this.queryTree(this.data, val);
+    },
   },
   created() {
     // 检测输入框原有值并显示对应 label
     if (this.value) {
-      this.labelModel = this.queryTree(this.data, this.value)
+      this.labelModel = this.queryTree(this.data, this.value);
     }
     // 获取输入框宽度同步至树状菜单宽度
     this.$nextTick(() => {
-      this.treeWidth = `${(this.width || this.$refs.input.$refs.input.clientWidth) - 24}px`
-    })
+      this.treeWidth = `${
+        (this.width || this.$refs.input.$refs.input.clientWidth) - 24
+      }px`;
+    });
   },
   methods: {
     // 单击节点
     onClickNode(node) {
-      this.labelModel = node[this.props.label]
-      this.valueModel = node[this.props.value]
-      this.onCloseTree()
+      this.labelModel = node[this.props.label];
+      this.valueModel = node[this.props.value];
+      this.onCloseTree();
     },
     // 偏平数组转化为树状层级结构
     switchTree() {
-      return this.cleanChildren(this.buildTree(this.options, '0'))
+      return this.cleanChildren(this.buildTree(this.options, "0"));
     },
     // 隐藏树状菜单
     onCloseTree() {
-      this.$refs.popover.showPopper = false
+      this.$refs.popover.showPopper = false;
     },
     // 显示时触发
     onShowPopover() {
-      this.showStatus = true
-      this.$refs.tree.filter(false)
+      this.showStatus = true;
+      this.$refs.tree.filter(false);
     },
     // 隐藏时触发
     onHidePopover() {
-      this.showStatus = false
-      console.log('onHidePopover:' + this.valueModel)
+      this.showStatus = false;
+      console.log("onHidePopover:" + this.valueModel);
       // if (this.valueModel !== '') {
       //   this.$emit('selected', this.valueModel)
       // }
-      this.$emit('selected', this.valueModel)
+      this.$emit("selected", this.valueModel);
     },
     // 树节点过滤方法
     filterNode(query, data) {
-      if (!query) return true
-      return data[this.props.label].indexOf(query) !== -1
+      if (!query) return true;
+      return data[this.props.label].indexOf(query) !== -1;
     },
     // 搜索树状数据中的 ID
     queryTree(tree, id) {
-      let stark = []
-      stark = stark.concat(tree)
+      let stark = [];
+      stark = stark.concat(tree);
       while (stark.length) {
-        const temp = stark.shift()
+        const temp = stark.shift();
         if (temp[this.props.children]) {
-          stark = stark.concat(temp[this.props.children])
+          stark = stark.concat(temp[this.props.children]);
         }
         if (temp[this.props.value] === id) {
-          return temp[this.props.label]
+          return temp[this.props.label];
         }
       }
-      return ''
+      return "";
     },
     // 将一维的扁平数组转换为多层级对象
-    buildTree(data, id = '0') {
+    buildTree(data, id = "0") {
       const fa = (parentId) => {
-        console.log('parentId:' + parentId)
-        const temp = []
+        console.log("parentId:" + parentId);
+        const temp = [];
         for (let i = 0; i < data.length; i++) {
-          const n = data[i]
+          const n = data[i];
           if (n[this.props.parent] === parentId) {
-            n.children = fa(n.code)
-            temp.push(n)
+            n.children = fa(n.code);
+            temp.push(n);
           }
         }
-        return temp
-      }
-      return fa(id)
+        return temp;
+      };
+      return fa(id);
     },
     // 清除空 children项
     cleanChildren(data) {
       const fa = (list) => {
         list.map((e) => {
           if (e.children.length) {
-            fa(e.children)
+            fa(e.children);
           } else {
-            delete e.children
+            delete e.children;
           }
-          return e
-        })
-        return list
-      }
-      return fa(data)
-    }
-  }
-}
+          return e;
+        });
+        return list;
+      };
+      return fa(data);
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-  .scrollbar {
-    overflow-y: scroll;
-    &::-webkit-scrollbar {
-      z-index: 11;
-      width: 6px;
-    }
-    &::-webkit-scrollbar-track,
-    &::-webkit-scrollbar-corner {
-      background: #fff;
-    }
-    &::-webkit-scrollbar-thumb {
-      // border-radius: 5px;
-      width: 6px;
-      background-color: #eee;
-      &:hover {
-        background-color: #ccc;
-      }
-    }
-    &::-webkit-scrollbar-track-piece {
-      background: #fff;
-      width: 6px;
+.scrollbar {
+  overflow-y: scroll;
+  &::-webkit-scrollbar {
+    z-index: 11;
+    width: 6px;
+  }
+  &::-webkit-scrollbar-track,
+  &::-webkit-scrollbar-corner {
+    background: #fff;
+  }
+  &::-webkit-scrollbar-thumb {
+    // border-radius: 5px;
+    width: 6px;
+    background-color: #eee;
+    &:hover {
+      background-color: #ccc;
     }
   }
-  .select-tree .el-tree {
-    max-height: 350px;
+  &::-webkit-scrollbar-track-piece {
+    background: #fff;
+    width: 6px;
   }
-  .select-tree .el-input.el-input--suffix {
-    cursor: pointer;
-  }
-  .select-tree .el-input.el-input--suffix.rotate .el-input__suffix {
-    transform: rotate(180deg);
-  }
+}
+.select-tree .el-tree {
+  max-height: 350px;
+}
+.select-tree .el-input.el-input--suffix {
+  cursor: pointer;
+}
+.select-tree .el-input.el-input--suffix.rotate .el-input__suffix {
+  transform: rotate(180deg);
+}
 
-  .innerbox::-webkit-scrollbar {/*滚动条整体样式*/
-    width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
-    height: 4px;
-  }
-  .innerbox::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
-    border-radius: 5px;
-    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
-    background: rgba(0,0,0,0.2);
-  }
-  .innerbox::-webkit-scrollbar-track { /*滚动条里面轨道*/
-    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
-    border-radius: 0;
-    background: rgba(0, 0, 0, 0.1);
-  }
+.innerbox::-webkit-scrollbar {
+  /*滚动条整体样式*/
+  width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
+  height: 4px;
+}
+.innerbox::-webkit-scrollbar-thumb {
+  /*滚动条里面小方块*/
+  border-radius: 5px;
+  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  background: rgba(0, 0, 0, 0.2);
+}
+.innerbox::-webkit-scrollbar-track {
+  /*滚动条里面轨道*/
+  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  border-radius: 0;
+  background: rgba(0, 0, 0, 0.1);
+}
 </style>
 <style lang="scss">
-  .el-popover{
-    max-height: 400px;
-    overflow: auto;
-  }
-
+.el-popover {
+  max-height: 400px;
+  overflow: auto;
+}
 </style>
diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss
index 65abe46..8236420 100644
--- a/src/styles/sidebar.scss
+++ b/src/styles/sidebar.scss
@@ -212,3 +212,8 @@
 .is-active>.light-line{
   background-color: $menuActiveText
 }
+
+.el-image-viewer__close{
+  color: #fff !important;
+  font-size: 52px !important;
+}
\ No newline at end of file
diff --git a/src/views/caseManage/caseCommon/SwiperImg.vue b/src/views/caseManage/caseCommon/SwiperImg.vue
new file mode 100644
index 0000000..4ff3fd2
--- /dev/null
+++ b/src/views/caseManage/caseCommon/SwiperImg.vue
@@ -0,0 +1,88 @@
+<template>
+	<div class="swiper" @mouseover="overHd" @mouseout="auto">
+		<div class="swiper-item" v-for="(item,ind) in gallery" :key="item" v-show="ind==index">
+			<img :src="item" width="100%"  style="width: 300px; height: 450px; overflow: hidden">
+		</div>
+		<div class="thumbs" v-if="gallery.length > 1">
+			<span class="thumb" :class="{'active' :item==index+1}" v-for="item in gallery.length" :key='item'
+				@click="index=item-1">{{item}}</span>
+		</div>
+	</div>
+</template>
+ 
+<script>
+	export default {
+		props: {
+			gallery: {
+				type: Array,
+				default () {
+					return []
+				}
+			}
+		},
+		data() {
+			return {
+				//默认显示 
+				index: 0,
+				stopID: null,
+			}
+		},
+		// 当组件挂载完毕 执行自动播放
+		created() {
+			this.auto();
+		},
+		beforeDestroy(){
+			this.overHd();
+		},
+		methods: {
+			//鼠标一开  auto自动执行
+			auto() {
+				this.stopID = setInterval(() => {
+					this.index++;
+					this.check();
+				}, 5000)
+			},
+			overHd() {
+				clearInterval(this.stopID);
+			},
+			//检查边界
+			check() {
+				if (this.index == this.gallery.length) {
+					this.index = 0;
+				}
+			}
+		}
+	}
+</script>
+ 
+<style scoped="scoped">
+	.swiper {
+		position: relative;
+	}
+ 
+	.swiper .thumbs {
+		position: absolute;
+		bottom: 10px;
+		width: 100%;
+		text-align: center;
+	}
+ 
+	.thumb {
+		width: 10px;
+		height: 10px;
+		display: inline-block;
+		border-radius: 15px;
+		text-indent: 9999em;
+		margin: 0 5px;
+		background-color: #fff;
+	}
+ 
+	.thumb:hover {
+		cursor: pointer;
+		background-color: #42b983;
+	}
+	.active {
+		background-color: #42b983;
+ 
+	}
+</style>
\ No newline at end of file
diff --git a/src/views/caseManage/caseCommon/caseFormProcess.vue b/src/views/caseManage/caseCommon/caseFormProcess.vue
index f8a9666..e6a6446 100644
--- a/src/views/caseManage/caseCommon/caseFormProcess.vue
+++ b/src/views/caseManage/caseCommon/caseFormProcess.vue
@@ -4,138 +4,183 @@
       <el-row :gutter="20">
         <el-col :span="6">
           <el-form-item label="事件编号">
-            <el-input :value="caseForm.caseId" size="small"/>
+            <el-input :value="caseForm.caseId" size="small" />
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="来电时间">
-            <el-input :value="caseForm.callTime" size="small"/>
+            <el-input :value="caseForm.callTime" size="small" />
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="联系人">
-            <el-input :value="caseForm.reporterName" size="small"/>
+            <el-input :value="caseForm.reporterName" size="small" />
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="联系电话">
-            <el-input :value="caseForm.reporterPhone" size="small"/>
+            <el-input :value="caseForm.reporterPhone" size="small" />
           </el-form-item>
         </el-col>
       </el-row>
       <el-row :gutter="20">
         <el-col :span="6">
           <el-form-item label="事件来源">
-            <el-input :value="caseForm.sourceName" size="small"/>
+            <el-input :value="caseForm.sourceName" size="small" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="事件类型">
+            <el-input :value="caseForm.sourceType" size="small" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="精细化平台事件编号">
+            <el-input :value="caseForm.sourceNumber" size="small" />
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="事件分类">
-            <el-input :value="caseForm.eorcName" size="small"/>
+            <el-input :value="caseForm.eorcName" size="small" />
             <!--<el-input :value="caseForm.eorcName + '/' + caseForm.caseTypeName" size="small"/>-->
             <!--<el-input :value="caseForm.eorcName + '/' + caseForm.caseTypeName + '/' + caseForm.caseDetailTypeName" size="small"/>-->
           </el-form-item>
         </el-col>
-        <el-col :span="6">
-          <el-form-item label="紧急程度">
-            <el-input :value="caseForm.caseLevelName" size="small"/>
-          </el-form-item>
-        </el-col>
+
         <el-col :span="6">
           <el-form-item label="限办日期">
-            <el-input :value="caseForm.limitedTime" size="small"/>
+            <el-input :value="caseForm.limitedTime" size="small" />
           </el-form-item>
         </el-col>
-      </el-row>
-      <el-row :gutter="20">
         <el-col :span="6">
           <el-form-item label="事件地址">
             <!--<el-input :value="caseForm.areaName + '-' + caseForm.streetName + '-' + caseForm.communityName + '-' + caseForm.fieldintro" size="small"/>-->
-            <el-input :value="address" size="small"/>
+            <el-input :value="address" size="small" />
           </el-form-item>
         </el-col>
         <el-col :span="6">
-          <el-form-item label="事件辖区">
-            <el-input :value="caseForm.areaName" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="典型案例">
-            <el-input :value="caseForm.isTypical === '1' ? '是' : '否'" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="要情">
-            <el-input :value="caseForm.isImportant === '1' ? '是' : '否'" size="small"/>
+          <!-- <el-form-item label="紧急程度"> -->
+          <el-form-item label="事件状态">
+            <el-input :value="caseForm.caseLevelName" size="small" />
           </el-form-item>
         </el-col>
       </el-row>
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item label="当前事件状态">
-            <el-input :value="caseForm.stateName" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="当前处理方式">
-            <el-input :value="caseForm.caseStateName" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="需要回访">
-            <el-input :value="caseForm.isReturnVisit === '1' ? '是' : '否'" size="small"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="受理录音">
-            <el-input :value="caseForm.sound" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-button type="text" @click="playSound(caseForm.sound)">播放录音</el-button>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="回访录音">
-            <el-input :value="caseForm.satisfactionSound" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-button type="text" @click="playSound(caseForm.satisfactionSound)">播放录音</el-button>
-        <el-popover
-          v-if="caseForm.caseState === 5"
-          placement="top"
-          width="180"
-          v-model="popoverVisible">
-          <div style="text-align:center; margin: 0">
-            <el-button size="mini"  @click="revisit('')">本地号码</el-button>
-            <el-button type="primary" size="mini"  @click="revisit('0')">外地号码</el-button>
-          </div>
-          <el-button slot="reference" type="text">回访拨号</el-button>
-        </el-popover>
-      </el-row>
-      <el-row>
-        <el-col :span="24">
-          <el-form-item label="事件标题">
-            <el-input :value="caseForm.title" size="small"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row>
-        <el-col :span="24">
-          <el-form-item label="事件内容">
-            <el-input :value="caseForm.description" size="small"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row v-show="this.caseImage.length>0">
-        <el-form-item label="事件图片">
-          <!-- 图片展示 -->
-          <div class="image-container">
-            <el-image v-for="img in caseImage" :key="img" :src="img" fit="fill" class="case-image" :preview-src-list="caseImage"/>
-          </div>
-        </el-form-item>
-      </el-row>
+      <el-collapse v-model="activeName" accordion>
+        <el-collapse-item name="1">
+          <template slot="title">
+            <span class="collapse-title">更多信息</span>
+          </template>
+          <el-row :gutter="20">
+            <el-col :span="6">
+              <el-form-item label="事件辖区">
+                <el-input :value="caseForm.areaName" size="small" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="典型案例">
+                <el-input
+                  :value="caseForm.isTypical === '1' ? '是' : '否'"
+                  size="small"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="要情">
+                <el-input
+                  :value="caseForm.isImportant === '1' ? '是' : '否'"
+                  size="small"
+                />
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <el-row :gutter="20">
+            <el-col :span="6">
+              <el-form-item label="当前事件状态">
+                <el-input :value="caseForm.stateName" size="small" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="当前处理方式">
+                <el-input :value="caseForm.caseStateName" size="small" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="需要回访">
+                <el-input
+                  :value="caseForm.isReturnVisit === '1' ? '是' : '否'"
+                  size="small"
+                />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <el-form-item label="受理录音">
+                <el-input :value="caseForm.sound" size="small" />
+              </el-form-item>
+            </el-col>
+            <el-button type="text" @click="playSound(caseForm.sound)"
+              >播放录音</el-button
+            >
+          </el-row>
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <el-form-item label="回访录音">
+                <el-input :value="caseForm.satisfactionSound" size="small" />
+              </el-form-item>
+            </el-col>
+            <el-button
+              type="text"
+              @click="playSound(caseForm.satisfactionSound)"
+              >播放录音</el-button
+            >
+            <el-popover
+              v-if="caseForm.caseState === 5"
+              placement="top"
+              width="180"
+              v-model="popoverVisible"
+            >
+              <div style="text-align: center; margin: 0">
+                <el-button size="mini" @click="revisit('')">本地号码</el-button>
+                <el-button type="primary" size="mini" @click="revisit('0')"
+                  >外地号码</el-button
+                >
+              </div>
+              <el-button slot="reference" type="text">回访拨号</el-button>
+            </el-popover>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="事件标题">
+                <el-input :value="caseForm.title" size="small" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="事件内容">
+                <el-input :value="caseForm.description" size="small" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row v-show="this.caseImage.length > 0">
+            <el-form-item label="事件图片">
+              <!-- 图片展示 -->
+              <div class="image-container">
+                <el-image
+                  v-for="img in caseImage"
+                  :key="img"
+                  :src="img"
+                  fit="fill"
+                  class="case-image"
+                  :preview-src-list="caseImage"
+                />
+              </div>
+            </el-form-item>
+          </el-row>
+        </el-collapse-item>
+      </el-collapse>
       <!--<el-row>-->
       <!--<el-col :span="24">-->
       <!--<el-form-item label="备注信息">-->
@@ -151,98 +196,128 @@
       width="600px"
       append-to-body
       custom-class="sound-dialog"
-      @close="closeSound">
-      <audio-player ref="adplayer" :the-url="sound.url" :the-control-ist="sound.controlList"/>
+      @close="closeSound"
+    >
+      <audio-player
+        ref="adplayer"
+        :the-url="sound.url"
+        :the-control-ist="sound.controlList"
+      />
     </el-dialog>
   </div>
 </template>
 
 <script>
 // import { caseDetail } from '@/api/callCase'
-import { getSoundName } from '@/api/sound'
-import AudioPlayer from '@/components/AudioPlayer/AudioPlayer'
+import { getSoundName } from "@/api/sound";
+import AudioPlayer from "@/components/AudioPlayer/AudioPlayer";
 
 export default {
-  name: 'CaseFormProcess',
+  name: "CaseFormProcess",
   components: { AudioPlayer },
   props: {
     id: {
       type: String,
-      default: ''
+      default: "",
     }, // 事件id（主键id）
     caseForm: {
       type: Object,
       default() {
-        return {}
-      }
-    }
+        return {};
+      },
+    },
   },
   data() {
     return {
+      activeName: 1,
       sound: {
-        url: '',
-        controlList: 'noDownload noSpeed onlyOnePlaying'
+        url: "",
+        controlList: "noDownload noSpeed onlyOnePlaying",
       },
       popoverVisible: false, // 选择本地外地呼叫的弹窗
-      soundShow: false // 显示音频弹窗
-    }
+      soundShow: false, // 显示音频弹窗
+    };
   },
   computed: {
     address() {
-      const address_ori = [this.caseForm.areaName, this.caseForm.streetName, this.caseForm.communityName, this.caseForm.fieldintro]
-      const address = address_ori.filter(item => item && item.length > 0)
-      return address.join('-')
+      const address_ori = [
+        this.caseForm.areaName,
+        this.caseForm.streetName,
+        this.caseForm.communityName,
+        this.caseForm.fieldintro,
+      ];
+      const address = address_ori.filter((item) => item && item.length > 0);
+      return address.join("-");
     },
-    caseImage(){
-      if(this.caseForm.caseImage){
-        const base_url = process.env.BASE_API + '/static/'
-        const image_ori = this.caseForm.caseImage.split(';')
-        const imageList = image_ori.map(item=>base_url+ item)
-        return imageList
-      }else{
-        return []
+    caseImage() {
+      if (this.caseForm.caseImage) {
+        const base_url = process.env.BASE_API + "/static/";
+        const image_ori = this.caseForm.caseImage.split(";");
+        const imageList = image_ori.map((item) => base_url + item);
+        return imageList;
+      } else {
+        return [];
       }
-    }
+    },
   },
   methods: {
     // 播放录音
     playSound(sound) {
       if (sound) {
-        getSoundName(sound).then(res => {
-          const recordName = res.data
+        getSoundName(sound).then((res) => {
+          const recordName = res.data;
           if (recordName) {
-            this.sound.url = recordName
-            this.soundShow = true
+            this.sound.url = recordName;
+            this.soundShow = true;
           } else {
-            this.$message.warning('无录音')
+            this.$message.warning("无录音");
           }
-        })
+        });
       } else {
-        this.$message.warning('无录音')
+        this.$message.warning("无录音");
       }
     },
     // 关闭播放弹窗
     closeSound() {
-      this.$refs.adplayer.pausePlay()
+      this.$refs.adplayer.pausePlay();
     },
     // 拨打回访电话
     revisit(middleString) {
       // middleString为空或0，分别表示本地或外地
-      const tel = '9' + middleString + this.caseForm.reporterPhone
-      this.$store.dispatch('dial', tel)
-      this.popoverVisible = false
-    }
-  }
-}
+      const tel = "9" + middleString + this.caseForm.reporterPhone;
+      this.$store.dispatch("dial", tel);
+      this.popoverVisible = false;
+    },
+  },
+};
 </script>
 <style lang="scss" scoped>
-  .image-container{
-    display: flex;
-    justify-content: flex-start;
-    .case-image{
-      width:100px;
-      height:100px;
-      margin-right: 10px;
-    }
+.image-container {
+  display: flex;
+  justify-content: flex-start;
+  .case-image {
+    width: 100px;
+    height: 100px;
+    margin-right: 10px;
   }
+}
+.collapse-title {
+  font-size: 14px;
+  color: #606266;
+  font-weight: 800;
+  position: absolute;
+  right: 80px;
+  margin-top: -85px;
+}
+/deep/.el-collapse-item__arrow{
+  margin-top: -85px;
+}
+/deep/.el-collapse {
+  border: 0;
+}
+/deep/.el-collapse-item__header {
+  justify-content: end;
+  border: 0;
+  height: 0;
+}
 </style>
diff --git a/src/views/caseManage/caseCommon/caseFormRead.vue b/src/views/caseManage/caseCommon/caseFormRead.vue
index 897023a..7fa39af 100644
--- a/src/views/caseManage/caseCommon/caseFormRead.vue
+++ b/src/views/caseManage/caseCommon/caseFormRead.vue
@@ -4,134 +4,173 @@
       <el-row :gutter="20">
         <el-col :span="6">
           <el-form-item label="事件编号">
-            <el-input :value="caseForm.caseId" size="small"/>
+            <el-input :value="caseForm.caseId" size="small" />
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="来电时间">
-            <el-input :value="caseForm.callTime" size="small"/>
+            <el-input :value="caseForm.callTime" size="small" />
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="联系人">
-            <el-input :value="caseForm.reporterName" size="small"/>
+            <el-input :value="caseForm.reporterName" size="small" />
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="联系电话">
-            <el-input :value="caseForm.reporterPhone" size="small"/>
+            <el-input :value="caseForm.reporterPhone" size="small" />
           </el-form-item>
         </el-col>
       </el-row>
       <el-row :gutter="20">
         <el-col :span="6">
           <el-form-item label="事件来源">
-            <el-input :value="caseForm.sourceName" size="small"/>
+            <el-input :value="caseForm.sourceName" size="small" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="事件类型">
+            <el-input :value="caseForm.sourceType" size="small" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="精细化平台事件编号">
+            <el-input :value="caseForm.sourceNumber" size="small" />
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="事件分类">
-            <el-input :value="caseForm.eorcName" size="small"/>
+            <el-input :value="caseForm.eorcName" size="small" />
             <!--<el-input :value="caseForm.eorcName + '/' + caseForm.caseTypeName" size="small"/>-->
             <!--<el-input :value="caseForm.eorcName + '/' + caseForm.caseTypeName + '/' + caseForm.caseDetailTypeName" size="small"/>-->
           </el-form-item>
         </el-col>
-        <el-col :span="6">
-          <el-form-item label="紧急程度">
-            <el-input :value="caseForm.caseLevelName" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="限办日期">
-            <el-input :value="caseForm.limitedTime" size="small"/>
-          </el-form-item>
-        </el-col>
       </el-row>
       <el-row :gutter="20">
         <el-col :span="6">
+          <el-form-item label="限办日期">
+            <el-input :value="caseForm.limitedTime" size="small" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
           <el-form-item label="事件地址">
             <!--<el-input :value="caseForm.areaName + '-' + caseForm.streetName + '-' + caseForm.communityName + '-' + caseForm.fieldintro" size="small"/>-->
-            <el-input :value="address" size="small"/>
+            <el-input :value="address" size="small" />
           </el-form-item>
         </el-col>
         <el-col :span="6">
-          <el-form-item label="事件辖区">
-            <el-input :value="caseForm.areaName" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="典型案例">
-            <el-input :value="caseForm.isTypical === '1' ? '是' : '否'" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="要情">
-            <el-input :value="caseForm.isImportant === '1' ? '是' : '否'" size="small"/>
+          <el-form-item label="事件状态">
+            <el-input :value="caseForm.caseLevelName" size="small" />
           </el-form-item>
         </el-col>
       </el-row>
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item label="当前事件状态">
-            <el-input :value="caseForm.stateName" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="当前处理方式">
-            <el-input :value="caseForm.caseStateName" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="需要回访">
-            <el-input :value="caseForm.isReturnVisit === '1' ? '是' : '否'" size="small"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row v-if="caseForm.sound" :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="受理录音">
-            <el-input :value="caseForm.sound" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-button type="text" @click="playSound(caseForm.sound)">播放录音</el-button>
-      </el-row>
-      <el-row v-if="caseForm.satisfactionSound" :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="回访录音">
-            <el-input :value="caseForm.satisfactionSound" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-button type="text" @click="playSound(caseForm.satisfactionSound)">播放录音</el-button>
-      </el-row>
-      <el-row>
-        <el-col :span="24">
-          <el-form-item label="事件标题">
-            <el-input :value="caseForm.title" size="small"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row>
-        <el-col :span="24">
-          <el-form-item label="事件内容">
-            <el-input :value="caseForm.description" size="small"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row v-show="this.caseImage.length>0">
-        <el-form-item label="事件图片">
-        <!-- 图片展示 -->
-        <div class="image-container">
-          <el-image v-for="img in caseImage" :key="img" :src="img" fit="fill" class="case-image" :preview-src-list="caseImage"/>
-        </div>
-        </el-form-item>
-      </el-row>
-      <!--<el-row>-->
-      <!--<el-col :span="24">-->
-      <!--<el-form-item label="备注信息">-->
-      <!--<el-input :value="caseForm.remarks" size="small"/>-->
-      <!--</el-form-item>-->
-      <!--</el-col>-->
-      <!--</el-row>-->
+      <el-collapse v-model="activeName" accordion>
+        <el-collapse-item name="1">
+          <template slot="title">
+            <span class="collapse-title">更多信息</span>
+          </template>
+          <el-row :gutter="20">
+            <el-col :span="6">
+              <el-form-item label="事件辖区">
+                <el-input :value="caseForm.areaName" size="small" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="典型案例">
+                <el-input
+                  :value="caseForm.isTypical === '1' ? '是' : '否'"
+                  size="small"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="要情">
+                <el-input
+                  :value="caseForm.isImportant === '1' ? '是' : '否'"
+                  size="small"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="当前事件状态">
+                <el-input :value="caseForm.stateName" size="small" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="当前处理方式">
+                <el-input :value="caseForm.caseStateName" size="small" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="需要回访">
+                <el-input
+                  :value="caseForm.isReturnVisit === '1' ? '是' : '否'"
+                  size="small"
+                />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row v-if="caseForm.sound" :gutter="20">
+            <el-col :span="12">
+              <el-form-item label="受理录音">
+                <el-input :value="caseForm.sound" size="small" />
+              </el-form-item>
+            </el-col>
+            <el-button type="text" @click="playSound(caseForm.sound)"
+              >播放录音</el-button
+            >
+          </el-row>
+          <el-row v-if="caseForm.satisfactionSound" :gutter="20">
+            <el-col :span="12">
+              <el-form-item label="回访录音">
+                <el-input :value="caseForm.satisfactionSound" size="small" />
+              </el-form-item>
+            </el-col>
+            <el-button
+              type="text"
+              @click="playSound(caseForm.satisfactionSound)"
+              >播放录音</el-button
+            >
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="事件标题">
+                <el-input :value="caseForm.title" size="small" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="事件内容">
+                <el-input :value="caseForm.description" size="small" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row v-show="this.caseImage.length > 0">
+            <el-form-item label="事件图片">
+              <!-- 图片展示 -->
+              <div class="image-container">
+                <el-image
+                  v-for="img in caseImage"
+                  :key="img"
+                  :src="img"
+                  fit="fill"
+                  class="case-image"
+                  :preview-src-list="caseImage"
+                />
+              </div>
+            </el-form-item>
+          </el-row>
+          <!--<el-row>-->
+          <!--<el-col :span="24">-->
+          <!--<el-form-item label="备注信息">-->
+          <!--<el-input :value="caseForm.remarks" size="small"/>-->
+          <!--</el-form-item>-->
+          <!--</el-col>-->
+          <!--</el-row>-->
+        </el-collapse-item>
+      </el-collapse>
     </el-form>
     <!--播放音频弹窗-->
     <el-dialog
@@ -140,90 +179,120 @@
       width="600px"
       append-to-body
       custom-class="sound-dialog"
-      @close="closeSound">
-      <audio-player ref="adplayer" :the-url="sound.url" :the-control-ist="sound.controlList"/>
+      @close="closeSound"
+    >
+      <audio-player
+        ref="adplayer"
+        :the-url="sound.url"
+        :the-control-ist="sound.controlList"
+      />
     </el-dialog>
   </div>
 </template>
 
 <script>
 // import { caseDetail } from '@/api/callCase'
-import { getSoundName } from '@/api/sound'
-import AudioPlayer from '@/components/AudioPlayer/AudioPlayer'
+import { getSoundName } from "@/api/sound";
+import AudioPlayer from "@/components/AudioPlayer/AudioPlayer";
 
 export default {
-  name: 'CaseFormRead',
+  name: "CaseFormRead",
   components: { AudioPlayer },
   props: {
     id: {
       type: String,
-      default: ''
+      default: "",
     }, // 事件id（主键id）
     caseForm: {
       type: Object,
       default() {
-        return {}
-      }
-    }
+        return {};
+      },
+    },
   },
   data() {
     return {
+      activeName: 1,
       sound: {
-        url: '',
-        controlList: 'noDownload noSpeed onlyOnePlaying'
+        url: "",
+        controlList: "noDownload noSpeed onlyOnePlaying",
       },
-      soundShow: false // 显示音频弹窗
-    }
+      soundShow: false, // 显示音频弹窗
+    };
   },
   computed: {
     address() {
-      const address_ori = [this.caseForm.areaName, this.caseForm.streetName, this.caseForm.communityName, this.caseForm.fieldintro]
-      const address = address_ori.filter(item => item && item.length > 0)
-      return address.join('-')
+      const address_ori = [
+        this.caseForm.areaName,
+        this.caseForm.streetName,
+        this.caseForm.communityName,
+        this.caseForm.fieldintro,
+      ];
+      const address = address_ori.filter((item) => item && item.length > 0);
+      return address.join("-");
     },
-    caseImage(){
-      if(this.caseForm.caseImage){
-        const base_url = process.env.BASE_API + '/static/'
-        const image_ori = this.caseForm.caseImage.split(';')
-        const imageList = image_ori.map(item=>base_url+ item)
-        return imageList
-      }else{
-        return []
+    caseImage() {
+      if (this.caseForm.caseImage) {
+        const base_url = process.env.BASE_API + "/static/";
+        const image_ori = this.caseForm.caseImage.split(";");
+        const imageList = image_ori.map((item) => base_url + item);
+        return imageList;
+      } else {
+        return [];
       }
-    }
+    },
   },
   methods: {
     // 播放录音
     playSound(sound) {
       if (sound) {
-        getSoundName(sound).then(res => {
-          const recordName = res.data
+        getSoundName(sound).then((res) => {
+          const recordName = res.data;
           if (recordName) {
-            this.sound.url = recordName
-            this.soundShow = true
+            this.sound.url = recordName;
+            this.soundShow = true;
           } else {
-            this.$message.warning('无录音')
+            this.$message.warning("无录音");
           }
-        })
+        });
       } else {
-        this.$message.warning('无录音')
+        this.$message.warning("无录音");
       }
     },
     // 关闭播放弹窗
     closeSound() {
-      this.$refs.adplayer.pausePlay()
-    }
-  }
-}
+      this.$refs.adplayer.pausePlay();
+    },
+  },
+};
 </script>
 <style lang="scss" scoped>
-  .image-container{
-    display: flex;
-    justify-content: flex-start;
-    .case-image{
-      width:100px;
-      height:100px;
-      margin-right: 10px;
-    }
+.image-container {
+  display: flex;
+  justify-content: flex-start;
+  .case-image {
+    width: 100px;
+    height: 100px;
+    margin-right: 10px;
   }
+}
+.collapse-title {
+  font-size: 14px;
+  color: #606266;
+  font-weight: 800;
+  position: absolute;
+  right: 80px;
+  margin-top: -85px;
+}
+/deep/.el-collapse-item__arrow {
+  margin-top: -85px;
+}
+/deep/.el-collapse {
+  border: 0;
+}
+/deep/.el-collapse-item__header {
+  justify-content: end;
+  border: 0;
+  height: 0;
+}
 </style>
diff --git a/src/views/caseManage/caseCommon/caseImgShow.vue b/src/views/caseManage/caseCommon/caseImgShow.vue
new file mode 100644
index 0000000..c6c911d
--- /dev/null
+++ b/src/views/caseManage/caseCommon/caseImgShow.vue
@@ -0,0 +1,42 @@
+<template>
+  <SwiperImg
+    v-if="imgs.length > 0"
+    style="width: 300px; height: 450px; overflow: hidden"
+    :gallery="imgs"
+  />
+  <el-image v-else>
+    <div slot="error" class="image-slot">
+      暂无图片
+    </div>
+  </el-image>
+</template>
+
+<script>
+import SwiperImg from "./SwiperImg.vue";
+export default {
+  components: {
+    SwiperImg,
+  },
+  props: {
+    imgs: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.el-image {
+  margin-top: 3px;
+  width: 300px;
+  height: 450px;
+  line-height: 450px;
+  overflow: hidden;
+  text-align: center;
+  background: #f5f7fa;
+  color: #909399;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/caseManage/caseCommon/caseProcessTable.vue b/src/views/caseManage/caseCommon/caseProcessTable.vue
new file mode 100644
index 0000000..4c54b7f
--- /dev/null
+++ b/src/views/caseManage/caseCommon/caseProcessTable.vue
@@ -0,0 +1,423 @@
+<template>
+  <div class="case-wrap">
+      {{showAll}}
+      {{listData}}
+    <div class="showAllDetail">
+      <el-switch
+        v-model="showAll"
+        active-color="#13ce66"
+        active-text="展开全部信息"
+      >
+      </el-switch>
+    </div>
+    <div class="moreDetail" v-show="!showAll">
+      <!-- 两条数据显示 -->
+      <!-- <div class="step-wrap" style="display:none">
+        <div class="before line">
+          <div class="icon"></div>
+          <div class="title">
+            {{ detailObj.end.processTitle }} &nbsp;&nbsp;&nbsp;&nbsp;
+            <span>{{ detailObj.end.time }}</span>
+          </div>
+          <div class="content">
+            <div class="left">
+              <p>发送人:{{ detailObj.end.sender }}</p>
+              <p>接收人:{{ detailObj.end.sender }}</p>
+              <p>处置详情:{{ detailObj.end.processTitle }}</p>
+            </div>
+            <div class="right">
+              <div class="imgs-wrap">
+                <el-image
+                  v-for="img in detailObj.end.imgs"
+                  :key="img"
+                  :src="img"
+                  class="zoom"
+                  fit="fill"
+                  :preview-src-list="caseImage(img)"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="after">
+          <div class="icon"></div>
+          <div class="title">
+            {{ detailObj.end.processTitle }} &nbsp;&nbsp;&nbsp;&nbsp;
+            <span>{{ detailObj.end.time }}</span>
+          </div>
+          <div class="content">
+            <div class="left">
+              <p>发送人:{{ detailObj.end.sender }}</p>
+              <p>接收人:{{ detailObj.end.sender }}</p>
+              <p>处置详情:{{ detailObj.end.processTitle }}</p>
+            </div>
+            <div class="right">
+              <div class="imgs-wrap">
+                <el-image
+                  v-for="img in detailObj.end.imgs"
+                  :key="img"
+                  :src="img"
+                  class="zoom"
+                  fit="fill"
+                  :preview-src-list="caseImage(img)"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div> -->
+        <div class="step-more-wrap">
+        <div class="detail-wrap" v-for="(item,index) in tempList" :Key="index">
+          <div class="leftLine" v-if="index != tempList.length-1"></div>
+          <div class="title">
+          <div v-if="item.nextId" class="done"></div>
+          <div v-else class="process"></div>
+            {{ item.processTitle }} &nbsp;&nbsp;&nbsp;&nbsp;
+            <span>{{ item.time }}</span>
+          </div>
+          <div class="content">
+            <div class="left">
+              <p>发送人:{{ item.sender }}</p>
+              <p>接收人:{{ item.sender }}</p>
+              <p>处置详情:{{item.processTitle }}</p>
+            </div>
+            <div class="right">
+              <div class="imgs-wrap">
+                <el-image
+                  v-for="img in item.imgs"
+                  :key="img"
+                  :src="img"
+                  class="zoom"
+                  fit="fill"
+                  :preview-src-list="caseImage(img)"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="moreDetail">
+      <div class="step-more-wrap" v-show="showAll">
+        <div class="detail-wrap" v-for="(item,index) in listData" :Key="index">
+          <div class="leftLine" v-if="index != listData.length-1"></div>
+          <div class="title">
+          <div v-if="item.nextId" class="done"></div>
+          <div v-else class="process"></div>
+            {{ item.processTitle }} &nbsp;&nbsp;&nbsp;&nbsp;
+            <span>{{ item.time }}</span>
+          </div>
+          <div class="content">
+            <div class="left">
+              <p>发送人:{{ item.sender }}</p>
+              <p>接收人:{{ item.sender }}</p>
+              <p :title="item.processTitle">处置详情:{{item.processTitle }}</p>
+            </div>
+            <div class="right">
+              <div class="imgs-wrap">
+                <el-image
+                  v-for="img in item.imgs"
+                  :key="img"
+                  :src="img"
+                  class="zoom"
+                  fit="fill"
+                  :preview-src-list="caseImage(img)"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    list: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      showAll: false,
+      photoVisible: false,
+      bigImgUrl: "",
+      detailObj: {
+        start: {},
+        end: {},
+      },
+      imgs: [
+        "https://t7.baidu.com/it/u=1742010762,3975931984&fm=193&f=GIF",
+        "https://t7.baidu.com/it/u=1302518827,2012573433&fm=193&f=GIF",
+        "https://t7.baidu.com/it/u=1216634532,1327384749&fm=193&f=GIF",
+      ],
+      listData: [], // 全部数据
+      tempList: [], // 首尾数据
+    };
+  },
+  watch:{
+    list(val){
+      // alert(val)
+      console.log(val)
+    }
+  },
+  created() {
+          // alert(this.list)
+    // this.listData = this.treeDataToCompressed(this.list).reverse();
+      // 处理之后的数据 获取首尾数据
+    this.listData = this.list;
+    this.tempList = [this.listData[0],this.listData.at(-1)];
+    this.listData = this.listData.map((item) => {
+      item.imgs = this.imgs;
+      return item; 
+    });
+  },
+  methods: {
+    showBigImage(e) {
+      //点击图片函数，点击后，把photoVisible设置成true
+      if (e != "") {
+        this.photoVisible = true;
+        this.bigImgUrl = e.currentTarget.src;
+      }
+    },
+    caseImage(img) {
+      return img ? [].concat(img) : [];
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.case-wrap {
+  width: 60vw;
+  padding-top: 20px;
+}
+.before::after {
+  content: "";
+  display: inline-block;
+  position: absolute;
+  top: 12px;
+  left: -31px;
+  width: 2px;
+  height: 90%;
+  border-left: 2px dashed #ccc;
+}
+.moreDetail {
+  font-size: 14px !important;
+  position: relative;
+  margin-top: 20px;
+}
+.step-wrap {
+  box-sizing: border-box;
+  height: 300px;
+  padding-left: 30px;
+}
+.step-wrap {
+  .before {
+    position: relative;
+    height: 50%;
+  }
+  .after {
+    position: relative;
+    height: 50%;
+  }
+  .content {
+    margin-top: 20px;
+    width: 95%;
+    height: 100px;
+    background: #f0f0f0;
+    padding: 20px 30px;
+    border-radius: 10px;
+    display: flex;
+
+    .left {
+      width: 420px;
+      p {
+        font-size: 14px !important;
+        padding: 0;
+        margin: 0;
+        margin-top: 2px;
+        line-height: 20px;
+      }
+    }
+    .right {
+      position: relative;
+      flex: 1;
+    }
+  }
+}
+.title {
+  font-weight: 800;
+  span {
+    color: #ccc;
+    font-weight: 400 !important;
+  }
+}
+.moreDetail .process {
+  z-index: 10;
+  content: "";
+  display: inline-block;
+  width: 25px;
+  height: 25px;
+  background: url("../../../assets/global_images/process.png") no-repeat;
+  position: absolute;
+  top: -8px;
+  left: -12px;
+  background-size: contain;
+}
+.moreDetail .done {
+  z-index: 10;
+  content: "";
+  display: inline-block;
+  width: 25px;
+  height: 25px;
+  background: url("../../../assets/global_images/done.png") no-repeat;
+  position: absolute;
+  bottom: -8px;
+  left: -12px;
+  background-size: contain;
+}
+.before .icon,.after .icon {
+  z-index: 10;
+  display: inline-block;
+  width: 25px;
+  height: 25px;
+  background: url("../../../assets/global_images/done.png") no-repeat;
+  position: absolute;
+  top: -3px;
+  left: -42px;
+  background-size: contain;
+}
+.imgs-wrap {
+  position: absolute;
+  left: -5px;
+  top: -10px;
+  width: 400px;
+  height: 80px;
+  overflow-y: auto;
+}
+.text-over {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.text-over-more {
+  overflow: hidden; // 溢出隐藏
+  text-overflow: ellipsis; // 溢出用省略号显示
+  display: -webkit-box; // 作为弹性伸缩盒子模型显示。
+  -webkit-box-orient: vertical; // 设置伸缩盒子的子元素排列方式：从上到下垂直排列
+  -webkit-line-clamp: 2; // 显示的行数
+}
+/deep/.zoom {
+  display: inline-block;
+  box-sizing: border-box;
+  width: 120px;
+  height: 70px;
+  margin-right: 10px;
+  margin-top: 5px;
+  cursor: pointer;
+}
+.leftLine{
+    position: absolute;
+    top: 18px;
+    left: -19px;
+    width: 2px;
+    height: 99%;
+    border-left: 2px dashed #ccc;
+}
+.moreDetail {
+  .step-more-wrap {
+    box-sizing: border-box;
+    padding-left: 30px;
+    height: 360px;
+    overflow-y: auto;
+    .detail-wrap {
+      margin-top: 3px;
+      margin-bottom: 20px;
+      position: relative;
+      .title{
+        position: relative;
+        .process{
+          z-index: 10 !important;
+          position: absolute;
+          top: -3px;
+          left: -30px;
+          width: 25px;
+          height: 25px;
+          background: url("../../../assets/global_images/process.png") no-repeat;
+          background-size: contain;
+        }
+        .done{
+          z-index: 10 !important;
+          position: absolute;
+          top: -3px;
+          left: -30px;
+          width: 25px;
+          height: 25px;
+          background: url("../../../assets/global_images/done.png") no-repeat;
+          background-size: contain;
+        }
+      }
+      p {
+        font-size: 14px !important;
+        padding: 0;
+        margin: 0;
+        margin-top: 2px;
+        line-height: 20px;
+        width: 90%;
+          overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+      }
+      .content {
+        margin-top: 20px;
+        width: 96%;
+        height: 100px;
+        background: #f0f0f0;
+        padding: 20px 30px;
+        border-radius: 10px;
+        display: flex;
+
+        .left {
+          width: 420px;
+          p {
+            font-size: 14px !important;
+            padding: 0;
+            margin: 0;
+            margin-top: 2px;
+            line-height: 20px;
+          }
+        }
+        .right {
+          position: relative;
+          flex: 1;
+        }
+      }
+    }
+  }
+}
+
+::-webkit-scrollbar {
+  /*滚动条整体样式*/
+  width: 6px; /*高宽分别对应横竖滚动条的尺寸*/
+  height: 8px;
+}
+::-webkit-scrollbar-thumb {
+  /*滚动条里面小方块*/
+  border-radius: 5px;
+  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  background: rgba(0, 0, 0, 0.1);
+}
+::-webkit-scrollbar-track {
+  /*滚动条里面轨道*/
+  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  border-radius: 5px;
+  background: rgba(0, 0, 0, 0.1);
+}
+
+</style>
\ No newline at end of file
diff --git a/src/views/caseManage/caseCommon/process.json b/src/views/caseManage/caseCommon/process.json
new file mode 100644
index 0000000..db58784
--- /dev/null
+++ b/src/views/caseManage/caseCommon/process.json
@@ -0,0 +1,251 @@
+{
+    "state": true,
+    "msg": "",
+    "data": [
+        {
+            "id": "1E03D7C7D3C84E838D1A4C6E8DFC4240",
+            "info": {
+                "id": "1E03D7C7D3C84E838D1A4C6E8DFC4240",
+                "businessId": "aa00ac6d759540d4942de3b00990bacc",
+                "processType": "15",
+                "processInstId": "36008397",
+                "processTaskId": null,
+                "processTaskName": null,
+                "processAssigneeId": "465546017",
+                "processAssigneeName": "呼叫中心系统",
+                "processNextTaskId": "36008446",
+                "processNextTaskName": "专项系统对接待分拨",
+                "processNextAssigneeId": "465546017",
+                "processNextAssigneeName": "呼叫中心系统",
+                "processStepTitle": "新建",
+                "approveMsg": null,
+                "processStepName": "提交",
+                "regulationCompleteTime": null,
+                "createTime": "2022-09-22 09:57:03",
+                "parentTitleId": null,
+                "fileId": null,
+                "parentInstanceId": null,
+                "applyWay": null,
+                "dataLv": null,
+                "processStepExtend": null,
+                "isAuto": null,
+                "processAssigneeDeptName": "专项系统对接",
+                "processNextAssigneeDeptName": "专项系统对接"
+            },
+            "parentTitleId": null,
+            "processStepTitle": "新建",
+            "children": [
+                {
+                    "id": "1AB4B8BD0E034AE08DFF0EAE1F7750DE",
+                    "info": {
+                        "id": "1AB4B8BD0E034AE08DFF0EAE1F7750DE",
+                        "businessId": "aa00ac6d759540d4942de3b00990bacc",
+                        "processType": "15",
+                        "processInstId": "36008397",
+                        "processTaskId": "36008446",
+                        "processTaskName": "专项系统对接待分拨",
+                        "processAssigneeId": "465546017",
+                        "processAssigneeName": "呼叫中心系统",
+                        "processNextTaskId": "36008473",
+                        "processNextTaskName": "蓉江新区待分拨",
+                        "processNextAssigneeId": "465546577",
+                        "processNextAssigneeName": "刘晓梅",
+                        "processStepTitle": "上报蓉江新区",
+                        "approveMsg": null,
+                        "processStepName": null,
+                        "regulationCompleteTime": null,
+                        "createTime": "2022-09-22 09:57:03",
+                        "parentTitleId": "1E03D7C7D3C84E838D1A4C6E8DFC4240",
+                        "fileId": null,
+                        "parentInstanceId": null,
+                        "applyWay": null,
+                        "dataLv": null,
+                        "processStepExtend": null,
+                        "isAuto": null,
+                        "processAssigneeDeptName": "专项系统对接",
+                        "processNextAssigneeDeptName": "蓉江新区"
+                    },
+                    "parentTitleId": "1E03D7C7D3C84E838D1A4C6E8DFC4240",
+                    "processStepTitle": "上报蓉江新区",
+                    "children": [
+                        {
+                            "id": "7F644436F8B04DAEBEB475214F64783E",
+                            "info": {
+                                "id": "7F644436F8B04DAEBEB475214F64783E",
+                                "businessId": "aa00ac6d759540d4942de3b00990bacc",
+                                "processType": "15",
+                                "processInstId": "36008397",
+                                "processTaskId": "36008473",
+                                "processTaskName": "蓉江新区待分拨",
+                                "processAssigneeId": "465546577",
+                                "processAssigneeName": "刘晓梅",
+                                "processNextTaskId": "36010141",
+                                "processNextTaskName": "蓉江新区待分拨",
+                                "processNextAssigneeId": "465546577",
+                                "processNextAssigneeName": "刘晓梅",
+                                "processStepTitle": "立案",
+                                "approveMsg": null,
+                                "processStepName": null,
+                                "regulationCompleteTime": null,
+                                "createTime": "2022-09-22 10:07:02",
+                                "parentTitleId": "1AB4B8BD0E034AE08DFF0EAE1F7750DE",
+                                "fileId": null,
+                                "parentInstanceId": null,
+                                "applyWay": null,
+                                "dataLv": null,
+                                "processStepExtend": null,
+                                "isAuto": null,
+                                "processAssigneeDeptName": "蓉江新区",
+                                "processNextAssigneeDeptName": "蓉江新区"
+                            },
+                            "parentTitleId": "1AB4B8BD0E034AE08DFF0EAE1F7750DE",
+                            "processStepTitle": "立案",
+                            "children": [
+                                {
+                                    "id": "156D83539A10444BBDE445E132E551C1",
+                                    "info": {
+                                        "id": "156D83539A10444BBDE445E132E551C1",
+                                        "businessId": "aa00ac6d759540d4942de3b00990bacc",
+                                        "processType": "15",
+                                        "processInstId": "36008397",
+                                        "processTaskId": "36010141",
+                                        "processTaskName": "蓉江新区待分拨",
+                                        "processAssigneeId": "465546577",
+                                        "processAssigneeName": "刘晓梅",
+                                        "processNextTaskId": "36010490",
+                                        "processNextTaskName": "高校园区管理处待分拨",
+                                        "processNextAssigneeId": "465546697",
+                                        "processNextAssigneeName": "张萍",
+                                        "processStepTitle": "蓉江新区分拨",
+                                        "approveMsg": null,
+                                        "processStepName": null,
+                                        "regulationCompleteTime": null,
+                                        "createTime": "2022-09-22 10:08:11",
+                                        "parentTitleId": "7F644436F8B04DAEBEB475214F64783E",
+                                        "fileId": "371daad0c65b871f532a49ccae8d34dc",
+                                        "parentInstanceId": null,
+                                        "applyWay": "1",
+                                        "dataLv": null,
+                                        "processStepExtend": null,
+                                        "isAuto": null,
+                                        "processAssigneeDeptName": "蓉江新区",
+                                        "processNextAssigneeDeptName": "高校园区管理处"
+                                    },
+                                    "parentTitleId": "7F644436F8B04DAEBEB475214F64783E",
+                                    "processStepTitle": "蓉江新区分拨",
+                                    "children": [
+                                        {
+                                            "id": "DCEB4053DCD040FC907CA8CBDAFB9BED",
+                                            "info": {
+                                                "id": "DCEB4053DCD040FC907CA8CBDAFB9BED",
+                                                "businessId": "aa00ac6d759540d4942de3b00990bacc",
+                                                "processType": "15",
+                                                "processInstId": "36008397",
+                                                "processTaskId": "36010490",
+                                                "processTaskName": "高校园区管理处待分拨",
+                                                "processAssigneeId": "465546697",
+                                                "processAssigneeName": "张萍",
+                                                "processNextTaskId": "36021140",
+                                                "processNextTaskName": "高校园区管理处待分拨",
+                                                "processNextAssigneeId": "465546697",
+                                                "processNextAssigneeName": "张萍",
+                                                "processStepTitle": "签收",
+                                                "approveMsg": null,
+                                                "processStepName": null,
+                                                "regulationCompleteTime": null,
+                                                "createTime": "2022-09-22 11:11:10",
+                                                "parentTitleId": "156D83539A10444BBDE445E132E551C1",
+                                                "fileId": null,
+                                                "parentInstanceId": null,
+                                                "applyWay": "1",
+                                                "dataLv": null,
+                                                "processStepExtend": null,
+                                                "isAuto": null,
+                                                "processAssigneeDeptName": "高校园区管理处",
+                                                "processNextAssigneeDeptName": "高校园区管理处"
+                                            },
+                                            "parentTitleId": "156D83539A10444BBDE445E132E551C1",
+                                            "processStepTitle": "签收",
+                                            "children": [
+                                                {
+                                                    "id": "0DDDAFE1B10C444B95E5D61E8483F1D4",
+                                                    "info": {
+                                                        "id": "0DDDAFE1B10C444B95E5D61E8483F1D4",
+                                                        "businessId": "aa00ac6d759540d4942de3b00990bacc",
+                                                        "processType": "15",
+                                                        "processInstId": "36008397",
+                                                        "processTaskId": "36021140",
+                                                        "processTaskName": "高校园区管理处待分拨",
+                                                        "processAssigneeId": "465546697",
+                                                        "processAssigneeName": "张萍",
+                                                        "processNextTaskId": "36021489",
+                                                        "processNextTaskName": "蓉江新区办理结果确认",
+                                                        "processNextAssigneeId": "465546577",
+                                                        "processNextAssigneeName": "刘晓梅",
+                                                        "processStepTitle": "高校园区管理处提交结果",
+                                                        "approveMsg": "已处理",
+                                                        "processStepName": null,
+                                                        "regulationCompleteTime": null,
+                                                        "createTime": "2022-09-22 11:11:38",
+                                                        "parentTitleId": "DCEB4053DCD040FC907CA8CBDAFB9BED",
+                                                        "fileId": "ec8a05e25dae5571154f17e998653339",
+                                                        "parentInstanceId": null,
+                                                        "applyWay": null,
+                                                        "dataLv": null,
+                                                        "processStepExtend": null,
+                                                        "isAuto": null,
+                                                        "processAssigneeDeptName": "高校园区管理处",
+                                                        "processNextAssigneeDeptName": "蓉江新区"
+                                                    },
+                                                    "parentTitleId": "DCEB4053DCD040FC907CA8CBDAFB9BED",
+                                                    "processStepTitle": "高校园区管理处提交结果",
+                                                    "children": [
+                                                        {
+                                                            "id": "ED0DDD8B224747B88F051E28F1A4AF39",
+                                                            "info": {
+                                                                "id": "ED0DDD8B224747B88F051E28F1A4AF39",
+                                                                "businessId": "aa00ac6d759540d4942de3b00990bacc",
+                                                                "processType": "15",
+                                                                "processInstId": "36008397",
+                                                                "processTaskId": "36021489",
+                                                                "processTaskName": "蓉江新区办理结果确认",
+                                                                "processAssigneeId": "465546577",
+                                                                "processAssigneeName": "刘晓梅",
+                                                                "processNextTaskId": null,
+                                                                "processNextTaskName": null,
+                                                                "processNextAssigneeId": null,
+                                                                "processNextAssigneeName": null,
+                                                                "processStepTitle": "结案",
+                                                                "approveMsg": null,
+                                                                "processStepName": "结束",
+                                                                "regulationCompleteTime": null,
+                                                                "createTime": "2022-09-26 09:03:08",
+                                                                "parentTitleId": "0DDDAFE1B10C444B95E5D61E8483F1D4",
+                                                                "fileId": null,
+                                                                "parentInstanceId": null,
+                                                                "applyWay": null,
+                                                                "dataLv": null,
+                                                                "processStepExtend": null,
+                                                                "isAuto": null,
+                                                                "processAssigneeDeptName": "蓉江新区",
+                                                                "processNextAssigneeDeptName": null
+                                                            },
+                                                            "parentTitleId": "0DDDAFE1B10C444B95E5D61E8483F1D4",
+                                                            "processStepTitle": "结案",
+                                                            "children": []
+                                                        }
+                                                    ]
+                                                }
+                                            ]
+                                        }
+                                    ]
+                                }
+                            ]
+                        }
+                    ]
+                }
+            ]
+        }
+    ],
+    "code": 200
+}
\ No newline at end of file
diff --git a/src/views/caseManage/caseCommon/process2.json b/src/views/caseManage/caseCommon/process2.json
new file mode 100644
index 0000000..53506ad
--- /dev/null
+++ b/src/views/caseManage/caseCommon/process2.json
@@ -0,0 +1,23 @@
+{
+    "code": 200,
+    "msg": "操作成功",
+    "success": true,
+    "data": {
+        "eventId": "866691836176740352",
+        "appCode": "A001",
+        "desc": "好吃多",
+        "status": 1,
+        "replyDatas": [
+            {
+                "id": "21345234523",
+                "time": "2021-07-19 14:42:34",
+                "name": "张三",
+                "content": "大师傅处置完成",
+                "attachments": "http://ztuploadfile.oss-cn-beijing.aliyuncs.com/%E8%BD%A6%E8%BE%86.jpeg?Expires=1934519183&OSSAccessKeyId=LTAI4G3j5y61aAVjgUB2sWXv&Signature=Ws%2BXAnQw6BPs8r3R7atb3MjzCFY%3D",
+                "status": "11",
+                "statusDesc": "成功",
+                "businessStatus": "success"
+            }
+        ]
+    }
+}
\ No newline at end of file
diff --git a/src/views/caseManage/caseDetail.vue b/src/views/caseManage/caseDetail.vue
index 0fc16f1..6444c93 100644
--- a/src/views/caseManage/caseDetail.vue
+++ b/src/views/caseManage/caseDetail.vue
@@ -4,28 +4,47 @@
     <!-- 基础信息表单 -->
     <div>
       <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-tickets"/>事件基础信息</div></el-col>
+        <el-col :span="6"
+          ><div class="title-header">
+            <i class="el-icon-tickets" />事件基础信息
+          </div></el-col
+        >
       </el-row>
-      <case-form-process v-if="showProcess" ref="caseFormProcess" :case-form="caseDetail"/>
-      <case-form-read v-else ref="caseFormRead" :case-form="caseDetail"/>
+      <case-form-process
+        v-if="showProcess"
+        ref="caseFormProcess"
+        :case-form="caseDetail"
+      />
+      <case-form-read v-else ref="caseFormRead" :case-form="caseDetail" />
     </div>
 
-    <!-- 事件地图 -->
-    <div>
+    <!-- 事件处理流程 -->
+    <div v-if="caseType != '应急事件'">
       <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-tickets"/>事件地图</div></el-col>
+        <el-col :span="6"
+          ><div class="title-header">
+            <i class="el-icon-tickets" />事件处理流程
+          </div></el-col
+        >
       </el-row>
       <el-row>
-        <el-col :span="24">
-          <f-map ref="mapDetail" style="height: 40vh; padding: 20px 0px"/>
+        <el-col :span="6">
+          <caseImgShow :imgs="caseImgs" />
+        </el-col>
+        <el-col :span="6">
+          <caseProcessTable :list="processList" />
         </el-col>
       </el-row>
     </div>
 
     <!-- 事件流程处理 -->
-    <div v-if="showProcess&&caseDetail.id">
+    <div v-if="showProcess && caseDetail.id">
       <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-tickets"/>事件流程处理</div></el-col>
+        <el-col :span="6"
+          ><div class="title-header">
+            <i class="el-icon-tickets" />事件流程处理
+          </div></el-col
+        >
       </el-row>
       <case-process
         ref="caseProcess"
@@ -42,40 +61,94 @@
     </div>
     <!-- 事件处理记录 -->
     <div v-if="caseDetail.processId">
-      <case-record ref="caseRecord" :process-id="caseDetail.processId" :id="id"/>
+      <case-record
+        ref="caseRecord"
+        :process-id="caseDetail.processId"
+        :id="id"
+      />
+    </div>
+
+    <!-- 事件地图 -->
+    <div>
+      <el-row class="table-title">
+        <el-col :span="6"
+          ><div class="title-header">
+            <i class="el-icon-tickets" />事件地图
+          </div></el-col
+        >
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <f-map ref="mapDetail" style="height: 40vh; padding: 20px 0px" />
+        </el-col>
+      </el-row>
     </div>
   </div>
 </template>
 
 <script>
-import CaseFormRead from './caseCommon/caseFormRead'
-import CaseFormProcess from './caseCommon/caseFormProcess'
-import CaseProcess from './caseCommon/caseProcess'
-import CaseRecord from './caseCommon/caseRecord'
-import { caseDetail } from '@/api/callCase'
-import FMap from '../../components/fMap/components/fMap'
-
+import CaseFormRead from "./caseCommon/caseFormRead";
+import CaseFormProcess from "./caseCommon/caseFormProcess";
+import CaseProcess from "./caseCommon/caseProcess";
+import CaseRecord from "./caseCommon/caseRecord";
+import caseImgShow from "./caseCommon/caseImgShow";
+import caseProcessTable from "./caseCommon/caseProcessTable.vue";
+import { caseDetail, eventStepList } from "@/api/callCase";
+import FMap from "../../components/fMap/components/fMap";
+import process from "./caseCommon/process.json";
 export default {
-  name: 'CaseDetail',
-  components: { FMap, CaseFormRead, CaseProcess, CaseRecord, CaseFormProcess },
+  name: "CaseDetail",
+  components: {
+    FMap,
+    CaseFormRead,
+    CaseProcess,
+    CaseRecord,
+    CaseFormProcess,
+    caseImgShow,
+    caseProcessTable,
+  },
   data() {
     return {
-      id: '',
-      taskId: '', // 当前任务id，只有任务处理的详情中需要，会签用
+      id: "",
+      taskId: "", // 当前任务id，只有任务处理的详情中需要，会签用
       caseDetail: {},
+      caseType: "",
+      caseImgs: [
+        "https://t7.baidu.com/it/u=1742010762,3975931984&fm=193&f=GIF",
+        "https://t7.baidu.com/it/u=1302518827,2012573433&fm=193&f=GIF",
+      ], // 事件流程图片
+      processList: [], // 事件流程信息
       showProcess: false,
-      wholeLoading: false
-    }
+      wholeLoading: false,
+    };
+  },
+  created() {
+    // 获取事件分类类型
+    let caseTypeMap = {
+      2: "应急事件",
+      3: "运维事件",
+      4: "精细化管理事件",
+    };
+    let caseType = caseTypeMap[this.$route.query.caseType];
+    this.caseType = caseType;
+    //   this.id = this.$route.params.id;
+    // if (this.$route.query.taskId) {
+    //   this.taskId = this.$route.query.taskId;
+    // }
+    // if (this.$route.query.showProcess) {
+    //   this.showProcess = this.$route.query.showProcess;
+    // }
+    // this.fetchDetail();
   },
   mounted() {
-    this.id = this.$route.params.id
+    this.id = this.$route.params.id;
     if (this.$route.query.taskId) {
-      this.taskId = this.$route.query.taskId
+      this.taskId = this.$route.query.taskId;
     }
     if (this.$route.query.showProcess) {
-      this.showProcess = this.$route.query.showProcess
+      this.showProcess = this.$route.query.showProcess;
     }
-    this.fetchDetail()
+    this.fetchDetail();
   },
   methods: {
     /**
@@ -83,52 +156,132 @@
      */
     fetchDetail() {
       if (this.id) {
-        this.wholeLoading = true
-        caseDetail(this.id).then(response => {
-          this.caseDetail = response.data
-          this.wholeLoading = false
-          this.$refs.mapDetail.initMap(true, this.caseDetail)
-        })
+        this.wholeLoading = true;
+        caseDetail(this.id).then((response) => {
+          this.caseDetail = response.data;
+          // if (this.caseDetail.caseImage) {
+          //     const base_url = process.env.BASE_API + "/static/";
+          //     const image_ori = this.caseDetail.caseImage.split(";");
+          //     this.caseImgs = image_ori.map((item) => base_url + item);
+          //   } else {
+          //     this.caseImgs = [];
+          //   }
+          this.wholeLoading = false;
+          this.$refs.mapDetail.initMap(true, this.caseDetail);
+        });
+
+        // 通过类型判断传递内容
+        // id为caseId
+        if (this.caseType == "运维事件") {
+          // 获取返回的数据
+          this.$nextTick(() => {
+            this.processList = this.treeDataToCompressed([
+              ...process.data,
+            ]).reverse();
+          });
+          // let propsMap = {
+          //   processTitle: "processTaskName",
+          //   time: "createTime",
+          //   sender: "processAssigneeName",
+          //   incept: "processAssigneeName",
+          //   detail: "processTaskName",
+          //   nextId: "processNextAssigneeId",
+          // };
+
+          // this.$nextTick(async ()=>{
+          //   this.processList = await this.handlePropstoArray(
+          //   this.processList,
+          //   propsMap
+          // );
+          // })
+          return;
+          this.processList = this.processList.map((item) => {
+            return {
+              processTitle: item.processTaskName,
+              time: item.createTime,
+              sender: item.processAssigneeName,
+              incept: item.processAssigneeName,
+              detail: item.processTaskName,
+              nextId: item.processNextAssigneeId,
+            };
+          });
+          console.log(this.processList);
+          return;
+          // 获取事件流程详情
+          eventStepList({ caseId: this.id }).then((res) => {
+            console.log(res);
+
+            // 获取流程节点图片以及流程数组数据
+          });
+        } else if (this.caseType == "精细化管理事件") {
+        }
+        return;
       }
     },
+    handlePropstoArray(array, props) {
+      return new Promise((resolve, reject) => {
+        let jsonData = JSON.stringify(array);
+        for (const key in props) {
+          var reg = new RegExp(props[key], "g");
+          jsonData = jsonData.replace(reg, key);
+        }
+        resolve(JSON.parse(jsonData));
+      });
+    },
+    treeDataToCompressed(source) {
+      let target = [];
+      for (const i in source) {
+        target.push(source[i].info);
+        if (
+          Array.isArray(source[i].children) &&
+          source[i].children.length > 0
+        ) {
+          target = [
+            ...target,
+            ...this.treeDataToCompressed(source[i].children),
+          ];
+        }
+      }
+      return target;
+    },
     loading() {
-      this.wholeLoading = true
+      this.wholeLoading = true;
     },
     /**
      * 提交成功之后
      */
     submitSuccess() {
-      console.log('submitSuccess')
-      this.$message.success('提交成功')
-      this.showProcess = false
-      this.$route.query.showProcess = false
-      this.wholeLoading = false
-      this.fetchDetail()
-      this.$refs['caseRecord'].fetchProcessRecords()
+      console.log("submitSuccess");
+      this.$message.success("提交成功");
+      this.showProcess = false;
+      this.$route.query.showProcess = false;
+      this.wholeLoading = false;
+      this.fetchDetail();
+      this.$refs["caseRecord"].fetchProcessRecords();
     },
     /**
      * 提交失败之后
      */
     submitError() {
-      console.log('submitError')
-      this.wholeLoading = false
-    }
-  }
-}
+      console.log("submitError");
+      this.wholeLoading = false;
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-  .table-title{
-    background-color:rgba(243, 243, 243, 1);
-    height: 46px;
-    .title-header{
-      line-height:46px;
-      color: #606266;
-      font-size: 15px;
-      i{
-        margin-left: 5px;
-        margin-right: 5px;
-      }
+.table-title {
+  background-color: rgba(243, 243, 243, 1);
+  height: 46px;
+  .title-header {
+    line-height: 46px;
+    color: #606266;
+    font-size: 15px;
+    i {
+      margin-left: 5px;
+      margin-right: 5px;
     }
   }
+}
 </style>

diff --git a/package.json b/package.json
index fb32aa2..c325e45 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
     "vue-amap": "^0.5.9",
     "vue-baidu-map": "^0.21.22",
     "vue-router": "3.0.1",
+    "vue-slide-mini": "^1.0.4",
     "vuex": "3.0.1",
     "wangeditor": "^3.1.1"
   },
diff --git a/src/api/callCase.js b/src/api/callCase.js
index cd61986..9da1fc7 100644
--- a/src/api/callCase.js
+++ b/src/api/callCase.js
@@ -126,3 +126,12 @@
     }
   })
 }
+
+// 社会治理事流转步骤接口
+export function eventStepList(data) {
+  return request({
+    url: '/callcenter/api/case/eventStepList',
+    method: 'post',
+    data
+  })
+}
diff --git a/src/assets/global_images/done.png b/src/assets/global_images/done.png
new file mode 100644
index 0000000..c9a2c5e
--- /dev/null
+++ b/src/assets/global_images/done.png
Binary files differ
diff --git a/src/assets/global_images/process.png b/src/assets/global_images/process.png
new file mode 100644
index 0000000..311fe3a
--- /dev/null
+++ b/src/assets/global_images/process.png
Binary files differ
diff --git a/src/components/NomalTable/index.vue b/src/components/NomalTable/index.vue
index 55a7378..8616987 100644
--- a/src/components/NomalTable/index.vue
+++ b/src/components/NomalTable/index.vue
@@ -55,7 +55,7 @@
         </el-col>
       </el-row>
       <!-- 表格正文-->
-      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="handleSelectionChange">
+      <el-table v-loading="listLoading" :data="data" :height="height" :size="size" class="table" row-class-name="small-row-class" border @selection-change="handleSelectionChange">
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns"/>
         <!--多选选中列-->
@@ -176,7 +176,10 @@
           refresh: false // 是否需要刷新按钮
         }
       }
-    }// 表格工具配置
+    },// 表格工具配置
+    height:{
+      type:String,
+    }
   },
   data() {
     return {
diff --git a/src/components/SelectTree/singleSelect.vue b/src/components/SelectTree/singleSelect.vue
index ba15b20..3336346 100644
--- a/src/components/SelectTree/singleSelect.vue
+++ b/src/components/SelectTree/singleSelect.vue
@@ -6,7 +6,8 @@
     trigger="click"
     class="select-tree scrollbar"
     @show="onShowPopover"
-    @hide="onHidePopover">
+    @hide="onHidePopover"
+  >
     <el-tree
       ref="tree"
       :style="`min-width: ${treeWidth}`"
@@ -14,265 +15,276 @@
       :props="props"
       :expand-on-click-node="false"
       :filter-node-method="filterNode"
-      :default-expand-all="false"
+      :default-expand-all="expandAll"
       class="innerbox"
       highlight-current
       accordion
-      @node-click="onClickNode"/>
+      @node-click="onClickNode"
+    />
     <el-input
       slot="reference"
       ref="input"
       v-model="labelModel"
       :style="`width: ${width}px`"
       :size="size"
-      :class="{ 'rotate': showStatus }"
+      :class="{ rotate: showStatus }"
       :placeholder="placeholder"
       :disabled="disabled"
       clearable
-      suffix-icon="el-icon-arrow-down"/>
+      suffix-icon="el-icon-arrow-down"
+    />
   </el-popover>
 </template>
 
 <script>
-
 export default {
-  name: 'SelectTree',
+  name: "SelectTree",
+
   // 设置绑定参数
   model: {
-    prop: 'value',
-    event: 'selected'
+    prop: "value",
+    event: "selected",
   },
   props: {
+    // 是否默认展开全部
+    expandAll: {
+      type: Boolean,
+      default: false,
+    },
     // 接收绑定参数
     value: {
       type: String,
-      default: ''
+      default: "",
     },
     // 输入框宽度
     width: {
       type: String,
-      default: ''
+      default: "",
     },
     size: {
       type: String,
-      default: ''
+      default: "",
     },
     // 输入框宽度
     disabled: {
       type: Boolean,
-      default: false
+      default: false,
     },
     // 选项数据
     options: {
       type: Array,
-      required: true
+      required: true,
     },
     // 输入框占位符
     placeholder: {
       type: String,
       required: false,
-      default: '请选择'
+      default: "请选择",
     },
     // 树节点配置选项
     props: {
       type: Object,
       required: false,
       default: () => ({
-        parent: 'parentId',
-        value: 'rowGuid',
-        label: 'areaName',
-        children: 'children'
-      })
-    }
+        parent: "parentId",
+        value: "rowGuid",
+        label: "areaName",
+        children: "children",
+      }),
+    },
   },
   data() {
     return {
       // 树状菜单显示状态
       showStatus: false,
       // 菜单宽度
-      treeWidth: 'auto',
+      treeWidth: "auto",
       // 输入框显示值
-      labelModel: '',
+      labelModel: "",
       // 实际请求传值
-      valueModel: ''
-    }
+      valueModel: "",
+    };
   },
   computed: {
     // 是否为树状结构数据
     dataType() {
-      const jsonStr = JSON.stringify(this.options)
-      return jsonStr.indexOf(this.props.children) !== -1
+      const jsonStr = JSON.stringify(this.options);
+      return jsonStr.indexOf(this.props.children) !== -1;
     },
     // 若非树状结构，则转化为树状结构数据
     data() {
       // return this.dataType ? this.options : this.switchTree()
-      return this.options
-    }
+      return this.options;
+    },
   },
   watch: {
     labelModel(val) {
-      console.log('labelModel change:' + val)
+      console.log("labelModel change:" + val);
       if (!val) {
-        if (val === '') {
-          this.valueModel = ''
-          this.onCloseTree()
-          this.$emit('selected', this.valueModel)
+        if (val === "") {
+          this.valueModel = "";
+          this.onCloseTree();
+          this.$emit("selected", this.valueModel);
         }
-        this.valueModel = ''
+        this.valueModel = "";
       }
-      this.$refs.tree.filter(val)
+      this.$refs.tree.filter(val);
     },
     value(val) {
-      this.labelModel = this.queryTree(this.data, val)
-    }
+      this.labelModel = this.queryTree(this.data, val);
+    },
   },
   created() {
     // 检测输入框原有值并显示对应 label
     if (this.value) {
-      this.labelModel = this.queryTree(this.data, this.value)
+      this.labelModel = this.queryTree(this.data, this.value);
     }
     // 获取输入框宽度同步至树状菜单宽度
     this.$nextTick(() => {
-      this.treeWidth = `${(this.width || this.$refs.input.$refs.input.clientWidth) - 24}px`
-    })
+      this.treeWidth = `${
+        (this.width || this.$refs.input.$refs.input.clientWidth) - 24
+      }px`;
+    });
   },
   methods: {
     // 单击节点
     onClickNode(node) {
-      this.labelModel = node[this.props.label]
-      this.valueModel = node[this.props.value]
-      this.onCloseTree()
+      this.labelModel = node[this.props.label];
+      this.valueModel = node[this.props.value];
+      this.onCloseTree();
     },
     // 偏平数组转化为树状层级结构
     switchTree() {
-      return this.cleanChildren(this.buildTree(this.options, '0'))
+      return this.cleanChildren(this.buildTree(this.options, "0"));
     },
     // 隐藏树状菜单
     onCloseTree() {
-      this.$refs.popover.showPopper = false
+      this.$refs.popover.showPopper = false;
     },
     // 显示时触发
     onShowPopover() {
-      this.showStatus = true
-      this.$refs.tree.filter(false)
+      this.showStatus = true;
+      this.$refs.tree.filter(false);
     },
     // 隐藏时触发
     onHidePopover() {
-      this.showStatus = false
-      console.log('onHidePopover:' + this.valueModel)
+      this.showStatus = false;
+      console.log("onHidePopover:" + this.valueModel);
       // if (this.valueModel !== '') {
       //   this.$emit('selected', this.valueModel)
       // }
-      this.$emit('selected', this.valueModel)
+      this.$emit("selected", this.valueModel);
     },
     // 树节点过滤方法
     filterNode(query, data) {
-      if (!query) return true
-      return data[this.props.label].indexOf(query) !== -1
+      if (!query) return true;
+      return data[this.props.label].indexOf(query) !== -1;
     },
     // 搜索树状数据中的 ID
     queryTree(tree, id) {
-      let stark = []
-      stark = stark.concat(tree)
+      let stark = [];
+      stark = stark.concat(tree);
       while (stark.length) {
-        const temp = stark.shift()
+        const temp = stark.shift();
         if (temp[this.props.children]) {
-          stark = stark.concat(temp[this.props.children])
+          stark = stark.concat(temp[this.props.children]);
         }
         if (temp[this.props.value] === id) {
-          return temp[this.props.label]
+          return temp[this.props.label];
         }
       }
-      return ''
+      return "";
     },
     // 将一维的扁平数组转换为多层级对象
-    buildTree(data, id = '0') {
+    buildTree(data, id = "0") {
       const fa = (parentId) => {
-        console.log('parentId:' + parentId)
-        const temp = []
+        console.log("parentId:" + parentId);
+        const temp = [];
         for (let i = 0; i < data.length; i++) {
-          const n = data[i]
+          const n = data[i];
           if (n[this.props.parent] === parentId) {
-            n.children = fa(n.code)
-            temp.push(n)
+            n.children = fa(n.code);
+            temp.push(n);
           }
         }
-        return temp
-      }
-      return fa(id)
+        return temp;
+      };
+      return fa(id);
     },
     // 清除空 children项
     cleanChildren(data) {
       const fa = (list) => {
         list.map((e) => {
           if (e.children.length) {
-            fa(e.children)
+            fa(e.children);
           } else {
-            delete e.children
+            delete e.children;
           }
-          return e
-        })
-        return list
-      }
-      return fa(data)
-    }
-  }
-}
+          return e;
+        });
+        return list;
+      };
+      return fa(data);
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-  .scrollbar {
-    overflow-y: scroll;
-    &::-webkit-scrollbar {
-      z-index: 11;
-      width: 6px;
-    }
-    &::-webkit-scrollbar-track,
-    &::-webkit-scrollbar-corner {
-      background: #fff;
-    }
-    &::-webkit-scrollbar-thumb {
-      // border-radius: 5px;
-      width: 6px;
-      background-color: #eee;
-      &:hover {
-        background-color: #ccc;
-      }
-    }
-    &::-webkit-scrollbar-track-piece {
-      background: #fff;
-      width: 6px;
+.scrollbar {
+  overflow-y: scroll;
+  &::-webkit-scrollbar {
+    z-index: 11;
+    width: 6px;
+  }
+  &::-webkit-scrollbar-track,
+  &::-webkit-scrollbar-corner {
+    background: #fff;
+  }
+  &::-webkit-scrollbar-thumb {
+    // border-radius: 5px;
+    width: 6px;
+    background-color: #eee;
+    &:hover {
+      background-color: #ccc;
     }
   }
-  .select-tree .el-tree {
-    max-height: 350px;
+  &::-webkit-scrollbar-track-piece {
+    background: #fff;
+    width: 6px;
   }
-  .select-tree .el-input.el-input--suffix {
-    cursor: pointer;
-  }
-  .select-tree .el-input.el-input--suffix.rotate .el-input__suffix {
-    transform: rotate(180deg);
-  }
+}
+.select-tree .el-tree {
+  max-height: 350px;
+}
+.select-tree .el-input.el-input--suffix {
+  cursor: pointer;
+}
+.select-tree .el-input.el-input--suffix.rotate .el-input__suffix {
+  transform: rotate(180deg);
+}
 
-  .innerbox::-webkit-scrollbar {/*滚动条整体样式*/
-    width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
-    height: 4px;
-  }
-  .innerbox::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
-    border-radius: 5px;
-    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
-    background: rgba(0,0,0,0.2);
-  }
-  .innerbox::-webkit-scrollbar-track { /*滚动条里面轨道*/
-    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
-    border-radius: 0;
-    background: rgba(0, 0, 0, 0.1);
-  }
+.innerbox::-webkit-scrollbar {
+  /*滚动条整体样式*/
+  width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
+  height: 4px;
+}
+.innerbox::-webkit-scrollbar-thumb {
+  /*滚动条里面小方块*/
+  border-radius: 5px;
+  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  background: rgba(0, 0, 0, 0.2);
+}
+.innerbox::-webkit-scrollbar-track {
+  /*滚动条里面轨道*/
+  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  border-radius: 0;
+  background: rgba(0, 0, 0, 0.1);
+}
 </style>
 <style lang="scss">
-  .el-popover{
-    max-height: 400px;
-    overflow: auto;
-  }
-
+.el-popover {
+  max-height: 400px;
+  overflow: auto;
+}
 </style>
diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss
index 65abe46..8236420 100644
--- a/src/styles/sidebar.scss
+++ b/src/styles/sidebar.scss
@@ -212,3 +212,8 @@
 .is-active>.light-line{
   background-color: $menuActiveText
 }
+
+.el-image-viewer__close{
+  color: #fff !important;
+  font-size: 52px !important;
+}
\ No newline at end of file
diff --git a/src/views/caseManage/caseCommon/SwiperImg.vue b/src/views/caseManage/caseCommon/SwiperImg.vue
new file mode 100644
index 0000000..4ff3fd2
--- /dev/null
+++ b/src/views/caseManage/caseCommon/SwiperImg.vue
@@ -0,0 +1,88 @@
+<template>
+	<div class="swiper" @mouseover="overHd" @mouseout="auto">
+		<div class="swiper-item" v-for="(item,ind) in gallery" :key="item" v-show="ind==index">
+			<img :src="item" width="100%"  style="width: 300px; height: 450px; overflow: hidden">
+		</div>
+		<div class="thumbs" v-if="gallery.length > 1">
+			<span class="thumb" :class="{'active' :item==index+1}" v-for="item in gallery.length" :key='item'
+				@click="index=item-1">{{item}}</span>
+		</div>
+	</div>
+</template>
+ 
+<script>
+	export default {
+		props: {
+			gallery: {
+				type: Array,
+				default () {
+					return []
+				}
+			}
+		},
+		data() {
+			return {
+				//默认显示 
+				index: 0,
+				stopID: null,
+			}
+		},
+		// 当组件挂载完毕 执行自动播放
+		created() {
+			this.auto();
+		},
+		beforeDestroy(){
+			this.overHd();
+		},
+		methods: {
+			//鼠标一开  auto自动执行
+			auto() {
+				this.stopID = setInterval(() => {
+					this.index++;
+					this.check();
+				}, 5000)
+			},
+			overHd() {
+				clearInterval(this.stopID);
+			},
+			//检查边界
+			check() {
+				if (this.index == this.gallery.length) {
+					this.index = 0;
+				}
+			}
+		}
+	}
+</script>
+ 
+<style scoped="scoped">
+	.swiper {
+		position: relative;
+	}
+ 
+	.swiper .thumbs {
+		position: absolute;
+		bottom: 10px;
+		width: 100%;
+		text-align: center;
+	}
+ 
+	.thumb {
+		width: 10px;
+		height: 10px;
+		display: inline-block;
+		border-radius: 15px;
+		text-indent: 9999em;
+		margin: 0 5px;
+		background-color: #fff;
+	}
+ 
+	.thumb:hover {
+		cursor: pointer;
+		background-color: #42b983;
+	}
+	.active {
+		background-color: #42b983;
+ 
+	}
+</style>
\ No newline at end of file
diff --git a/src/views/caseManage/caseCommon/caseFormProcess.vue b/src/views/caseManage/caseCommon/caseFormProcess.vue
index f8a9666..e6a6446 100644
--- a/src/views/caseManage/caseCommon/caseFormProcess.vue
+++ b/src/views/caseManage/caseCommon/caseFormProcess.vue
@@ -4,138 +4,183 @@
       <el-row :gutter="20">
         <el-col :span="6">
           <el-form-item label="事件编号">
-            <el-input :value="caseForm.caseId" size="small"/>
+            <el-input :value="caseForm.caseId" size="small" />
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="来电时间">
-            <el-input :value="caseForm.callTime" size="small"/>
+            <el-input :value="caseForm.callTime" size="small" />
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="联系人">
-            <el-input :value="caseForm.reporterName" size="small"/>
+            <el-input :value="caseForm.reporterName" size="small" />
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="联系电话">
-            <el-input :value="caseForm.reporterPhone" size="small"/>
+            <el-input :value="caseForm.reporterPhone" size="small" />
           </el-form-item>
         </el-col>
       </el-row>
       <el-row :gutter="20">
         <el-col :span="6">
           <el-form-item label="事件来源">
-            <el-input :value="caseForm.sourceName" size="small"/>
+            <el-input :value="caseForm.sourceName" size="small" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="事件类型">
+            <el-input :value="caseForm.sourceType" size="small" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="精细化平台事件编号">
+            <el-input :value="caseForm.sourceNumber" size="small" />
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="事件分类">
-            <el-input :value="caseForm.eorcName" size="small"/>
+            <el-input :value="caseForm.eorcName" size="small" />
             <!--<el-input :value="caseForm.eorcName + '/' + caseForm.caseTypeName" size="small"/>-->
             <!--<el-input :value="caseForm.eorcName + '/' + caseForm.caseTypeName + '/' + caseForm.caseDetailTypeName" size="small"/>-->
           </el-form-item>
         </el-col>
-        <el-col :span="6">
-          <el-form-item label="紧急程度">
-            <el-input :value="caseForm.caseLevelName" size="small"/>
-          </el-form-item>
-        </el-col>
+
         <el-col :span="6">
           <el-form-item label="限办日期">
-            <el-input :value="caseForm.limitedTime" size="small"/>
+            <el-input :value="caseForm.limitedTime" size="small" />
           </el-form-item>
         </el-col>
-      </el-row>
-      <el-row :gutter="20">
         <el-col :span="6">
           <el-form-item label="事件地址">
             <!--<el-input :value="caseForm.areaName + '-' + caseForm.streetName + '-' + caseForm.communityName + '-' + caseForm.fieldintro" size="small"/>-->
-            <el-input :value="address" size="small"/>
+            <el-input :value="address" size="small" />
           </el-form-item>
         </el-col>
         <el-col :span="6">
-          <el-form-item label="事件辖区">
-            <el-input :value="caseForm.areaName" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="典型案例">
-            <el-input :value="caseForm.isTypical === '1' ? '是' : '否'" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="要情">
-            <el-input :value="caseForm.isImportant === '1' ? '是' : '否'" size="small"/>
+          <!-- <el-form-item label="紧急程度"> -->
+          <el-form-item label="事件状态">
+            <el-input :value="caseForm.caseLevelName" size="small" />
           </el-form-item>
         </el-col>
       </el-row>
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item label="当前事件状态">
-            <el-input :value="caseForm.stateName" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="当前处理方式">
-            <el-input :value="caseForm.caseStateName" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="需要回访">
-            <el-input :value="caseForm.isReturnVisit === '1' ? '是' : '否'" size="small"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="受理录音">
-            <el-input :value="caseForm.sound" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-button type="text" @click="playSound(caseForm.sound)">播放录音</el-button>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="回访录音">
-            <el-input :value="caseForm.satisfactionSound" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-button type="text" @click="playSound(caseForm.satisfactionSound)">播放录音</el-button>
-        <el-popover
-          v-if="caseForm.caseState === 5"
-          placement="top"
-          width="180"
-          v-model="popoverVisible">
-          <div style="text-align:center; margin: 0">
-            <el-button size="mini"  @click="revisit('')">本地号码</el-button>
-            <el-button type="primary" size="mini"  @click="revisit('0')">外地号码</el-button>
-          </div>
-          <el-button slot="reference" type="text">回访拨号</el-button>
-        </el-popover>
-      </el-row>
-      <el-row>
-        <el-col :span="24">
-          <el-form-item label="事件标题">
-            <el-input :value="caseForm.title" size="small"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row>
-        <el-col :span="24">
-          <el-form-item label="事件内容">
-            <el-input :value="caseForm.description" size="small"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row v-show="this.caseImage.length>0">
-        <el-form-item label="事件图片">
-          <!-- 图片展示 -->
-          <div class="image-container">
-            <el-image v-for="img in caseImage" :key="img" :src="img" fit="fill" class="case-image" :preview-src-list="caseImage"/>
-          </div>
-        </el-form-item>
-      </el-row>
+      <el-collapse v-model="activeName" accordion>
+        <el-collapse-item name="1">
+          <template slot="title">
+            <span class="collapse-title">更多信息</span>
+          </template>
+          <el-row :gutter="20">
+            <el-col :span="6">
+              <el-form-item label="事件辖区">
+                <el-input :value="caseForm.areaName" size="small" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="典型案例">
+                <el-input
+                  :value="caseForm.isTypical === '1' ? '是' : '否'"
+                  size="small"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="要情">
+                <el-input
+                  :value="caseForm.isImportant === '1' ? '是' : '否'"
+                  size="small"
+                />
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <el-row :gutter="20">
+            <el-col :span="6">
+              <el-form-item label="当前事件状态">
+                <el-input :value="caseForm.stateName" size="small" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="当前处理方式">
+                <el-input :value="caseForm.caseStateName" size="small" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="需要回访">
+                <el-input
+                  :value="caseForm.isReturnVisit === '1' ? '是' : '否'"
+                  size="small"
+                />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <el-form-item label="受理录音">
+                <el-input :value="caseForm.sound" size="small" />
+              </el-form-item>
+            </el-col>
+            <el-button type="text" @click="playSound(caseForm.sound)"
+              >播放录音</el-button
+            >
+          </el-row>
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <el-form-item label="回访录音">
+                <el-input :value="caseForm.satisfactionSound" size="small" />
+              </el-form-item>
+            </el-col>
+            <el-button
+              type="text"
+              @click="playSound(caseForm.satisfactionSound)"
+              >播放录音</el-button
+            >
+            <el-popover
+              v-if="caseForm.caseState === 5"
+              placement="top"
+              width="180"
+              v-model="popoverVisible"
+            >
+              <div style="text-align: center; margin: 0">
+                <el-button size="mini" @click="revisit('')">本地号码</el-button>
+                <el-button type="primary" size="mini" @click="revisit('0')"
+                  >外地号码</el-button
+                >
+              </div>
+              <el-button slot="reference" type="text">回访拨号</el-button>
+            </el-popover>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="事件标题">
+                <el-input :value="caseForm.title" size="small" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="事件内容">
+                <el-input :value="caseForm.description" size="small" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row v-show="this.caseImage.length > 0">
+            <el-form-item label="事件图片">
+              <!-- 图片展示 -->
+              <div class="image-container">
+                <el-image
+                  v-for="img in caseImage"
+                  :key="img"
+                  :src="img"
+                  fit="fill"
+                  class="case-image"
+                  :preview-src-list="caseImage"
+                />
+              </div>
+            </el-form-item>
+          </el-row>
+        </el-collapse-item>
+      </el-collapse>
       <!--<el-row>-->
       <!--<el-col :span="24">-->
       <!--<el-form-item label="备注信息">-->
@@ -151,98 +196,128 @@
       width="600px"
       append-to-body
       custom-class="sound-dialog"
-      @close="closeSound">
-      <audio-player ref="adplayer" :the-url="sound.url" :the-control-ist="sound.controlList"/>
+      @close="closeSound"
+    >
+      <audio-player
+        ref="adplayer"
+        :the-url="sound.url"
+        :the-control-ist="sound.controlList"
+      />
     </el-dialog>
   </div>
 </template>
 
 <script>
 // import { caseDetail } from '@/api/callCase'
-import { getSoundName } from '@/api/sound'
-import AudioPlayer from '@/components/AudioPlayer/AudioPlayer'
+import { getSoundName } from "@/api/sound";
+import AudioPlayer from "@/components/AudioPlayer/AudioPlayer";
 
 export default {
-  name: 'CaseFormProcess',
+  name: "CaseFormProcess",
   components: { AudioPlayer },
   props: {
     id: {
       type: String,
-      default: ''
+      default: "",
     }, // 事件id（主键id）
     caseForm: {
       type: Object,
       default() {
-        return {}
-      }
-    }
+        return {};
+      },
+    },
   },
   data() {
     return {
+      activeName: 1,
       sound: {
-        url: '',
-        controlList: 'noDownload noSpeed onlyOnePlaying'
+        url: "",
+        controlList: "noDownload noSpeed onlyOnePlaying",
       },
       popoverVisible: false, // 选择本地外地呼叫的弹窗
-      soundShow: false // 显示音频弹窗
-    }
+      soundShow: false, // 显示音频弹窗
+    };
   },
   computed: {
     address() {
-      const address_ori = [this.caseForm.areaName, this.caseForm.streetName, this.caseForm.communityName, this.caseForm.fieldintro]
-      const address = address_ori.filter(item => item && item.length > 0)
-      return address.join('-')
+      const address_ori = [
+        this.caseForm.areaName,
+        this.caseForm.streetName,
+        this.caseForm.communityName,
+        this.caseForm.fieldintro,
+      ];
+      const address = address_ori.filter((item) => item && item.length > 0);
+      return address.join("-");
     },
-    caseImage(){
-      if(this.caseForm.caseImage){
-        const base_url = process.env.BASE_API + '/static/'
-        const image_ori = this.caseForm.caseImage.split(';')
-        const imageList = image_ori.map(item=>base_url+ item)
-        return imageList
-      }else{
-        return []
+    caseImage() {
+      if (this.caseForm.caseImage) {
+        const base_url = process.env.BASE_API + "/static/";
+        const image_ori = this.caseForm.caseImage.split(";");
+        const imageList = image_ori.map((item) => base_url + item);
+        return imageList;
+      } else {
+        return [];
       }
-    }
+    },
   },
   methods: {
     // 播放录音
     playSound(sound) {
       if (sound) {
-        getSoundName(sound).then(res => {
-          const recordName = res.data
+        getSoundName(sound).then((res) => {
+          const recordName = res.data;
           if (recordName) {
-            this.sound.url = recordName
-            this.soundShow = true
+            this.sound.url = recordName;
+            this.soundShow = true;
           } else {
-            this.$message.warning('无录音')
+            this.$message.warning("无录音");
           }
-        })
+        });
       } else {
-        this.$message.warning('无录音')
+        this.$message.warning("无录音");
       }
     },
     // 关闭播放弹窗
     closeSound() {
-      this.$refs.adplayer.pausePlay()
+      this.$refs.adplayer.pausePlay();
     },
     // 拨打回访电话
     revisit(middleString) {
       // middleString为空或0，分别表示本地或外地
-      const tel = '9' + middleString + this.caseForm.reporterPhone
-      this.$store.dispatch('dial', tel)
-      this.popoverVisible = false
-    }
-  }
-}
+      const tel = "9" + middleString + this.caseForm.reporterPhone;
+      this.$store.dispatch("dial", tel);
+      this.popoverVisible = false;
+    },
+  },
+};
 </script>
 <style lang="scss" scoped>
-  .image-container{
-    display: flex;
-    justify-content: flex-start;
-    .case-image{
-      width:100px;
-      height:100px;
-      margin-right: 10px;
-    }
+.image-container {
+  display: flex;
+  justify-content: flex-start;
+  .case-image {
+    width: 100px;
+    height: 100px;
+    margin-right: 10px;
   }
+}
+.collapse-title {
+  font-size: 14px;
+  color: #606266;
+  font-weight: 800;
+  position: absolute;
+  right: 80px;
+  margin-top: -85px;
+}
+/deep/.el-collapse-item__arrow{
+  margin-top: -85px;
+}
+/deep/.el-collapse {
+  border: 0;
+}
+/deep/.el-collapse-item__header {
+  justify-content: end;
+  border: 0;
+  height: 0;
+}
 </style>
diff --git a/src/views/caseManage/caseCommon/caseFormRead.vue b/src/views/caseManage/caseCommon/caseFormRead.vue
index 897023a..7fa39af 100644
--- a/src/views/caseManage/caseCommon/caseFormRead.vue
+++ b/src/views/caseManage/caseCommon/caseFormRead.vue
@@ -4,134 +4,173 @@
       <el-row :gutter="20">
         <el-col :span="6">
           <el-form-item label="事件编号">
-            <el-input :value="caseForm.caseId" size="small"/>
+            <el-input :value="caseForm.caseId" size="small" />
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="来电时间">
-            <el-input :value="caseForm.callTime" size="small"/>
+            <el-input :value="caseForm.callTime" size="small" />
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="联系人">
-            <el-input :value="caseForm.reporterName" size="small"/>
+            <el-input :value="caseForm.reporterName" size="small" />
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="联系电话">
-            <el-input :value="caseForm.reporterPhone" size="small"/>
+            <el-input :value="caseForm.reporterPhone" size="small" />
           </el-form-item>
         </el-col>
       </el-row>
       <el-row :gutter="20">
         <el-col :span="6">
           <el-form-item label="事件来源">
-            <el-input :value="caseForm.sourceName" size="small"/>
+            <el-input :value="caseForm.sourceName" size="small" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="事件类型">
+            <el-input :value="caseForm.sourceType" size="small" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="精细化平台事件编号">
+            <el-input :value="caseForm.sourceNumber" size="small" />
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="事件分类">
-            <el-input :value="caseForm.eorcName" size="small"/>
+            <el-input :value="caseForm.eorcName" size="small" />
             <!--<el-input :value="caseForm.eorcName + '/' + caseForm.caseTypeName" size="small"/>-->
             <!--<el-input :value="caseForm.eorcName + '/' + caseForm.caseTypeName + '/' + caseForm.caseDetailTypeName" size="small"/>-->
           </el-form-item>
         </el-col>
-        <el-col :span="6">
-          <el-form-item label="紧急程度">
-            <el-input :value="caseForm.caseLevelName" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="限办日期">
-            <el-input :value="caseForm.limitedTime" size="small"/>
-          </el-form-item>
-        </el-col>
       </el-row>
       <el-row :gutter="20">
         <el-col :span="6">
+          <el-form-item label="限办日期">
+            <el-input :value="caseForm.limitedTime" size="small" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
           <el-form-item label="事件地址">
             <!--<el-input :value="caseForm.areaName + '-' + caseForm.streetName + '-' + caseForm.communityName + '-' + caseForm.fieldintro" size="small"/>-->
-            <el-input :value="address" size="small"/>
+            <el-input :value="address" size="small" />
           </el-form-item>
         </el-col>
         <el-col :span="6">
-          <el-form-item label="事件辖区">
-            <el-input :value="caseForm.areaName" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="典型案例">
-            <el-input :value="caseForm.isTypical === '1' ? '是' : '否'" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="要情">
-            <el-input :value="caseForm.isImportant === '1' ? '是' : '否'" size="small"/>
+          <el-form-item label="事件状态">
+            <el-input :value="caseForm.caseLevelName" size="small" />
           </el-form-item>
         </el-col>
       </el-row>
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item label="当前事件状态">
-            <el-input :value="caseForm.stateName" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="当前处理方式">
-            <el-input :value="caseForm.caseStateName" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="需要回访">
-            <el-input :value="caseForm.isReturnVisit === '1' ? '是' : '否'" size="small"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row v-if="caseForm.sound" :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="受理录音">
-            <el-input :value="caseForm.sound" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-button type="text" @click="playSound(caseForm.sound)">播放录音</el-button>
-      </el-row>
-      <el-row v-if="caseForm.satisfactionSound" :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="回访录音">
-            <el-input :value="caseForm.satisfactionSound" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-button type="text" @click="playSound(caseForm.satisfactionSound)">播放录音</el-button>
-      </el-row>
-      <el-row>
-        <el-col :span="24">
-          <el-form-item label="事件标题">
-            <el-input :value="caseForm.title" size="small"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row>
-        <el-col :span="24">
-          <el-form-item label="事件内容">
-            <el-input :value="caseForm.description" size="small"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row v-show="this.caseImage.length>0">
-        <el-form-item label="事件图片">
-        <!-- 图片展示 -->
-        <div class="image-container">
-          <el-image v-for="img in caseImage" :key="img" :src="img" fit="fill" class="case-image" :preview-src-list="caseImage"/>
-        </div>
-        </el-form-item>
-      </el-row>
-      <!--<el-row>-->
-      <!--<el-col :span="24">-->
-      <!--<el-form-item label="备注信息">-->
-      <!--<el-input :value="caseForm.remarks" size="small"/>-->
-      <!--</el-form-item>-->
-      <!--</el-col>-->
-      <!--</el-row>-->
+      <el-collapse v-model="activeName" accordion>
+        <el-collapse-item name="1">
+          <template slot="title">
+            <span class="collapse-title">更多信息</span>
+          </template>
+          <el-row :gutter="20">
+            <el-col :span="6">
+              <el-form-item label="事件辖区">
+                <el-input :value="caseForm.areaName" size="small" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="典型案例">
+                <el-input
+                  :value="caseForm.isTypical === '1' ? '是' : '否'"
+                  size="small"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="要情">
+                <el-input
+                  :value="caseForm.isImportant === '1' ? '是' : '否'"
+                  size="small"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="当前事件状态">
+                <el-input :value="caseForm.stateName" size="small" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="当前处理方式">
+                <el-input :value="caseForm.caseStateName" size="small" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="需要回访">
+                <el-input
+                  :value="caseForm.isReturnVisit === '1' ? '是' : '否'"
+                  size="small"
+                />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row v-if="caseForm.sound" :gutter="20">
+            <el-col :span="12">
+              <el-form-item label="受理录音">
+                <el-input :value="caseForm.sound" size="small" />
+              </el-form-item>
+            </el-col>
+            <el-button type="text" @click="playSound(caseForm.sound)"
+              >播放录音</el-button
+            >
+          </el-row>
+          <el-row v-if="caseForm.satisfactionSound" :gutter="20">
+            <el-col :span="12">
+              <el-form-item label="回访录音">
+                <el-input :value="caseForm.satisfactionSound" size="small" />
+              </el-form-item>
+            </el-col>
+            <el-button
+              type="text"
+              @click="playSound(caseForm.satisfactionSound)"
+              >播放录音</el-button
+            >
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="事件标题">
+                <el-input :value="caseForm.title" size="small" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="事件内容">
+                <el-input :value="caseForm.description" size="small" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row v-show="this.caseImage.length > 0">
+            <el-form-item label="事件图片">
+              <!-- 图片展示 -->
+              <div class="image-container">
+                <el-image
+                  v-for="img in caseImage"
+                  :key="img"
+                  :src="img"
+                  fit="fill"
+                  class="case-image"
+                  :preview-src-list="caseImage"
+                />
+              </div>
+            </el-form-item>
+          </el-row>
+          <!--<el-row>-->
+          <!--<el-col :span="24">-->
+          <!--<el-form-item label="备注信息">-->
+          <!--<el-input :value="caseForm.remarks" size="small"/>-->
+          <!--</el-form-item>-->
+          <!--</el-col>-->
+          <!--</el-row>-->
+        </el-collapse-item>
+      </el-collapse>
     </el-form>
     <!--播放音频弹窗-->
     <el-dialog
@@ -140,90 +179,120 @@
       width="600px"
       append-to-body
       custom-class="sound-dialog"
-      @close="closeSound">
-      <audio-player ref="adplayer" :the-url="sound.url" :the-control-ist="sound.controlList"/>
+      @close="closeSound"
+    >
+      <audio-player
+        ref="adplayer"
+        :the-url="sound.url"
+        :the-control-ist="sound.controlList"
+      />
     </el-dialog>
   </div>
 </template>
 
 <script>
 // import { caseDetail } from '@/api/callCase'
-import { getSoundName } from '@/api/sound'
-import AudioPlayer from '@/components/AudioPlayer/AudioPlayer'
+import { getSoundName } from "@/api/sound";
+import AudioPlayer from "@/components/AudioPlayer/AudioPlayer";
 
 export default {
-  name: 'CaseFormRead',
+  name: "CaseFormRead",
   components: { AudioPlayer },
   props: {
     id: {
       type: String,
-      default: ''
+      default: "",
     }, // 事件id（主键id）
     caseForm: {
       type: Object,
       default() {
-        return {}
-      }
-    }
+        return {};
+      },
+    },
   },
   data() {
     return {
+      activeName: 1,
       sound: {
-        url: '',
-        controlList: 'noDownload noSpeed onlyOnePlaying'
+        url: "",
+        controlList: "noDownload noSpeed onlyOnePlaying",
       },
-      soundShow: false // 显示音频弹窗
-    }
+      soundShow: false, // 显示音频弹窗
+    };
   },
   computed: {
     address() {
-      const address_ori = [this.caseForm.areaName, this.caseForm.streetName, this.caseForm.communityName, this.caseForm.fieldintro]
-      const address = address_ori.filter(item => item && item.length > 0)
-      return address.join('-')
+      const address_ori = [
+        this.caseForm.areaName,
+        this.caseForm.streetName,
+        this.caseForm.communityName,
+        this.caseForm.fieldintro,
+      ];
+      const address = address_ori.filter((item) => item && item.length > 0);
+      return address.join("-");
     },
-    caseImage(){
-      if(this.caseForm.caseImage){
-        const base_url = process.env.BASE_API + '/static/'
-        const image_ori = this.caseForm.caseImage.split(';')
-        const imageList = image_ori.map(item=>base_url+ item)
-        return imageList
-      }else{
-        return []
+    caseImage() {
+      if (this.caseForm.caseImage) {
+        const base_url = process.env.BASE_API + "/static/";
+        const image_ori = this.caseForm.caseImage.split(";");
+        const imageList = image_ori.map((item) => base_url + item);
+        return imageList;
+      } else {
+        return [];
       }
-    }
+    },
   },
   methods: {
     // 播放录音
     playSound(sound) {
       if (sound) {
-        getSoundName(sound).then(res => {
-          const recordName = res.data
+        getSoundName(sound).then((res) => {
+          const recordName = res.data;
           if (recordName) {
-            this.sound.url = recordName
-            this.soundShow = true
+            this.sound.url = recordName;
+            this.soundShow = true;
           } else {
-            this.$message.warning('无录音')
+            this.$message.warning("无录音");
           }
-        })
+        });
       } else {
-        this.$message.warning('无录音')
+        this.$message.warning("无录音");
       }
     },
     // 关闭播放弹窗
     closeSound() {
-      this.$refs.adplayer.pausePlay()
-    }
-  }
-}
+      this.$refs.adplayer.pausePlay();
+    },
+  },
+};
 </script>
 <style lang="scss" scoped>
-  .image-container{
-    display: flex;
-    justify-content: flex-start;
-    .case-image{
-      width:100px;
-      height:100px;
-      margin-right: 10px;
-    }
+.image-container {
+  display: flex;
+  justify-content: flex-start;
+  .case-image {
+    width: 100px;
+    height: 100px;
+    margin-right: 10px;
   }
+}
+.collapse-title {
+  font-size: 14px;
+  color: #606266;
+  font-weight: 800;
+  position: absolute;
+  right: 80px;
+  margin-top: -85px;
+}
+/deep/.el-collapse-item__arrow {
+  margin-top: -85px;
+}
+/deep/.el-collapse {
+  border: 0;
+}
+/deep/.el-collapse-item__header {
+  justify-content: end;
+  border: 0;
+  height: 0;
+}
 </style>
diff --git a/src/views/caseManage/caseCommon/caseImgShow.vue b/src/views/caseManage/caseCommon/caseImgShow.vue
new file mode 100644
index 0000000..c6c911d
--- /dev/null
+++ b/src/views/caseManage/caseCommon/caseImgShow.vue
@@ -0,0 +1,42 @@
+<template>
+  <SwiperImg
+    v-if="imgs.length > 0"
+    style="width: 300px; height: 450px; overflow: hidden"
+    :gallery="imgs"
+  />
+  <el-image v-else>
+    <div slot="error" class="image-slot">
+      暂无图片
+    </div>
+  </el-image>
+</template>
+
+<script>
+import SwiperImg from "./SwiperImg.vue";
+export default {
+  components: {
+    SwiperImg,
+  },
+  props: {
+    imgs: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.el-image {
+  margin-top: 3px;
+  width: 300px;
+  height: 450px;
+  line-height: 450px;
+  overflow: hidden;
+  text-align: center;
+  background: #f5f7fa;
+  color: #909399;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/caseManage/caseCommon/caseProcessTable.vue b/src/views/caseManage/caseCommon/caseProcessTable.vue
new file mode 100644
index 0000000..4c54b7f
--- /dev/null
+++ b/src/views/caseManage/caseCommon/caseProcessTable.vue
@@ -0,0 +1,423 @@
+<template>
+  <div class="case-wrap">
+      {{showAll}}
+      {{listData}}
+    <div class="showAllDetail">
+      <el-switch
+        v-model="showAll"
+        active-color="#13ce66"
+        active-text="展开全部信息"
+      >
+      </el-switch>
+    </div>
+    <div class="moreDetail" v-show="!showAll">
+      <!-- 两条数据显示 -->
+      <!-- <div class="step-wrap" style="display:none">
+        <div class="before line">
+          <div class="icon"></div>
+          <div class="title">
+            {{ detailObj.end.processTitle }} &nbsp;&nbsp;&nbsp;&nbsp;
+            <span>{{ detailObj.end.time }}</span>
+          </div>
+          <div class="content">
+            <div class="left">
+              <p>发送人:{{ detailObj.end.sender }}</p>
+              <p>接收人:{{ detailObj.end.sender }}</p>
+              <p>处置详情:{{ detailObj.end.processTitle }}</p>
+            </div>
+            <div class="right">
+              <div class="imgs-wrap">
+                <el-image
+                  v-for="img in detailObj.end.imgs"
+                  :key="img"
+                  :src="img"
+                  class="zoom"
+                  fit="fill"
+                  :preview-src-list="caseImage(img)"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="after">
+          <div class="icon"></div>
+          <div class="title">
+            {{ detailObj.end.processTitle }} &nbsp;&nbsp;&nbsp;&nbsp;
+            <span>{{ detailObj.end.time }}</span>
+          </div>
+          <div class="content">
+            <div class="left">
+              <p>发送人:{{ detailObj.end.sender }}</p>
+              <p>接收人:{{ detailObj.end.sender }}</p>
+              <p>处置详情:{{ detailObj.end.processTitle }}</p>
+            </div>
+            <div class="right">
+              <div class="imgs-wrap">
+                <el-image
+                  v-for="img in detailObj.end.imgs"
+                  :key="img"
+                  :src="img"
+                  class="zoom"
+                  fit="fill"
+                  :preview-src-list="caseImage(img)"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div> -->
+        <div class="step-more-wrap">
+        <div class="detail-wrap" v-for="(item,index) in tempList" :Key="index">
+          <div class="leftLine" v-if="index != tempList.length-1"></div>
+          <div class="title">
+          <div v-if="item.nextId" class="done"></div>
+          <div v-else class="process"></div>
+            {{ item.processTitle }} &nbsp;&nbsp;&nbsp;&nbsp;
+            <span>{{ item.time }}</span>
+          </div>
+          <div class="content">
+            <div class="left">
+              <p>发送人:{{ item.sender }}</p>
+              <p>接收人:{{ item.sender }}</p>
+              <p>处置详情:{{item.processTitle }}</p>
+            </div>
+            <div class="right">
+              <div class="imgs-wrap">
+                <el-image
+                  v-for="img in item.imgs"
+                  :key="img"
+                  :src="img"
+                  class="zoom"
+                  fit="fill"
+                  :preview-src-list="caseImage(img)"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="moreDetail">
+      <div class="step-more-wrap" v-show="showAll">
+        <div class="detail-wrap" v-for="(item,index) in listData" :Key="index">
+          <div class="leftLine" v-if="index != listData.length-1"></div>
+          <div class="title">
+          <div v-if="item.nextId" class="done"></div>
+          <div v-else class="process"></div>
+            {{ item.processTitle }} &nbsp;&nbsp;&nbsp;&nbsp;
+            <span>{{ item.time }}</span>
+          </div>
+          <div class="content">
+            <div class="left">
+              <p>发送人:{{ item.sender }}</p>
+              <p>接收人:{{ item.sender }}</p>
+              <p :title="item.processTitle">处置详情:{{item.processTitle }}</p>
+            </div>
+            <div class="right">
+              <div class="imgs-wrap">
+                <el-image
+                  v-for="img in item.imgs"
+                  :key="img"
+                  :src="img"
+                  class="zoom"
+                  fit="fill"
+                  :preview-src-list="caseImage(img)"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    list: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      showAll: false,
+      photoVisible: false,
+      bigImgUrl: "",
+      detailObj: {
+        start: {},
+        end: {},
+      },
+      imgs: [
+        "https://t7.baidu.com/it/u=1742010762,3975931984&fm=193&f=GIF",
+        "https://t7.baidu.com/it/u=1302518827,2012573433&fm=193&f=GIF",
+        "https://t7.baidu.com/it/u=1216634532,1327384749&fm=193&f=GIF",
+      ],
+      listData: [], // 全部数据
+      tempList: [], // 首尾数据
+    };
+  },
+  watch:{
+    list(val){
+      // alert(val)
+      console.log(val)
+    }
+  },
+  created() {
+          // alert(this.list)
+    // this.listData = this.treeDataToCompressed(this.list).reverse();
+      // 处理之后的数据 获取首尾数据
+    this.listData = this.list;
+    this.tempList = [this.listData[0],this.listData.at(-1)];
+    this.listData = this.listData.map((item) => {
+      item.imgs = this.imgs;
+      return item; 
+    });
+  },
+  methods: {
+    showBigImage(e) {
+      //点击图片函数，点击后，把photoVisible设置成true
+      if (e != "") {
+        this.photoVisible = true;
+        this.bigImgUrl = e.currentTarget.src;
+      }
+    },
+    caseImage(img) {
+      return img ? [].concat(img) : [];
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.case-wrap {
+  width: 60vw;
+  padding-top: 20px;
+}
+.before::after {
+  content: "";
+  display: inline-block;
+  position: absolute;
+  top: 12px;
+  left: -31px;
+  width: 2px;
+  height: 90%;
+  border-left: 2px dashed #ccc;
+}
+.moreDetail {
+  font-size: 14px !important;
+  position: relative;
+  margin-top: 20px;
+}
+.step-wrap {
+  box-sizing: border-box;
+  height: 300px;
+  padding-left: 30px;
+}
+.step-wrap {
+  .before {
+    position: relative;
+    height: 50%;
+  }
+  .after {
+    position: relative;
+    height: 50%;
+  }
+  .content {
+    margin-top: 20px;
+    width: 95%;
+    height: 100px;
+    background: #f0f0f0;
+    padding: 20px 30px;
+    border-radius: 10px;
+    display: flex;
+
+    .left {
+      width: 420px;
+      p {
+        font-size: 14px !important;
+        padding: 0;
+        margin: 0;
+        margin-top: 2px;
+        line-height: 20px;
+      }
+    }
+    .right {
+      position: relative;
+      flex: 1;
+    }
+  }
+}
+.title {
+  font-weight: 800;
+  span {
+    color: #ccc;
+    font-weight: 400 !important;
+  }
+}
+.moreDetail .process {
+  z-index: 10;
+  content: "";
+  display: inline-block;
+  width: 25px;
+  height: 25px;
+  background: url("../../../assets/global_images/process.png") no-repeat;
+  position: absolute;
+  top: -8px;
+  left: -12px;
+  background-size: contain;
+}
+.moreDetail .done {
+  z-index: 10;
+  content: "";
+  display: inline-block;
+  width: 25px;
+  height: 25px;
+  background: url("../../../assets/global_images/done.png") no-repeat;
+  position: absolute;
+  bottom: -8px;
+  left: -12px;
+  background-size: contain;
+}
+.before .icon,.after .icon {
+  z-index: 10;
+  display: inline-block;
+  width: 25px;
+  height: 25px;
+  background: url("../../../assets/global_images/done.png") no-repeat;
+  position: absolute;
+  top: -3px;
+  left: -42px;
+  background-size: contain;
+}
+.imgs-wrap {
+  position: absolute;
+  left: -5px;
+  top: -10px;
+  width: 400px;
+  height: 80px;
+  overflow-y: auto;
+}
+.text-over {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.text-over-more {
+  overflow: hidden; // 溢出隐藏
+  text-overflow: ellipsis; // 溢出用省略号显示
+  display: -webkit-box; // 作为弹性伸缩盒子模型显示。
+  -webkit-box-orient: vertical; // 设置伸缩盒子的子元素排列方式：从上到下垂直排列
+  -webkit-line-clamp: 2; // 显示的行数
+}
+/deep/.zoom {
+  display: inline-block;
+  box-sizing: border-box;
+  width: 120px;
+  height: 70px;
+  margin-right: 10px;
+  margin-top: 5px;
+  cursor: pointer;
+}
+.leftLine{
+    position: absolute;
+    top: 18px;
+    left: -19px;
+    width: 2px;
+    height: 99%;
+    border-left: 2px dashed #ccc;
+}
+.moreDetail {
+  .step-more-wrap {
+    box-sizing: border-box;
+    padding-left: 30px;
+    height: 360px;
+    overflow-y: auto;
+    .detail-wrap {
+      margin-top: 3px;
+      margin-bottom: 20px;
+      position: relative;
+      .title{
+        position: relative;
+        .process{
+          z-index: 10 !important;
+          position: absolute;
+          top: -3px;
+          left: -30px;
+          width: 25px;
+          height: 25px;
+          background: url("../../../assets/global_images/process.png") no-repeat;
+          background-size: contain;
+        }
+        .done{
+          z-index: 10 !important;
+          position: absolute;
+          top: -3px;
+          left: -30px;
+          width: 25px;
+          height: 25px;
+          background: url("../../../assets/global_images/done.png") no-repeat;
+          background-size: contain;
+        }
+      }
+      p {
+        font-size: 14px !important;
+        padding: 0;
+        margin: 0;
+        margin-top: 2px;
+        line-height: 20px;
+        width: 90%;
+          overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+      }
+      .content {
+        margin-top: 20px;
+        width: 96%;
+        height: 100px;
+        background: #f0f0f0;
+        padding: 20px 30px;
+        border-radius: 10px;
+        display: flex;
+
+        .left {
+          width: 420px;
+          p {
+            font-size: 14px !important;
+            padding: 0;
+            margin: 0;
+            margin-top: 2px;
+            line-height: 20px;
+          }
+        }
+        .right {
+          position: relative;
+          flex: 1;
+        }
+      }
+    }
+  }
+}
+
+::-webkit-scrollbar {
+  /*滚动条整体样式*/
+  width: 6px; /*高宽分别对应横竖滚动条的尺寸*/
+  height: 8px;
+}
+::-webkit-scrollbar-thumb {
+  /*滚动条里面小方块*/
+  border-radius: 5px;
+  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  background: rgba(0, 0, 0, 0.1);
+}
+::-webkit-scrollbar-track {
+  /*滚动条里面轨道*/
+  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  border-radius: 5px;
+  background: rgba(0, 0, 0, 0.1);
+}
+
+</style>
\ No newline at end of file
diff --git a/src/views/caseManage/caseCommon/process.json b/src/views/caseManage/caseCommon/process.json
new file mode 100644
index 0000000..db58784
--- /dev/null
+++ b/src/views/caseManage/caseCommon/process.json
@@ -0,0 +1,251 @@
+{
+    "state": true,
+    "msg": "",
+    "data": [
+        {
+            "id": "1E03D7C7D3C84E838D1A4C6E8DFC4240",
+            "info": {
+                "id": "1E03D7C7D3C84E838D1A4C6E8DFC4240",
+                "businessId": "aa00ac6d759540d4942de3b00990bacc",
+                "processType": "15",
+                "processInstId": "36008397",
+                "processTaskId": null,
+                "processTaskName": null,
+                "processAssigneeId": "465546017",
+                "processAssigneeName": "呼叫中心系统",
+                "processNextTaskId": "36008446",
+                "processNextTaskName": "专项系统对接待分拨",
+                "processNextAssigneeId": "465546017",
+                "processNextAssigneeName": "呼叫中心系统",
+                "processStepTitle": "新建",
+                "approveMsg": null,
+                "processStepName": "提交",
+                "regulationCompleteTime": null,
+                "createTime": "2022-09-22 09:57:03",
+                "parentTitleId": null,
+                "fileId": null,
+                "parentInstanceId": null,
+                "applyWay": null,
+                "dataLv": null,
+                "processStepExtend": null,
+                "isAuto": null,
+                "processAssigneeDeptName": "专项系统对接",
+                "processNextAssigneeDeptName": "专项系统对接"
+            },
+            "parentTitleId": null,
+            "processStepTitle": "新建",
+            "children": [
+                {
+                    "id": "1AB4B8BD0E034AE08DFF0EAE1F7750DE",
+                    "info": {
+                        "id": "1AB4B8BD0E034AE08DFF0EAE1F7750DE",
+                        "businessId": "aa00ac6d759540d4942de3b00990bacc",
+                        "processType": "15",
+                        "processInstId": "36008397",
+                        "processTaskId": "36008446",
+                        "processTaskName": "专项系统对接待分拨",
+                        "processAssigneeId": "465546017",
+                        "processAssigneeName": "呼叫中心系统",
+                        "processNextTaskId": "36008473",
+                        "processNextTaskName": "蓉江新区待分拨",
+                        "processNextAssigneeId": "465546577",
+                        "processNextAssigneeName": "刘晓梅",
+                        "processStepTitle": "上报蓉江新区",
+                        "approveMsg": null,
+                        "processStepName": null,
+                        "regulationCompleteTime": null,
+                        "createTime": "2022-09-22 09:57:03",
+                        "parentTitleId": "1E03D7C7D3C84E838D1A4C6E8DFC4240",
+                        "fileId": null,
+                        "parentInstanceId": null,
+                        "applyWay": null,
+                        "dataLv": null,
+                        "processStepExtend": null,
+                        "isAuto": null,
+                        "processAssigneeDeptName": "专项系统对接",
+                        "processNextAssigneeDeptName": "蓉江新区"
+                    },
+                    "parentTitleId": "1E03D7C7D3C84E838D1A4C6E8DFC4240",
+                    "processStepTitle": "上报蓉江新区",
+                    "children": [
+                        {
+                            "id": "7F644436F8B04DAEBEB475214F64783E",
+                            "info": {
+                                "id": "7F644436F8B04DAEBEB475214F64783E",
+                                "businessId": "aa00ac6d759540d4942de3b00990bacc",
+                                "processType": "15",
+                                "processInstId": "36008397",
+                                "processTaskId": "36008473",
+                                "processTaskName": "蓉江新区待分拨",
+                                "processAssigneeId": "465546577",
+                                "processAssigneeName": "刘晓梅",
+                                "processNextTaskId": "36010141",
+                                "processNextTaskName": "蓉江新区待分拨",
+                                "processNextAssigneeId": "465546577",
+                                "processNextAssigneeName": "刘晓梅",
+                                "processStepTitle": "立案",
+                                "approveMsg": null,
+                                "processStepName": null,
+                                "regulationCompleteTime": null,
+                                "createTime": "2022-09-22 10:07:02",
+                                "parentTitleId": "1AB4B8BD0E034AE08DFF0EAE1F7750DE",
+                                "fileId": null,
+                                "parentInstanceId": null,
+                                "applyWay": null,
+                                "dataLv": null,
+                                "processStepExtend": null,
+                                "isAuto": null,
+                                "processAssigneeDeptName": "蓉江新区",
+                                "processNextAssigneeDeptName": "蓉江新区"
+                            },
+                            "parentTitleId": "1AB4B8BD0E034AE08DFF0EAE1F7750DE",
+                            "processStepTitle": "立案",
+                            "children": [
+                                {
+                                    "id": "156D83539A10444BBDE445E132E551C1",
+                                    "info": {
+                                        "id": "156D83539A10444BBDE445E132E551C1",
+                                        "businessId": "aa00ac6d759540d4942de3b00990bacc",
+                                        "processType": "15",
+                                        "processInstId": "36008397",
+                                        "processTaskId": "36010141",
+                                        "processTaskName": "蓉江新区待分拨",
+                                        "processAssigneeId": "465546577",
+                                        "processAssigneeName": "刘晓梅",
+                                        "processNextTaskId": "36010490",
+                                        "processNextTaskName": "高校园区管理处待分拨",
+                                        "processNextAssigneeId": "465546697",
+                                        "processNextAssigneeName": "张萍",
+                                        "processStepTitle": "蓉江新区分拨",
+                                        "approveMsg": null,
+                                        "processStepName": null,
+                                        "regulationCompleteTime": null,
+                                        "createTime": "2022-09-22 10:08:11",
+                                        "parentTitleId": "7F644436F8B04DAEBEB475214F64783E",
+                                        "fileId": "371daad0c65b871f532a49ccae8d34dc",
+                                        "parentInstanceId": null,
+                                        "applyWay": "1",
+                                        "dataLv": null,
+                                        "processStepExtend": null,
+                                        "isAuto": null,
+                                        "processAssigneeDeptName": "蓉江新区",
+                                        "processNextAssigneeDeptName": "高校园区管理处"
+                                    },
+                                    "parentTitleId": "7F644436F8B04DAEBEB475214F64783E",
+                                    "processStepTitle": "蓉江新区分拨",
+                                    "children": [
+                                        {
+                                            "id": "DCEB4053DCD040FC907CA8CBDAFB9BED",
+                                            "info": {
+                                                "id": "DCEB4053DCD040FC907CA8CBDAFB9BED",
+                                                "businessId": "aa00ac6d759540d4942de3b00990bacc",
+                                                "processType": "15",
+                                                "processInstId": "36008397",
+                                                "processTaskId": "36010490",
+                                                "processTaskName": "高校园区管理处待分拨",
+                                                "processAssigneeId": "465546697",
+                                                "processAssigneeName": "张萍",
+                                                "processNextTaskId": "36021140",
+                                                "processNextTaskName": "高校园区管理处待分拨",
+                                                "processNextAssigneeId": "465546697",
+                                                "processNextAssigneeName": "张萍",
+                                                "processStepTitle": "签收",
+                                                "approveMsg": null,
+                                                "processStepName": null,
+                                                "regulationCompleteTime": null,
+                                                "createTime": "2022-09-22 11:11:10",
+                                                "parentTitleId": "156D83539A10444BBDE445E132E551C1",
+                                                "fileId": null,
+                                                "parentInstanceId": null,
+                                                "applyWay": "1",
+                                                "dataLv": null,
+                                                "processStepExtend": null,
+                                                "isAuto": null,
+                                                "processAssigneeDeptName": "高校园区管理处",
+                                                "processNextAssigneeDeptName": "高校园区管理处"
+                                            },
+                                            "parentTitleId": "156D83539A10444BBDE445E132E551C1",
+                                            "processStepTitle": "签收",
+                                            "children": [
+                                                {
+                                                    "id": "0DDDAFE1B10C444B95E5D61E8483F1D4",
+                                                    "info": {
+                                                        "id": "0DDDAFE1B10C444B95E5D61E8483F1D4",
+                                                        "businessId": "aa00ac6d759540d4942de3b00990bacc",
+                                                        "processType": "15",
+                                                        "processInstId": "36008397",
+                                                        "processTaskId": "36021140",
+                                                        "processTaskName": "高校园区管理处待分拨",
+                                                        "processAssigneeId": "465546697",
+                                                        "processAssigneeName": "张萍",
+                                                        "processNextTaskId": "36021489",
+                                                        "processNextTaskName": "蓉江新区办理结果确认",
+                                                        "processNextAssigneeId": "465546577",
+                                                        "processNextAssigneeName": "刘晓梅",
+                                                        "processStepTitle": "高校园区管理处提交结果",
+                                                        "approveMsg": "已处理",
+                                                        "processStepName": null,
+                                                        "regulationCompleteTime": null,
+                                                        "createTime": "2022-09-22 11:11:38",
+                                                        "parentTitleId": "DCEB4053DCD040FC907CA8CBDAFB9BED",
+                                                        "fileId": "ec8a05e25dae5571154f17e998653339",
+                                                        "parentInstanceId": null,
+                                                        "applyWay": null,
+                                                        "dataLv": null,
+                                                        "processStepExtend": null,
+                                                        "isAuto": null,
+                                                        "processAssigneeDeptName": "高校园区管理处",
+                                                        "processNextAssigneeDeptName": "蓉江新区"
+                                                    },
+                                                    "parentTitleId": "DCEB4053DCD040FC907CA8CBDAFB9BED",
+                                                    "processStepTitle": "高校园区管理处提交结果",
+                                                    "children": [
+                                                        {
+                                                            "id": "ED0DDD8B224747B88F051E28F1A4AF39",
+                                                            "info": {
+                                                                "id": "ED0DDD8B224747B88F051E28F1A4AF39",
+                                                                "businessId": "aa00ac6d759540d4942de3b00990bacc",
+                                                                "processType": "15",
+                                                                "processInstId": "36008397",
+                                                                "processTaskId": "36021489",
+                                                                "processTaskName": "蓉江新区办理结果确认",
+                                                                "processAssigneeId": "465546577",
+                                                                "processAssigneeName": "刘晓梅",
+                                                                "processNextTaskId": null,
+                                                                "processNextTaskName": null,
+                                                                "processNextAssigneeId": null,
+                                                                "processNextAssigneeName": null,
+                                                                "processStepTitle": "结案",
+                                                                "approveMsg": null,
+                                                                "processStepName": "结束",
+                                                                "regulationCompleteTime": null,
+                                                                "createTime": "2022-09-26 09:03:08",
+                                                                "parentTitleId": "0DDDAFE1B10C444B95E5D61E8483F1D4",
+                                                                "fileId": null,
+                                                                "parentInstanceId": null,
+                                                                "applyWay": null,
+                                                                "dataLv": null,
+                                                                "processStepExtend": null,
+                                                                "isAuto": null,
+                                                                "processAssigneeDeptName": "蓉江新区",
+                                                                "processNextAssigneeDeptName": null
+                                                            },
+                                                            "parentTitleId": "0DDDAFE1B10C444B95E5D61E8483F1D4",
+                                                            "processStepTitle": "结案",
+                                                            "children": []
+                                                        }
+                                                    ]
+                                                }
+                                            ]
+                                        }
+                                    ]
+                                }
+                            ]
+                        }
+                    ]
+                }
+            ]
+        }
+    ],
+    "code": 200
+}
\ No newline at end of file
diff --git a/src/views/caseManage/caseCommon/process2.json b/src/views/caseManage/caseCommon/process2.json
new file mode 100644
index 0000000..53506ad
--- /dev/null
+++ b/src/views/caseManage/caseCommon/process2.json
@@ -0,0 +1,23 @@
+{
+    "code": 200,
+    "msg": "操作成功",
+    "success": true,
+    "data": {
+        "eventId": "866691836176740352",
+        "appCode": "A001",
+        "desc": "好吃多",
+        "status": 1,
+        "replyDatas": [
+            {
+                "id": "21345234523",
+                "time": "2021-07-19 14:42:34",
+                "name": "张三",
+                "content": "大师傅处置完成",
+                "attachments": "http://ztuploadfile.oss-cn-beijing.aliyuncs.com/%E8%BD%A6%E8%BE%86.jpeg?Expires=1934519183&OSSAccessKeyId=LTAI4G3j5y61aAVjgUB2sWXv&Signature=Ws%2BXAnQw6BPs8r3R7atb3MjzCFY%3D",
+                "status": "11",
+                "statusDesc": "成功",
+                "businessStatus": "success"
+            }
+        ]
+    }
+}
\ No newline at end of file
diff --git a/src/views/caseManage/caseDetail.vue b/src/views/caseManage/caseDetail.vue
index 0fc16f1..6444c93 100644
--- a/src/views/caseManage/caseDetail.vue
+++ b/src/views/caseManage/caseDetail.vue
@@ -4,28 +4,47 @@
     <!-- 基础信息表单 -->
     <div>
       <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-tickets"/>事件基础信息</div></el-col>
+        <el-col :span="6"
+          ><div class="title-header">
+            <i class="el-icon-tickets" />事件基础信息
+          </div></el-col
+        >
       </el-row>
-      <case-form-process v-if="showProcess" ref="caseFormProcess" :case-form="caseDetail"/>
-      <case-form-read v-else ref="caseFormRead" :case-form="caseDetail"/>
+      <case-form-process
+        v-if="showProcess"
+        ref="caseFormProcess"
+        :case-form="caseDetail"
+      />
+      <case-form-read v-else ref="caseFormRead" :case-form="caseDetail" />
     </div>
 
-    <!-- 事件地图 -->
-    <div>
+    <!-- 事件处理流程 -->
+    <div v-if="caseType != '应急事件'">
       <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-tickets"/>事件地图</div></el-col>
+        <el-col :span="6"
+          ><div class="title-header">
+            <i class="el-icon-tickets" />事件处理流程
+          </div></el-col
+        >
       </el-row>
       <el-row>
-        <el-col :span="24">
-          <f-map ref="mapDetail" style="height: 40vh; padding: 20px 0px"/>
+        <el-col :span="6">
+          <caseImgShow :imgs="caseImgs" />
+        </el-col>
+        <el-col :span="6">
+          <caseProcessTable :list="processList" />
         </el-col>
       </el-row>
     </div>
 
     <!-- 事件流程处理 -->
-    <div v-if="showProcess&&caseDetail.id">
+    <div v-if="showProcess && caseDetail.id">
       <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-tickets"/>事件流程处理</div></el-col>
+        <el-col :span="6"
+          ><div class="title-header">
+            <i class="el-icon-tickets" />事件流程处理
+          </div></el-col
+        >
       </el-row>
       <case-process
         ref="caseProcess"
@@ -42,40 +61,94 @@
     </div>
     <!-- 事件处理记录 -->
     <div v-if="caseDetail.processId">
-      <case-record ref="caseRecord" :process-id="caseDetail.processId" :id="id"/>
+      <case-record
+        ref="caseRecord"
+        :process-id="caseDetail.processId"
+        :id="id"
+      />
+    </div>
+
+    <!-- 事件地图 -->
+    <div>
+      <el-row class="table-title">
+        <el-col :span="6"
+          ><div class="title-header">
+            <i class="el-icon-tickets" />事件地图
+          </div></el-col
+        >
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <f-map ref="mapDetail" style="height: 40vh; padding: 20px 0px" />
+        </el-col>
+      </el-row>
     </div>
   </div>
 </template>
 
 <script>
-import CaseFormRead from './caseCommon/caseFormRead'
-import CaseFormProcess from './caseCommon/caseFormProcess'
-import CaseProcess from './caseCommon/caseProcess'
-import CaseRecord from './caseCommon/caseRecord'
-import { caseDetail } from '@/api/callCase'
-import FMap from '../../components/fMap/components/fMap'
-
+import CaseFormRead from "./caseCommon/caseFormRead";
+import CaseFormProcess from "./caseCommon/caseFormProcess";
+import CaseProcess from "./caseCommon/caseProcess";
+import CaseRecord from "./caseCommon/caseRecord";
+import caseImgShow from "./caseCommon/caseImgShow";
+import caseProcessTable from "./caseCommon/caseProcessTable.vue";
+import { caseDetail, eventStepList } from "@/api/callCase";
+import FMap from "../../components/fMap/components/fMap";
+import process from "./caseCommon/process.json";
 export default {
-  name: 'CaseDetail',
-  components: { FMap, CaseFormRead, CaseProcess, CaseRecord, CaseFormProcess },
+  name: "CaseDetail",
+  components: {
+    FMap,
+    CaseFormRead,
+    CaseProcess,
+    CaseRecord,
+    CaseFormProcess,
+    caseImgShow,
+    caseProcessTable,
+  },
   data() {
     return {
-      id: '',
-      taskId: '', // 当前任务id，只有任务处理的详情中需要，会签用
+      id: "",
+      taskId: "", // 当前任务id，只有任务处理的详情中需要，会签用
       caseDetail: {},
+      caseType: "",
+      caseImgs: [
+        "https://t7.baidu.com/it/u=1742010762,3975931984&fm=193&f=GIF",
+        "https://t7.baidu.com/it/u=1302518827,2012573433&fm=193&f=GIF",
+      ], // 事件流程图片
+      processList: [], // 事件流程信息
       showProcess: false,
-      wholeLoading: false
-    }
+      wholeLoading: false,
+    };
+  },
+  created() {
+    // 获取事件分类类型
+    let caseTypeMap = {
+      2: "应急事件",
+      3: "运维事件",
+      4: "精细化管理事件",
+    };
+    let caseType = caseTypeMap[this.$route.query.caseType];
+    this.caseType = caseType;
+    //   this.id = this.$route.params.id;
+    // if (this.$route.query.taskId) {
+    //   this.taskId = this.$route.query.taskId;
+    // }
+    // if (this.$route.query.showProcess) {
+    //   this.showProcess = this.$route.query.showProcess;
+    // }
+    // this.fetchDetail();
   },
   mounted() {
-    this.id = this.$route.params.id
+    this.id = this.$route.params.id;
     if (this.$route.query.taskId) {
-      this.taskId = this.$route.query.taskId
+      this.taskId = this.$route.query.taskId;
     }
     if (this.$route.query.showProcess) {
-      this.showProcess = this.$route.query.showProcess
+      this.showProcess = this.$route.query.showProcess;
     }
-    this.fetchDetail()
+    this.fetchDetail();
   },
   methods: {
     /**
@@ -83,52 +156,132 @@
      */
     fetchDetail() {
       if (this.id) {
-        this.wholeLoading = true
-        caseDetail(this.id).then(response => {
-          this.caseDetail = response.data
-          this.wholeLoading = false
-          this.$refs.mapDetail.initMap(true, this.caseDetail)
-        })
+        this.wholeLoading = true;
+        caseDetail(this.id).then((response) => {
+          this.caseDetail = response.data;
+          // if (this.caseDetail.caseImage) {
+          //     const base_url = process.env.BASE_API + "/static/";
+          //     const image_ori = this.caseDetail.caseImage.split(";");
+          //     this.caseImgs = image_ori.map((item) => base_url + item);
+          //   } else {
+          //     this.caseImgs = [];
+          //   }
+          this.wholeLoading = false;
+          this.$refs.mapDetail.initMap(true, this.caseDetail);
+        });
+
+        // 通过类型判断传递内容
+        // id为caseId
+        if (this.caseType == "运维事件") {
+          // 获取返回的数据
+          this.$nextTick(() => {
+            this.processList = this.treeDataToCompressed([
+              ...process.data,
+            ]).reverse();
+          });
+          // let propsMap = {
+          //   processTitle: "processTaskName",
+          //   time: "createTime",
+          //   sender: "processAssigneeName",
+          //   incept: "processAssigneeName",
+          //   detail: "processTaskName",
+          //   nextId: "processNextAssigneeId",
+          // };
+
+          // this.$nextTick(async ()=>{
+          //   this.processList = await this.handlePropstoArray(
+          //   this.processList,
+          //   propsMap
+          // );
+          // })
+          return;
+          this.processList = this.processList.map((item) => {
+            return {
+              processTitle: item.processTaskName,
+              time: item.createTime,
+              sender: item.processAssigneeName,
+              incept: item.processAssigneeName,
+              detail: item.processTaskName,
+              nextId: item.processNextAssigneeId,
+            };
+          });
+          console.log(this.processList);
+          return;
+          // 获取事件流程详情
+          eventStepList({ caseId: this.id }).then((res) => {
+            console.log(res);
+
+            // 获取流程节点图片以及流程数组数据
+          });
+        } else if (this.caseType == "精细化管理事件") {
+        }
+        return;
       }
     },
+    handlePropstoArray(array, props) {
+      return new Promise((resolve, reject) => {
+        let jsonData = JSON.stringify(array);
+        for (const key in props) {
+          var reg = new RegExp(props[key], "g");
+          jsonData = jsonData.replace(reg, key);
+        }
+        resolve(JSON.parse(jsonData));
+      });
+    },
+    treeDataToCompressed(source) {
+      let target = [];
+      for (const i in source) {
+        target.push(source[i].info);
+        if (
+          Array.isArray(source[i].children) &&
+          source[i].children.length > 0
+        ) {
+          target = [
+            ...target,
+            ...this.treeDataToCompressed(source[i].children),
+          ];
+        }
+      }
+      return target;
+    },
     loading() {
-      this.wholeLoading = true
+      this.wholeLoading = true;
     },
     /**
      * 提交成功之后
      */
     submitSuccess() {
-      console.log('submitSuccess')
-      this.$message.success('提交成功')
-      this.showProcess = false
-      this.$route.query.showProcess = false
-      this.wholeLoading = false
-      this.fetchDetail()
-      this.$refs['caseRecord'].fetchProcessRecords()
+      console.log("submitSuccess");
+      this.$message.success("提交成功");
+      this.showProcess = false;
+      this.$route.query.showProcess = false;
+      this.wholeLoading = false;
+      this.fetchDetail();
+      this.$refs["caseRecord"].fetchProcessRecords();
     },
     /**
      * 提交失败之后
      */
     submitError() {
-      console.log('submitError')
-      this.wholeLoading = false
-    }
-  }
-}
+      console.log("submitError");
+      this.wholeLoading = false;
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-  .table-title{
-    background-color:rgba(243, 243, 243, 1);
-    height: 46px;
-    .title-header{
-      line-height:46px;
-      color: #606266;
-      font-size: 15px;
-      i{
-        margin-left: 5px;
-        margin-right: 5px;
-      }
+.table-title {
+  background-color: rgba(243, 243, 243, 1);
+  height: 46px;
+  .title-header {
+    line-height: 46px;
+    color: #606266;
+    font-size: 15px;
+    i {
+      margin-left: 5px;
+      margin-right: 5px;
     }
   }
+}
 </style>
diff --git a/src/views/caseManage/caseManage.vue b/src/views/caseManage/caseManage.vue
index a986eaa..2f5bfea 100644
--- a/src/views/caseManage/caseManage.vue
+++ b/src/views/caseManage/caseManage.vue
@@ -180,6 +180,7 @@
       this.$router.push({
         path: '/caseDetail/' + row.id,
         query: {
+          caseType:row.eorc,
           showProcess: false
         }
       })

diff --git a/package.json b/package.json
index fb32aa2..c325e45 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
     "vue-amap": "^0.5.9",
     "vue-baidu-map": "^0.21.22",
     "vue-router": "3.0.1",
+    "vue-slide-mini": "^1.0.4",
     "vuex": "3.0.1",
     "wangeditor": "^3.1.1"
   },
diff --git a/src/api/callCase.js b/src/api/callCase.js
index cd61986..9da1fc7 100644
--- a/src/api/callCase.js
+++ b/src/api/callCase.js
@@ -126,3 +126,12 @@
     }
   })
 }
+
+// 社会治理事流转步骤接口
+export function eventStepList(data) {
+  return request({
+    url: '/callcenter/api/case/eventStepList',
+    method: 'post',
+    data
+  })
+}
diff --git a/src/assets/global_images/done.png b/src/assets/global_images/done.png
new file mode 100644
index 0000000..c9a2c5e
--- /dev/null
+++ b/src/assets/global_images/done.png
Binary files differ
diff --git a/src/assets/global_images/process.png b/src/assets/global_images/process.png
new file mode 100644
index 0000000..311fe3a
--- /dev/null
+++ b/src/assets/global_images/process.png
Binary files differ
diff --git a/src/components/NomalTable/index.vue b/src/components/NomalTable/index.vue
index 55a7378..8616987 100644
--- a/src/components/NomalTable/index.vue
+++ b/src/components/NomalTable/index.vue
@@ -55,7 +55,7 @@
         </el-col>
       </el-row>
       <!-- 表格正文-->
-      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="handleSelectionChange">
+      <el-table v-loading="listLoading" :data="data" :height="height" :size="size" class="table" row-class-name="small-row-class" border @selection-change="handleSelectionChange">
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns"/>
         <!--多选选中列-->
@@ -176,7 +176,10 @@
           refresh: false // 是否需要刷新按钮
         }
       }
-    }// 表格工具配置
+    },// 表格工具配置
+    height:{
+      type:String,
+    }
   },
   data() {
     return {
diff --git a/src/components/SelectTree/singleSelect.vue b/src/components/SelectTree/singleSelect.vue
index ba15b20..3336346 100644
--- a/src/components/SelectTree/singleSelect.vue
+++ b/src/components/SelectTree/singleSelect.vue
@@ -6,7 +6,8 @@
     trigger="click"
     class="select-tree scrollbar"
     @show="onShowPopover"
-    @hide="onHidePopover">
+    @hide="onHidePopover"
+  >
     <el-tree
       ref="tree"
       :style="`min-width: ${treeWidth}`"
@@ -14,265 +15,276 @@
       :props="props"
       :expand-on-click-node="false"
       :filter-node-method="filterNode"
-      :default-expand-all="false"
+      :default-expand-all="expandAll"
       class="innerbox"
       highlight-current
       accordion
-      @node-click="onClickNode"/>
+      @node-click="onClickNode"
+    />
     <el-input
       slot="reference"
       ref="input"
       v-model="labelModel"
       :style="`width: ${width}px`"
       :size="size"
-      :class="{ 'rotate': showStatus }"
+      :class="{ rotate: showStatus }"
       :placeholder="placeholder"
       :disabled="disabled"
       clearable
-      suffix-icon="el-icon-arrow-down"/>
+      suffix-icon="el-icon-arrow-down"
+    />
   </el-popover>
 </template>
 
 <script>
-
 export default {
-  name: 'SelectTree',
+  name: "SelectTree",
+
   // 设置绑定参数
   model: {
-    prop: 'value',
-    event: 'selected'
+    prop: "value",
+    event: "selected",
   },
   props: {
+    // 是否默认展开全部
+    expandAll: {
+      type: Boolean,
+      default: false,
+    },
     // 接收绑定参数
     value: {
       type: String,
-      default: ''
+      default: "",
     },
     // 输入框宽度
     width: {
       type: String,
-      default: ''
+      default: "",
     },
     size: {
       type: String,
-      default: ''
+      default: "",
     },
     // 输入框宽度
     disabled: {
       type: Boolean,
-      default: false
+      default: false,
     },
     // 选项数据
     options: {
       type: Array,
-      required: true
+      required: true,
     },
     // 输入框占位符
     placeholder: {
       type: String,
       required: false,
-      default: '请选择'
+      default: "请选择",
     },
     // 树节点配置选项
     props: {
       type: Object,
       required: false,
       default: () => ({
-        parent: 'parentId',
-        value: 'rowGuid',
-        label: 'areaName',
-        children: 'children'
-      })
-    }
+        parent: "parentId",
+        value: "rowGuid",
+        label: "areaName",
+        children: "children",
+      }),
+    },
   },
   data() {
     return {
       // 树状菜单显示状态
       showStatus: false,
       // 菜单宽度
-      treeWidth: 'auto',
+      treeWidth: "auto",
       // 输入框显示值
-      labelModel: '',
+      labelModel: "",
       // 实际请求传值
-      valueModel: ''
-    }
+      valueModel: "",
+    };
   },
   computed: {
     // 是否为树状结构数据
     dataType() {
-      const jsonStr = JSON.stringify(this.options)
-      return jsonStr.indexOf(this.props.children) !== -1
+      const jsonStr = JSON.stringify(this.options);
+      return jsonStr.indexOf(this.props.children) !== -1;
     },
     // 若非树状结构，则转化为树状结构数据
     data() {
       // return this.dataType ? this.options : this.switchTree()
-      return this.options
-    }
+      return this.options;
+    },
   },
   watch: {
     labelModel(val) {
-      console.log('labelModel change:' + val)
+      console.log("labelModel change:" + val);
       if (!val) {
-        if (val === '') {
-          this.valueModel = ''
-          this.onCloseTree()
-          this.$emit('selected', this.valueModel)
+        if (val === "") {
+          this.valueModel = "";
+          this.onCloseTree();
+          this.$emit("selected", this.valueModel);
         }
-        this.valueModel = ''
+        this.valueModel = "";
       }
-      this.$refs.tree.filter(val)
+      this.$refs.tree.filter(val);
     },
     value(val) {
-      this.labelModel = this.queryTree(this.data, val)
-    }
+      this.labelModel = this.queryTree(this.data, val);
+    },
   },
   created() {
     // 检测输入框原有值并显示对应 label
     if (this.value) {
-      this.labelModel = this.queryTree(this.data, this.value)
+      this.labelModel = this.queryTree(this.data, this.value);
     }
     // 获取输入框宽度同步至树状菜单宽度
     this.$nextTick(() => {
-      this.treeWidth = `${(this.width || this.$refs.input.$refs.input.clientWidth) - 24}px`
-    })
+      this.treeWidth = `${
+        (this.width || this.$refs.input.$refs.input.clientWidth) - 24
+      }px`;
+    });
   },
   methods: {
     // 单击节点
     onClickNode(node) {
-      this.labelModel = node[this.props.label]
-      this.valueModel = node[this.props.value]
-      this.onCloseTree()
+      this.labelModel = node[this.props.label];
+      this.valueModel = node[this.props.value];
+      this.onCloseTree();
     },
     // 偏平数组转化为树状层级结构
     switchTree() {
-      return this.cleanChildren(this.buildTree(this.options, '0'))
+      return this.cleanChildren(this.buildTree(this.options, "0"));
     },
     // 隐藏树状菜单
     onCloseTree() {
-      this.$refs.popover.showPopper = false
+      this.$refs.popover.showPopper = false;
     },
     // 显示时触发
     onShowPopover() {
-      this.showStatus = true
-      this.$refs.tree.filter(false)
+      this.showStatus = true;
+      this.$refs.tree.filter(false);
     },
     // 隐藏时触发
     onHidePopover() {
-      this.showStatus = false
-      console.log('onHidePopover:' + this.valueModel)
+      this.showStatus = false;
+      console.log("onHidePopover:" + this.valueModel);
       // if (this.valueModel !== '') {
       //   this.$emit('selected', this.valueModel)
       // }
-      this.$emit('selected', this.valueModel)
+      this.$emit("selected", this.valueModel);
     },
     // 树节点过滤方法
     filterNode(query, data) {
-      if (!query) return true
-      return data[this.props.label].indexOf(query) !== -1
+      if (!query) return true;
+      return data[this.props.label].indexOf(query) !== -1;
     },
     // 搜索树状数据中的 ID
     queryTree(tree, id) {
-      let stark = []
-      stark = stark.concat(tree)
+      let stark = [];
+      stark = stark.concat(tree);
       while (stark.length) {
-        const temp = stark.shift()
+        const temp = stark.shift();
         if (temp[this.props.children]) {
-          stark = stark.concat(temp[this.props.children])
+          stark = stark.concat(temp[this.props.children]);
         }
         if (temp[this.props.value] === id) {
-          return temp[this.props.label]
+          return temp[this.props.label];
         }
       }
-      return ''
+      return "";
     },
     // 将一维的扁平数组转换为多层级对象
-    buildTree(data, id = '0') {
+    buildTree(data, id = "0") {
       const fa = (parentId) => {
-        console.log('parentId:' + parentId)
-        const temp = []
+        console.log("parentId:" + parentId);
+        const temp = [];
         for (let i = 0; i < data.length; i++) {
-          const n = data[i]
+          const n = data[i];
           if (n[this.props.parent] === parentId) {
-            n.children = fa(n.code)
-            temp.push(n)
+            n.children = fa(n.code);
+            temp.push(n);
           }
         }
-        return temp
-      }
-      return fa(id)
+        return temp;
+      };
+      return fa(id);
     },
     // 清除空 children项
     cleanChildren(data) {
       const fa = (list) => {
         list.map((e) => {
           if (e.children.length) {
-            fa(e.children)
+            fa(e.children);
           } else {
-            delete e.children
+            delete e.children;
           }
-          return e
-        })
-        return list
-      }
-      return fa(data)
-    }
-  }
-}
+          return e;
+        });
+        return list;
+      };
+      return fa(data);
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-  .scrollbar {
-    overflow-y: scroll;
-    &::-webkit-scrollbar {
-      z-index: 11;
-      width: 6px;
-    }
-    &::-webkit-scrollbar-track,
-    &::-webkit-scrollbar-corner {
-      background: #fff;
-    }
-    &::-webkit-scrollbar-thumb {
-      // border-radius: 5px;
-      width: 6px;
-      background-color: #eee;
-      &:hover {
-        background-color: #ccc;
-      }
-    }
-    &::-webkit-scrollbar-track-piece {
-      background: #fff;
-      width: 6px;
+.scrollbar {
+  overflow-y: scroll;
+  &::-webkit-scrollbar {
+    z-index: 11;
+    width: 6px;
+  }
+  &::-webkit-scrollbar-track,
+  &::-webkit-scrollbar-corner {
+    background: #fff;
+  }
+  &::-webkit-scrollbar-thumb {
+    // border-radius: 5px;
+    width: 6px;
+    background-color: #eee;
+    &:hover {
+      background-color: #ccc;
     }
   }
-  .select-tree .el-tree {
-    max-height: 350px;
+  &::-webkit-scrollbar-track-piece {
+    background: #fff;
+    width: 6px;
   }
-  .select-tree .el-input.el-input--suffix {
-    cursor: pointer;
-  }
-  .select-tree .el-input.el-input--suffix.rotate .el-input__suffix {
-    transform: rotate(180deg);
-  }
+}
+.select-tree .el-tree {
+  max-height: 350px;
+}
+.select-tree .el-input.el-input--suffix {
+  cursor: pointer;
+}
+.select-tree .el-input.el-input--suffix.rotate .el-input__suffix {
+  transform: rotate(180deg);
+}
 
-  .innerbox::-webkit-scrollbar {/*滚动条整体样式*/
-    width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
-    height: 4px;
-  }
-  .innerbox::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
-    border-radius: 5px;
-    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
-    background: rgba(0,0,0,0.2);
-  }
-  .innerbox::-webkit-scrollbar-track { /*滚动条里面轨道*/
-    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
-    border-radius: 0;
-    background: rgba(0, 0, 0, 0.1);
-  }
+.innerbox::-webkit-scrollbar {
+  /*滚动条整体样式*/
+  width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
+  height: 4px;
+}
+.innerbox::-webkit-scrollbar-thumb {
+  /*滚动条里面小方块*/
+  border-radius: 5px;
+  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  background: rgba(0, 0, 0, 0.2);
+}
+.innerbox::-webkit-scrollbar-track {
+  /*滚动条里面轨道*/
+  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  border-radius: 0;
+  background: rgba(0, 0, 0, 0.1);
+}
 </style>
 <style lang="scss">
-  .el-popover{
-    max-height: 400px;
-    overflow: auto;
-  }
-
+.el-popover {
+  max-height: 400px;
+  overflow: auto;
+}
 </style>
diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss
index 65abe46..8236420 100644
--- a/src/styles/sidebar.scss
+++ b/src/styles/sidebar.scss
@@ -212,3 +212,8 @@
 .is-active>.light-line{
   background-color: $menuActiveText
 }
+
+.el-image-viewer__close{
+  color: #fff !important;
+  font-size: 52px !important;
+}
\ No newline at end of file
diff --git a/src/views/caseManage/caseCommon/SwiperImg.vue b/src/views/caseManage/caseCommon/SwiperImg.vue
new file mode 100644
index 0000000..4ff3fd2
--- /dev/null
+++ b/src/views/caseManage/caseCommon/SwiperImg.vue
@@ -0,0 +1,88 @@
+<template>
+	<div class="swiper" @mouseover="overHd" @mouseout="auto">
+		<div class="swiper-item" v-for="(item,ind) in gallery" :key="item" v-show="ind==index">
+			<img :src="item" width="100%"  style="width: 300px; height: 450px; overflow: hidden">
+		</div>
+		<div class="thumbs" v-if="gallery.length > 1">
+			<span class="thumb" :class="{'active' :item==index+1}" v-for="item in gallery.length" :key='item'
+				@click="index=item-1">{{item}}</span>
+		</div>
+	</div>
+</template>
+ 
+<script>
+	export default {
+		props: {
+			gallery: {
+				type: Array,
+				default () {
+					return []
+				}
+			}
+		},
+		data() {
+			return {
+				//默认显示 
+				index: 0,
+				stopID: null,
+			}
+		},
+		// 当组件挂载完毕 执行自动播放
+		created() {
+			this.auto();
+		},
+		beforeDestroy(){
+			this.overHd();
+		},
+		methods: {
+			//鼠标一开  auto自动执行
+			auto() {
+				this.stopID = setInterval(() => {
+					this.index++;
+					this.check();
+				}, 5000)
+			},
+			overHd() {
+				clearInterval(this.stopID);
+			},
+			//检查边界
+			check() {
+				if (this.index == this.gallery.length) {
+					this.index = 0;
+				}
+			}
+		}
+	}
+</script>
+ 
+<style scoped="scoped">
+	.swiper {
+		position: relative;
+	}
+ 
+	.swiper .thumbs {
+		position: absolute;
+		bottom: 10px;
+		width: 100%;
+		text-align: center;
+	}
+ 
+	.thumb {
+		width: 10px;
+		height: 10px;
+		display: inline-block;
+		border-radius: 15px;
+		text-indent: 9999em;
+		margin: 0 5px;
+		background-color: #fff;
+	}
+ 
+	.thumb:hover {
+		cursor: pointer;
+		background-color: #42b983;
+	}
+	.active {
+		background-color: #42b983;
+ 
+	}
+</style>
\ No newline at end of file
diff --git a/src/views/caseManage/caseCommon/caseFormProcess.vue b/src/views/caseManage/caseCommon/caseFormProcess.vue
index f8a9666..e6a6446 100644
--- a/src/views/caseManage/caseCommon/caseFormProcess.vue
+++ b/src/views/caseManage/caseCommon/caseFormProcess.vue
@@ -4,138 +4,183 @@
       <el-row :gutter="20">
         <el-col :span="6">
           <el-form-item label="事件编号">
-            <el-input :value="caseForm.caseId" size="small"/>
+            <el-input :value="caseForm.caseId" size="small" />
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="来电时间">
-            <el-input :value="caseForm.callTime" size="small"/>
+            <el-input :value="caseForm.callTime" size="small" />
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="联系人">
-            <el-input :value="caseForm.reporterName" size="small"/>
+            <el-input :value="caseForm.reporterName" size="small" />
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="联系电话">
-            <el-input :value="caseForm.reporterPhone" size="small"/>
+            <el-input :value="caseForm.reporterPhone" size="small" />
           </el-form-item>
         </el-col>
       </el-row>
       <el-row :gutter="20">
         <el-col :span="6">
           <el-form-item label="事件来源">
-            <el-input :value="caseForm.sourceName" size="small"/>
+            <el-input :value="caseForm.sourceName" size="small" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="事件类型">
+            <el-input :value="caseForm.sourceType" size="small" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="精细化平台事件编号">
+            <el-input :value="caseForm.sourceNumber" size="small" />
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="事件分类">
-            <el-input :value="caseForm.eorcName" size="small"/>
+            <el-input :value="caseForm.eorcName" size="small" />
             <!--<el-input :value="caseForm.eorcName + '/' + caseForm.caseTypeName" size="small"/>-->
             <!--<el-input :value="caseForm.eorcName + '/' + caseForm.caseTypeName + '/' + caseForm.caseDetailTypeName" size="small"/>-->
           </el-form-item>
         </el-col>
-        <el-col :span="6">
-          <el-form-item label="紧急程度">
-            <el-input :value="caseForm.caseLevelName" size="small"/>
-          </el-form-item>
-        </el-col>
+
         <el-col :span="6">
           <el-form-item label="限办日期">
-            <el-input :value="caseForm.limitedTime" size="small"/>
+            <el-input :value="caseForm.limitedTime" size="small" />
           </el-form-item>
         </el-col>
-      </el-row>
-      <el-row :gutter="20">
         <el-col :span="6">
           <el-form-item label="事件地址">
             <!--<el-input :value="caseForm.areaName + '-' + caseForm.streetName + '-' + caseForm.communityName + '-' + caseForm.fieldintro" size="small"/>-->
-            <el-input :value="address" size="small"/>
+            <el-input :value="address" size="small" />
           </el-form-item>
         </el-col>
         <el-col :span="6">
-          <el-form-item label="事件辖区">
-            <el-input :value="caseForm.areaName" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="典型案例">
-            <el-input :value="caseForm.isTypical === '1' ? '是' : '否'" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="要情">
-            <el-input :value="caseForm.isImportant === '1' ? '是' : '否'" size="small"/>
+          <!-- <el-form-item label="紧急程度"> -->
+          <el-form-item label="事件状态">
+            <el-input :value="caseForm.caseLevelName" size="small" />
           </el-form-item>
         </el-col>
       </el-row>
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item label="当前事件状态">
-            <el-input :value="caseForm.stateName" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="当前处理方式">
-            <el-input :value="caseForm.caseStateName" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="需要回访">
-            <el-input :value="caseForm.isReturnVisit === '1' ? '是' : '否'" size="small"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="受理录音">
-            <el-input :value="caseForm.sound" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-button type="text" @click="playSound(caseForm.sound)">播放录音</el-button>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="回访录音">
-            <el-input :value="caseForm.satisfactionSound" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-button type="text" @click="playSound(caseForm.satisfactionSound)">播放录音</el-button>
-        <el-popover
-          v-if="caseForm.caseState === 5"
-          placement="top"
-          width="180"
-          v-model="popoverVisible">
-          <div style="text-align:center; margin: 0">
-            <el-button size="mini"  @click="revisit('')">本地号码</el-button>
-            <el-button type="primary" size="mini"  @click="revisit('0')">外地号码</el-button>
-          </div>
-          <el-button slot="reference" type="text">回访拨号</el-button>
-        </el-popover>
-      </el-row>
-      <el-row>
-        <el-col :span="24">
-          <el-form-item label="事件标题">
-            <el-input :value="caseForm.title" size="small"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row>
-        <el-col :span="24">
-          <el-form-item label="事件内容">
-            <el-input :value="caseForm.description" size="small"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row v-show="this.caseImage.length>0">
-        <el-form-item label="事件图片">
-          <!-- 图片展示 -->
-          <div class="image-container">
-            <el-image v-for="img in caseImage" :key="img" :src="img" fit="fill" class="case-image" :preview-src-list="caseImage"/>
-          </div>
-        </el-form-item>
-      </el-row>
+      <el-collapse v-model="activeName" accordion>
+        <el-collapse-item name="1">
+          <template slot="title">
+            <span class="collapse-title">更多信息</span>
+          </template>
+          <el-row :gutter="20">
+            <el-col :span="6">
+              <el-form-item label="事件辖区">
+                <el-input :value="caseForm.areaName" size="small" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="典型案例">
+                <el-input
+                  :value="caseForm.isTypical === '1' ? '是' : '否'"
+                  size="small"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="要情">
+                <el-input
+                  :value="caseForm.isImportant === '1' ? '是' : '否'"
+                  size="small"
+                />
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <el-row :gutter="20">
+            <el-col :span="6">
+              <el-form-item label="当前事件状态">
+                <el-input :value="caseForm.stateName" size="small" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="当前处理方式">
+                <el-input :value="caseForm.caseStateName" size="small" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="需要回访">
+                <el-input
+                  :value="caseForm.isReturnVisit === '1' ? '是' : '否'"
+                  size="small"
+                />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <el-form-item label="受理录音">
+                <el-input :value="caseForm.sound" size="small" />
+              </el-form-item>
+            </el-col>
+            <el-button type="text" @click="playSound(caseForm.sound)"
+              >播放录音</el-button
+            >
+          </el-row>
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <el-form-item label="回访录音">
+                <el-input :value="caseForm.satisfactionSound" size="small" />
+              </el-form-item>
+            </el-col>
+            <el-button
+              type="text"
+              @click="playSound(caseForm.satisfactionSound)"
+              >播放录音</el-button
+            >
+            <el-popover
+              v-if="caseForm.caseState === 5"
+              placement="top"
+              width="180"
+              v-model="popoverVisible"
+            >
+              <div style="text-align: center; margin: 0">
+                <el-button size="mini" @click="revisit('')">本地号码</el-button>
+                <el-button type="primary" size="mini" @click="revisit('0')"
+                  >外地号码</el-button
+                >
+              </div>
+              <el-button slot="reference" type="text">回访拨号</el-button>
+            </el-popover>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="事件标题">
+                <el-input :value="caseForm.title" size="small" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="事件内容">
+                <el-input :value="caseForm.description" size="small" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row v-show="this.caseImage.length > 0">
+            <el-form-item label="事件图片">
+              <!-- 图片展示 -->
+              <div class="image-container">
+                <el-image
+                  v-for="img in caseImage"
+                  :key="img"
+                  :src="img"
+                  fit="fill"
+                  class="case-image"
+                  :preview-src-list="caseImage"
+                />
+              </div>
+            </el-form-item>
+          </el-row>
+        </el-collapse-item>
+      </el-collapse>
       <!--<el-row>-->
       <!--<el-col :span="24">-->
       <!--<el-form-item label="备注信息">-->
@@ -151,98 +196,128 @@
       width="600px"
       append-to-body
       custom-class="sound-dialog"
-      @close="closeSound">
-      <audio-player ref="adplayer" :the-url="sound.url" :the-control-ist="sound.controlList"/>
+      @close="closeSound"
+    >
+      <audio-player
+        ref="adplayer"
+        :the-url="sound.url"
+        :the-control-ist="sound.controlList"
+      />
     </el-dialog>
   </div>
 </template>
 
 <script>
 // import { caseDetail } from '@/api/callCase'
-import { getSoundName } from '@/api/sound'
-import AudioPlayer from '@/components/AudioPlayer/AudioPlayer'
+import { getSoundName } from "@/api/sound";
+import AudioPlayer from "@/components/AudioPlayer/AudioPlayer";
 
 export default {
-  name: 'CaseFormProcess',
+  name: "CaseFormProcess",
   components: { AudioPlayer },
   props: {
     id: {
       type: String,
-      default: ''
+      default: "",
     }, // 事件id（主键id）
     caseForm: {
       type: Object,
       default() {
-        return {}
-      }
-    }
+        return {};
+      },
+    },
   },
   data() {
     return {
+      activeName: 1,
       sound: {
-        url: '',
-        controlList: 'noDownload noSpeed onlyOnePlaying'
+        url: "",
+        controlList: "noDownload noSpeed onlyOnePlaying",
       },
       popoverVisible: false, // 选择本地外地呼叫的弹窗
-      soundShow: false // 显示音频弹窗
-    }
+      soundShow: false, // 显示音频弹窗
+    };
   },
   computed: {
     address() {
-      const address_ori = [this.caseForm.areaName, this.caseForm.streetName, this.caseForm.communityName, this.caseForm.fieldintro]
-      const address = address_ori.filter(item => item && item.length > 0)
-      return address.join('-')
+      const address_ori = [
+        this.caseForm.areaName,
+        this.caseForm.streetName,
+        this.caseForm.communityName,
+        this.caseForm.fieldintro,
+      ];
+      const address = address_ori.filter((item) => item && item.length > 0);
+      return address.join("-");
     },
-    caseImage(){
-      if(this.caseForm.caseImage){
-        const base_url = process.env.BASE_API + '/static/'
-        const image_ori = this.caseForm.caseImage.split(';')
-        const imageList = image_ori.map(item=>base_url+ item)
-        return imageList
-      }else{
-        return []
+    caseImage() {
+      if (this.caseForm.caseImage) {
+        const base_url = process.env.BASE_API + "/static/";
+        const image_ori = this.caseForm.caseImage.split(";");
+        const imageList = image_ori.map((item) => base_url + item);
+        return imageList;
+      } else {
+        return [];
       }
-    }
+    },
   },
   methods: {
     // 播放录音
     playSound(sound) {
       if (sound) {
-        getSoundName(sound).then(res => {
-          const recordName = res.data
+        getSoundName(sound).then((res) => {
+          const recordName = res.data;
           if (recordName) {
-            this.sound.url = recordName
-            this.soundShow = true
+            this.sound.url = recordName;
+            this.soundShow = true;
           } else {
-            this.$message.warning('无录音')
+            this.$message.warning("无录音");
           }
-        })
+        });
       } else {
-        this.$message.warning('无录音')
+        this.$message.warning("无录音");
       }
     },
     // 关闭播放弹窗
     closeSound() {
-      this.$refs.adplayer.pausePlay()
+      this.$refs.adplayer.pausePlay();
     },
     // 拨打回访电话
     revisit(middleString) {
       // middleString为空或0，分别表示本地或外地
-      const tel = '9' + middleString + this.caseForm.reporterPhone
-      this.$store.dispatch('dial', tel)
-      this.popoverVisible = false
-    }
-  }
-}
+      const tel = "9" + middleString + this.caseForm.reporterPhone;
+      this.$store.dispatch("dial", tel);
+      this.popoverVisible = false;
+    },
+  },
+};
 </script>
 <style lang="scss" scoped>
-  .image-container{
-    display: flex;
-    justify-content: flex-start;
-    .case-image{
-      width:100px;
-      height:100px;
-      margin-right: 10px;
-    }
+.image-container {
+  display: flex;
+  justify-content: flex-start;
+  .case-image {
+    width: 100px;
+    height: 100px;
+    margin-right: 10px;
   }
+}
+.collapse-title {
+  font-size: 14px;
+  color: #606266;
+  font-weight: 800;
+  position: absolute;
+  right: 80px;
+  margin-top: -85px;
+}
+/deep/.el-collapse-item__arrow{
+  margin-top: -85px;
+}
+/deep/.el-collapse {
+  border: 0;
+}
+/deep/.el-collapse-item__header {
+  justify-content: end;
+  border: 0;
+  height: 0;
+}
 </style>
diff --git a/src/views/caseManage/caseCommon/caseFormRead.vue b/src/views/caseManage/caseCommon/caseFormRead.vue
index 897023a..7fa39af 100644
--- a/src/views/caseManage/caseCommon/caseFormRead.vue
+++ b/src/views/caseManage/caseCommon/caseFormRead.vue
@@ -4,134 +4,173 @@
       <el-row :gutter="20">
         <el-col :span="6">
           <el-form-item label="事件编号">
-            <el-input :value="caseForm.caseId" size="small"/>
+            <el-input :value="caseForm.caseId" size="small" />
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="来电时间">
-            <el-input :value="caseForm.callTime" size="small"/>
+            <el-input :value="caseForm.callTime" size="small" />
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="联系人">
-            <el-input :value="caseForm.reporterName" size="small"/>
+            <el-input :value="caseForm.reporterName" size="small" />
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="联系电话">
-            <el-input :value="caseForm.reporterPhone" size="small"/>
+            <el-input :value="caseForm.reporterPhone" size="small" />
           </el-form-item>
         </el-col>
       </el-row>
       <el-row :gutter="20">
         <el-col :span="6">
           <el-form-item label="事件来源">
-            <el-input :value="caseForm.sourceName" size="small"/>
+            <el-input :value="caseForm.sourceName" size="small" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="事件类型">
+            <el-input :value="caseForm.sourceType" size="small" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="精细化平台事件编号">
+            <el-input :value="caseForm.sourceNumber" size="small" />
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="事件分类">
-            <el-input :value="caseForm.eorcName" size="small"/>
+            <el-input :value="caseForm.eorcName" size="small" />
             <!--<el-input :value="caseForm.eorcName + '/' + caseForm.caseTypeName" size="small"/>-->
             <!--<el-input :value="caseForm.eorcName + '/' + caseForm.caseTypeName + '/' + caseForm.caseDetailTypeName" size="small"/>-->
           </el-form-item>
         </el-col>
-        <el-col :span="6">
-          <el-form-item label="紧急程度">
-            <el-input :value="caseForm.caseLevelName" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="限办日期">
-            <el-input :value="caseForm.limitedTime" size="small"/>
-          </el-form-item>
-        </el-col>
       </el-row>
       <el-row :gutter="20">
         <el-col :span="6">
+          <el-form-item label="限办日期">
+            <el-input :value="caseForm.limitedTime" size="small" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
           <el-form-item label="事件地址">
             <!--<el-input :value="caseForm.areaName + '-' + caseForm.streetName + '-' + caseForm.communityName + '-' + caseForm.fieldintro" size="small"/>-->
-            <el-input :value="address" size="small"/>
+            <el-input :value="address" size="small" />
           </el-form-item>
         </el-col>
         <el-col :span="6">
-          <el-form-item label="事件辖区">
-            <el-input :value="caseForm.areaName" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="典型案例">
-            <el-input :value="caseForm.isTypical === '1' ? '是' : '否'" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="要情">
-            <el-input :value="caseForm.isImportant === '1' ? '是' : '否'" size="small"/>
+          <el-form-item label="事件状态">
+            <el-input :value="caseForm.caseLevelName" size="small" />
           </el-form-item>
         </el-col>
       </el-row>
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item label="当前事件状态">
-            <el-input :value="caseForm.stateName" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="当前处理方式">
-            <el-input :value="caseForm.caseStateName" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="需要回访">
-            <el-input :value="caseForm.isReturnVisit === '1' ? '是' : '否'" size="small"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row v-if="caseForm.sound" :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="受理录音">
-            <el-input :value="caseForm.sound" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-button type="text" @click="playSound(caseForm.sound)">播放录音</el-button>
-      </el-row>
-      <el-row v-if="caseForm.satisfactionSound" :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="回访录音">
-            <el-input :value="caseForm.satisfactionSound" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-button type="text" @click="playSound(caseForm.satisfactionSound)">播放录音</el-button>
-      </el-row>
-      <el-row>
-        <el-col :span="24">
-          <el-form-item label="事件标题">
-            <el-input :value="caseForm.title" size="small"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row>
-        <el-col :span="24">
-          <el-form-item label="事件内容">
-            <el-input :value="caseForm.description" size="small"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row v-show="this.caseImage.length>0">
-        <el-form-item label="事件图片">
-        <!-- 图片展示 -->
-        <div class="image-container">
-          <el-image v-for="img in caseImage" :key="img" :src="img" fit="fill" class="case-image" :preview-src-list="caseImage"/>
-        </div>
-        </el-form-item>
-      </el-row>
-      <!--<el-row>-->
-      <!--<el-col :span="24">-->
-      <!--<el-form-item label="备注信息">-->
-      <!--<el-input :value="caseForm.remarks" size="small"/>-->
-      <!--</el-form-item>-->
-      <!--</el-col>-->
-      <!--</el-row>-->
+      <el-collapse v-model="activeName" accordion>
+        <el-collapse-item name="1">
+          <template slot="title">
+            <span class="collapse-title">更多信息</span>
+          </template>
+          <el-row :gutter="20">
+            <el-col :span="6">
+              <el-form-item label="事件辖区">
+                <el-input :value="caseForm.areaName" size="small" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="典型案例">
+                <el-input
+                  :value="caseForm.isTypical === '1' ? '是' : '否'"
+                  size="small"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="要情">
+                <el-input
+                  :value="caseForm.isImportant === '1' ? '是' : '否'"
+                  size="small"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="当前事件状态">
+                <el-input :value="caseForm.stateName" size="small" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="当前处理方式">
+                <el-input :value="caseForm.caseStateName" size="small" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="需要回访">
+                <el-input
+                  :value="caseForm.isReturnVisit === '1' ? '是' : '否'"
+                  size="small"
+                />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row v-if="caseForm.sound" :gutter="20">
+            <el-col :span="12">
+              <el-form-item label="受理录音">
+                <el-input :value="caseForm.sound" size="small" />
+              </el-form-item>
+            </el-col>
+            <el-button type="text" @click="playSound(caseForm.sound)"
+              >播放录音</el-button
+            >
+          </el-row>
+          <el-row v-if="caseForm.satisfactionSound" :gutter="20">
+            <el-col :span="12">
+              <el-form-item label="回访录音">
+                <el-input :value="caseForm.satisfactionSound" size="small" />
+              </el-form-item>
+            </el-col>
+            <el-button
+              type="text"
+              @click="playSound(caseForm.satisfactionSound)"
+              >播放录音</el-button
+            >
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="事件标题">
+                <el-input :value="caseForm.title" size="small" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="事件内容">
+                <el-input :value="caseForm.description" size="small" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row v-show="this.caseImage.length > 0">
+            <el-form-item label="事件图片">
+              <!-- 图片展示 -->
+              <div class="image-container">
+                <el-image
+                  v-for="img in caseImage"
+                  :key="img"
+                  :src="img"
+                  fit="fill"
+                  class="case-image"
+                  :preview-src-list="caseImage"
+                />
+              </div>
+            </el-form-item>
+          </el-row>
+          <!--<el-row>-->
+          <!--<el-col :span="24">-->
+          <!--<el-form-item label="备注信息">-->
+          <!--<el-input :value="caseForm.remarks" size="small"/>-->
+          <!--</el-form-item>-->
+          <!--</el-col>-->
+          <!--</el-row>-->
+        </el-collapse-item>
+      </el-collapse>
     </el-form>
     <!--播放音频弹窗-->
     <el-dialog
@@ -140,90 +179,120 @@
       width="600px"
       append-to-body
       custom-class="sound-dialog"
-      @close="closeSound">
-      <audio-player ref="adplayer" :the-url="sound.url" :the-control-ist="sound.controlList"/>
+      @close="closeSound"
+    >
+      <audio-player
+        ref="adplayer"
+        :the-url="sound.url"
+        :the-control-ist="sound.controlList"
+      />
     </el-dialog>
   </div>
 </template>
 
 <script>
 // import { caseDetail } from '@/api/callCase'
-import { getSoundName } from '@/api/sound'
-import AudioPlayer from '@/components/AudioPlayer/AudioPlayer'
+import { getSoundName } from "@/api/sound";
+import AudioPlayer from "@/components/AudioPlayer/AudioPlayer";
 
 export default {
-  name: 'CaseFormRead',
+  name: "CaseFormRead",
   components: { AudioPlayer },
   props: {
     id: {
       type: String,
-      default: ''
+      default: "",
     }, // 事件id（主键id）
     caseForm: {
       type: Object,
       default() {
-        return {}
-      }
-    }
+        return {};
+      },
+    },
   },
   data() {
     return {
+      activeName: 1,
       sound: {
-        url: '',
-        controlList: 'noDownload noSpeed onlyOnePlaying'
+        url: "",
+        controlList: "noDownload noSpeed onlyOnePlaying",
       },
-      soundShow: false // 显示音频弹窗
-    }
+      soundShow: false, // 显示音频弹窗
+    };
   },
   computed: {
     address() {
-      const address_ori = [this.caseForm.areaName, this.caseForm.streetName, this.caseForm.communityName, this.caseForm.fieldintro]
-      const address = address_ori.filter(item => item && item.length > 0)
-      return address.join('-')
+      const address_ori = [
+        this.caseForm.areaName,
+        this.caseForm.streetName,
+        this.caseForm.communityName,
+        this.caseForm.fieldintro,
+      ];
+      const address = address_ori.filter((item) => item && item.length > 0);
+      return address.join("-");
     },
-    caseImage(){
-      if(this.caseForm.caseImage){
-        const base_url = process.env.BASE_API + '/static/'
-        const image_ori = this.caseForm.caseImage.split(';')
-        const imageList = image_ori.map(item=>base_url+ item)
-        return imageList
-      }else{
-        return []
+    caseImage() {
+      if (this.caseForm.caseImage) {
+        const base_url = process.env.BASE_API + "/static/";
+        const image_ori = this.caseForm.caseImage.split(";");
+        const imageList = image_ori.map((item) => base_url + item);
+        return imageList;
+      } else {
+        return [];
       }
-    }
+    },
   },
   methods: {
     // 播放录音
     playSound(sound) {
       if (sound) {
-        getSoundName(sound).then(res => {
-          const recordName = res.data
+        getSoundName(sound).then((res) => {
+          const recordName = res.data;
           if (recordName) {
-            this.sound.url = recordName
-            this.soundShow = true
+            this.sound.url = recordName;
+            this.soundShow = true;
           } else {
-            this.$message.warning('无录音')
+            this.$message.warning("无录音");
           }
-        })
+        });
       } else {
-        this.$message.warning('无录音')
+        this.$message.warning("无录音");
       }
     },
     // 关闭播放弹窗
     closeSound() {
-      this.$refs.adplayer.pausePlay()
-    }
-  }
-}
+      this.$refs.adplayer.pausePlay();
+    },
+  },
+};
 </script>
 <style lang="scss" scoped>
-  .image-container{
-    display: flex;
-    justify-content: flex-start;
-    .case-image{
-      width:100px;
-      height:100px;
-      margin-right: 10px;
-    }
+.image-container {
+  display: flex;
+  justify-content: flex-start;
+  .case-image {
+    width: 100px;
+    height: 100px;
+    margin-right: 10px;
   }
+}
+.collapse-title {
+  font-size: 14px;
+  color: #606266;
+  font-weight: 800;
+  position: absolute;
+  right: 80px;
+  margin-top: -85px;
+}
+/deep/.el-collapse-item__arrow {
+  margin-top: -85px;
+}
+/deep/.el-collapse {
+  border: 0;
+}
+/deep/.el-collapse-item__header {
+  justify-content: end;
+  border: 0;
+  height: 0;
+}
 </style>
diff --git a/src/views/caseManage/caseCommon/caseImgShow.vue b/src/views/caseManage/caseCommon/caseImgShow.vue
new file mode 100644
index 0000000..c6c911d
--- /dev/null
+++ b/src/views/caseManage/caseCommon/caseImgShow.vue
@@ -0,0 +1,42 @@
+<template>
+  <SwiperImg
+    v-if="imgs.length > 0"
+    style="width: 300px; height: 450px; overflow: hidden"
+    :gallery="imgs"
+  />
+  <el-image v-else>
+    <div slot="error" class="image-slot">
+      暂无图片
+    </div>
+  </el-image>
+</template>
+
+<script>
+import SwiperImg from "./SwiperImg.vue";
+export default {
+  components: {
+    SwiperImg,
+  },
+  props: {
+    imgs: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.el-image {
+  margin-top: 3px;
+  width: 300px;
+  height: 450px;
+  line-height: 450px;
+  overflow: hidden;
+  text-align: center;
+  background: #f5f7fa;
+  color: #909399;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/caseManage/caseCommon/caseProcessTable.vue b/src/views/caseManage/caseCommon/caseProcessTable.vue
new file mode 100644
index 0000000..4c54b7f
--- /dev/null
+++ b/src/views/caseManage/caseCommon/caseProcessTable.vue
@@ -0,0 +1,423 @@
+<template>
+  <div class="case-wrap">
+      {{showAll}}
+      {{listData}}
+    <div class="showAllDetail">
+      <el-switch
+        v-model="showAll"
+        active-color="#13ce66"
+        active-text="展开全部信息"
+      >
+      </el-switch>
+    </div>
+    <div class="moreDetail" v-show="!showAll">
+      <!-- 两条数据显示 -->
+      <!-- <div class="step-wrap" style="display:none">
+        <div class="before line">
+          <div class="icon"></div>
+          <div class="title">
+            {{ detailObj.end.processTitle }} &nbsp;&nbsp;&nbsp;&nbsp;
+            <span>{{ detailObj.end.time }}</span>
+          </div>
+          <div class="content">
+            <div class="left">
+              <p>发送人:{{ detailObj.end.sender }}</p>
+              <p>接收人:{{ detailObj.end.sender }}</p>
+              <p>处置详情:{{ detailObj.end.processTitle }}</p>
+            </div>
+            <div class="right">
+              <div class="imgs-wrap">
+                <el-image
+                  v-for="img in detailObj.end.imgs"
+                  :key="img"
+                  :src="img"
+                  class="zoom"
+                  fit="fill"
+                  :preview-src-list="caseImage(img)"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="after">
+          <div class="icon"></div>
+          <div class="title">
+            {{ detailObj.end.processTitle }} &nbsp;&nbsp;&nbsp;&nbsp;
+            <span>{{ detailObj.end.time }}</span>
+          </div>
+          <div class="content">
+            <div class="left">
+              <p>发送人:{{ detailObj.end.sender }}</p>
+              <p>接收人:{{ detailObj.end.sender }}</p>
+              <p>处置详情:{{ detailObj.end.processTitle }}</p>
+            </div>
+            <div class="right">
+              <div class="imgs-wrap">
+                <el-image
+                  v-for="img in detailObj.end.imgs"
+                  :key="img"
+                  :src="img"
+                  class="zoom"
+                  fit="fill"
+                  :preview-src-list="caseImage(img)"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div> -->
+        <div class="step-more-wrap">
+        <div class="detail-wrap" v-for="(item,index) in tempList" :Key="index">
+          <div class="leftLine" v-if="index != tempList.length-1"></div>
+          <div class="title">
+          <div v-if="item.nextId" class="done"></div>
+          <div v-else class="process"></div>
+            {{ item.processTitle }} &nbsp;&nbsp;&nbsp;&nbsp;
+            <span>{{ item.time }}</span>
+          </div>
+          <div class="content">
+            <div class="left">
+              <p>发送人:{{ item.sender }}</p>
+              <p>接收人:{{ item.sender }}</p>
+              <p>处置详情:{{item.processTitle }}</p>
+            </div>
+            <div class="right">
+              <div class="imgs-wrap">
+                <el-image
+                  v-for="img in item.imgs"
+                  :key="img"
+                  :src="img"
+                  class="zoom"
+                  fit="fill"
+                  :preview-src-list="caseImage(img)"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="moreDetail">
+      <div class="step-more-wrap" v-show="showAll">
+        <div class="detail-wrap" v-for="(item,index) in listData" :Key="index">
+          <div class="leftLine" v-if="index != listData.length-1"></div>
+          <div class="title">
+          <div v-if="item.nextId" class="done"></div>
+          <div v-else class="process"></div>
+            {{ item.processTitle }} &nbsp;&nbsp;&nbsp;&nbsp;
+            <span>{{ item.time }}</span>
+          </div>
+          <div class="content">
+            <div class="left">
+              <p>发送人:{{ item.sender }}</p>
+              <p>接收人:{{ item.sender }}</p>
+              <p :title="item.processTitle">处置详情:{{item.processTitle }}</p>
+            </div>
+            <div class="right">
+              <div class="imgs-wrap">
+                <el-image
+                  v-for="img in item.imgs"
+                  :key="img"
+                  :src="img"
+                  class="zoom"
+                  fit="fill"
+                  :preview-src-list="caseImage(img)"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    list: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      showAll: false,
+      photoVisible: false,
+      bigImgUrl: "",
+      detailObj: {
+        start: {},
+        end: {},
+      },
+      imgs: [
+        "https://t7.baidu.com/it/u=1742010762,3975931984&fm=193&f=GIF",
+        "https://t7.baidu.com/it/u=1302518827,2012573433&fm=193&f=GIF",
+        "https://t7.baidu.com/it/u=1216634532,1327384749&fm=193&f=GIF",
+      ],
+      listData: [], // 全部数据
+      tempList: [], // 首尾数据
+    };
+  },
+  watch:{
+    list(val){
+      // alert(val)
+      console.log(val)
+    }
+  },
+  created() {
+          // alert(this.list)
+    // this.listData = this.treeDataToCompressed(this.list).reverse();
+      // 处理之后的数据 获取首尾数据
+    this.listData = this.list;
+    this.tempList = [this.listData[0],this.listData.at(-1)];
+    this.listData = this.listData.map((item) => {
+      item.imgs = this.imgs;
+      return item; 
+    });
+  },
+  methods: {
+    showBigImage(e) {
+      //点击图片函数，点击后，把photoVisible设置成true
+      if (e != "") {
+        this.photoVisible = true;
+        this.bigImgUrl = e.currentTarget.src;
+      }
+    },
+    caseImage(img) {
+      return img ? [].concat(img) : [];
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.case-wrap {
+  width: 60vw;
+  padding-top: 20px;
+}
+.before::after {
+  content: "";
+  display: inline-block;
+  position: absolute;
+  top: 12px;
+  left: -31px;
+  width: 2px;
+  height: 90%;
+  border-left: 2px dashed #ccc;
+}
+.moreDetail {
+  font-size: 14px !important;
+  position: relative;
+  margin-top: 20px;
+}
+.step-wrap {
+  box-sizing: border-box;
+  height: 300px;
+  padding-left: 30px;
+}
+.step-wrap {
+  .before {
+    position: relative;
+    height: 50%;
+  }
+  .after {
+    position: relative;
+    height: 50%;
+  }
+  .content {
+    margin-top: 20px;
+    width: 95%;
+    height: 100px;
+    background: #f0f0f0;
+    padding: 20px 30px;
+    border-radius: 10px;
+    display: flex;
+
+    .left {
+      width: 420px;
+      p {
+        font-size: 14px !important;
+        padding: 0;
+        margin: 0;
+        margin-top: 2px;
+        line-height: 20px;
+      }
+    }
+    .right {
+      position: relative;
+      flex: 1;
+    }
+  }
+}
+.title {
+  font-weight: 800;
+  span {
+    color: #ccc;
+    font-weight: 400 !important;
+  }
+}
+.moreDetail .process {
+  z-index: 10;
+  content: "";
+  display: inline-block;
+  width: 25px;
+  height: 25px;
+  background: url("../../../assets/global_images/process.png") no-repeat;
+  position: absolute;
+  top: -8px;
+  left: -12px;
+  background-size: contain;
+}
+.moreDetail .done {
+  z-index: 10;
+  content: "";
+  display: inline-block;
+  width: 25px;
+  height: 25px;
+  background: url("../../../assets/global_images/done.png") no-repeat;
+  position: absolute;
+  bottom: -8px;
+  left: -12px;
+  background-size: contain;
+}
+.before .icon,.after .icon {
+  z-index: 10;
+  display: inline-block;
+  width: 25px;
+  height: 25px;
+  background: url("../../../assets/global_images/done.png") no-repeat;
+  position: absolute;
+  top: -3px;
+  left: -42px;
+  background-size: contain;
+}
+.imgs-wrap {
+  position: absolute;
+  left: -5px;
+  top: -10px;
+  width: 400px;
+  height: 80px;
+  overflow-y: auto;
+}
+.text-over {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.text-over-more {
+  overflow: hidden; // 溢出隐藏
+  text-overflow: ellipsis; // 溢出用省略号显示
+  display: -webkit-box; // 作为弹性伸缩盒子模型显示。
+  -webkit-box-orient: vertical; // 设置伸缩盒子的子元素排列方式：从上到下垂直排列
+  -webkit-line-clamp: 2; // 显示的行数
+}
+/deep/.zoom {
+  display: inline-block;
+  box-sizing: border-box;
+  width: 120px;
+  height: 70px;
+  margin-right: 10px;
+  margin-top: 5px;
+  cursor: pointer;
+}
+.leftLine{
+    position: absolute;
+    top: 18px;
+    left: -19px;
+    width: 2px;
+    height: 99%;
+    border-left: 2px dashed #ccc;
+}
+.moreDetail {
+  .step-more-wrap {
+    box-sizing: border-box;
+    padding-left: 30px;
+    height: 360px;
+    overflow-y: auto;
+    .detail-wrap {
+      margin-top: 3px;
+      margin-bottom: 20px;
+      position: relative;
+      .title{
+        position: relative;
+        .process{
+          z-index: 10 !important;
+          position: absolute;
+          top: -3px;
+          left: -30px;
+          width: 25px;
+          height: 25px;
+          background: url("../../../assets/global_images/process.png") no-repeat;
+          background-size: contain;
+        }
+        .done{
+          z-index: 10 !important;
+          position: absolute;
+          top: -3px;
+          left: -30px;
+          width: 25px;
+          height: 25px;
+          background: url("../../../assets/global_images/done.png") no-repeat;
+          background-size: contain;
+        }
+      }
+      p {
+        font-size: 14px !important;
+        padding: 0;
+        margin: 0;
+        margin-top: 2px;
+        line-height: 20px;
+        width: 90%;
+          overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+      }
+      .content {
+        margin-top: 20px;
+        width: 96%;
+        height: 100px;
+        background: #f0f0f0;
+        padding: 20px 30px;
+        border-radius: 10px;
+        display: flex;
+
+        .left {
+          width: 420px;
+          p {
+            font-size: 14px !important;
+            padding: 0;
+            margin: 0;
+            margin-top: 2px;
+            line-height: 20px;
+          }
+        }
+        .right {
+          position: relative;
+          flex: 1;
+        }
+      }
+    }
+  }
+}
+
+::-webkit-scrollbar {
+  /*滚动条整体样式*/
+  width: 6px; /*高宽分别对应横竖滚动条的尺寸*/
+  height: 8px;
+}
+::-webkit-scrollbar-thumb {
+  /*滚动条里面小方块*/
+  border-radius: 5px;
+  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  background: rgba(0, 0, 0, 0.1);
+}
+::-webkit-scrollbar-track {
+  /*滚动条里面轨道*/
+  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  border-radius: 5px;
+  background: rgba(0, 0, 0, 0.1);
+}
+
+</style>
\ No newline at end of file
diff --git a/src/views/caseManage/caseCommon/process.json b/src/views/caseManage/caseCommon/process.json
new file mode 100644
index 0000000..db58784
--- /dev/null
+++ b/src/views/caseManage/caseCommon/process.json
@@ -0,0 +1,251 @@
+{
+    "state": true,
+    "msg": "",
+    "data": [
+        {
+            "id": "1E03D7C7D3C84E838D1A4C6E8DFC4240",
+            "info": {
+                "id": "1E03D7C7D3C84E838D1A4C6E8DFC4240",
+                "businessId": "aa00ac6d759540d4942de3b00990bacc",
+                "processType": "15",
+                "processInstId": "36008397",
+                "processTaskId": null,
+                "processTaskName": null,
+                "processAssigneeId": "465546017",
+                "processAssigneeName": "呼叫中心系统",
+                "processNextTaskId": "36008446",
+                "processNextTaskName": "专项系统对接待分拨",
+                "processNextAssigneeId": "465546017",
+                "processNextAssigneeName": "呼叫中心系统",
+                "processStepTitle": "新建",
+                "approveMsg": null,
+                "processStepName": "提交",
+                "regulationCompleteTime": null,
+                "createTime": "2022-09-22 09:57:03",
+                "parentTitleId": null,
+                "fileId": null,
+                "parentInstanceId": null,
+                "applyWay": null,
+                "dataLv": null,
+                "processStepExtend": null,
+                "isAuto": null,
+                "processAssigneeDeptName": "专项系统对接",
+                "processNextAssigneeDeptName": "专项系统对接"
+            },
+            "parentTitleId": null,
+            "processStepTitle": "新建",
+            "children": [
+                {
+                    "id": "1AB4B8BD0E034AE08DFF0EAE1F7750DE",
+                    "info": {
+                        "id": "1AB4B8BD0E034AE08DFF0EAE1F7750DE",
+                        "businessId": "aa00ac6d759540d4942de3b00990bacc",
+                        "processType": "15",
+                        "processInstId": "36008397",
+                        "processTaskId": "36008446",
+                        "processTaskName": "专项系统对接待分拨",
+                        "processAssigneeId": "465546017",
+                        "processAssigneeName": "呼叫中心系统",
+                        "processNextTaskId": "36008473",
+                        "processNextTaskName": "蓉江新区待分拨",
+                        "processNextAssigneeId": "465546577",
+                        "processNextAssigneeName": "刘晓梅",
+                        "processStepTitle": "上报蓉江新区",
+                        "approveMsg": null,
+                        "processStepName": null,
+                        "regulationCompleteTime": null,
+                        "createTime": "2022-09-22 09:57:03",
+                        "parentTitleId": "1E03D7C7D3C84E838D1A4C6E8DFC4240",
+                        "fileId": null,
+                        "parentInstanceId": null,
+                        "applyWay": null,
+                        "dataLv": null,
+                        "processStepExtend": null,
+                        "isAuto": null,
+                        "processAssigneeDeptName": "专项系统对接",
+                        "processNextAssigneeDeptName": "蓉江新区"
+                    },
+                    "parentTitleId": "1E03D7C7D3C84E838D1A4C6E8DFC4240",
+                    "processStepTitle": "上报蓉江新区",
+                    "children": [
+                        {
+                            "id": "7F644436F8B04DAEBEB475214F64783E",
+                            "info": {
+                                "id": "7F644436F8B04DAEBEB475214F64783E",
+                                "businessId": "aa00ac6d759540d4942de3b00990bacc",
+                                "processType": "15",
+                                "processInstId": "36008397",
+                                "processTaskId": "36008473",
+                                "processTaskName": "蓉江新区待分拨",
+                                "processAssigneeId": "465546577",
+                                "processAssigneeName": "刘晓梅",
+                                "processNextTaskId": "36010141",
+                                "processNextTaskName": "蓉江新区待分拨",
+                                "processNextAssigneeId": "465546577",
+                                "processNextAssigneeName": "刘晓梅",
+                                "processStepTitle": "立案",
+                                "approveMsg": null,
+                                "processStepName": null,
+                                "regulationCompleteTime": null,
+                                "createTime": "2022-09-22 10:07:02",
+                                "parentTitleId": "1AB4B8BD0E034AE08DFF0EAE1F7750DE",
+                                "fileId": null,
+                                "parentInstanceId": null,
+                                "applyWay": null,
+                                "dataLv": null,
+                                "processStepExtend": null,
+                                "isAuto": null,
+                                "processAssigneeDeptName": "蓉江新区",
+                                "processNextAssigneeDeptName": "蓉江新区"
+                            },
+                            "parentTitleId": "1AB4B8BD0E034AE08DFF0EAE1F7750DE",
+                            "processStepTitle": "立案",
+                            "children": [
+                                {
+                                    "id": "156D83539A10444BBDE445E132E551C1",
+                                    "info": {
+                                        "id": "156D83539A10444BBDE445E132E551C1",
+                                        "businessId": "aa00ac6d759540d4942de3b00990bacc",
+                                        "processType": "15",
+                                        "processInstId": "36008397",
+                                        "processTaskId": "36010141",
+                                        "processTaskName": "蓉江新区待分拨",
+                                        "processAssigneeId": "465546577",
+                                        "processAssigneeName": "刘晓梅",
+                                        "processNextTaskId": "36010490",
+                                        "processNextTaskName": "高校园区管理处待分拨",
+                                        "processNextAssigneeId": "465546697",
+                                        "processNextAssigneeName": "张萍",
+                                        "processStepTitle": "蓉江新区分拨",
+                                        "approveMsg": null,
+                                        "processStepName": null,
+                                        "regulationCompleteTime": null,
+                                        "createTime": "2022-09-22 10:08:11",
+                                        "parentTitleId": "7F644436F8B04DAEBEB475214F64783E",
+                                        "fileId": "371daad0c65b871f532a49ccae8d34dc",
+                                        "parentInstanceId": null,
+                                        "applyWay": "1",
+                                        "dataLv": null,
+                                        "processStepExtend": null,
+                                        "isAuto": null,
+                                        "processAssigneeDeptName": "蓉江新区",
+                                        "processNextAssigneeDeptName": "高校园区管理处"
+                                    },
+                                    "parentTitleId": "7F644436F8B04DAEBEB475214F64783E",
+                                    "processStepTitle": "蓉江新区分拨",
+                                    "children": [
+                                        {
+                                            "id": "DCEB4053DCD040FC907CA8CBDAFB9BED",
+                                            "info": {
+                                                "id": "DCEB4053DCD040FC907CA8CBDAFB9BED",
+                                                "businessId": "aa00ac6d759540d4942de3b00990bacc",
+                                                "processType": "15",
+                                                "processInstId": "36008397",
+                                                "processTaskId": "36010490",
+                                                "processTaskName": "高校园区管理处待分拨",
+                                                "processAssigneeId": "465546697",
+                                                "processAssigneeName": "张萍",
+                                                "processNextTaskId": "36021140",
+                                                "processNextTaskName": "高校园区管理处待分拨",
+                                                "processNextAssigneeId": "465546697",
+                                                "processNextAssigneeName": "张萍",
+                                                "processStepTitle": "签收",
+                                                "approveMsg": null,
+                                                "processStepName": null,
+                                                "regulationCompleteTime": null,
+                                                "createTime": "2022-09-22 11:11:10",
+                                                "parentTitleId": "156D83539A10444BBDE445E132E551C1",
+                                                "fileId": null,
+                                                "parentInstanceId": null,
+                                                "applyWay": "1",
+                                                "dataLv": null,
+                                                "processStepExtend": null,
+                                                "isAuto": null,
+                                                "processAssigneeDeptName": "高校园区管理处",
+                                                "processNextAssigneeDeptName": "高校园区管理处"
+                                            },
+                                            "parentTitleId": "156D83539A10444BBDE445E132E551C1",
+                                            "processStepTitle": "签收",
+                                            "children": [
+                                                {
+                                                    "id": "0DDDAFE1B10C444B95E5D61E8483F1D4",
+                                                    "info": {
+                                                        "id": "0DDDAFE1B10C444B95E5D61E8483F1D4",
+                                                        "businessId": "aa00ac6d759540d4942de3b00990bacc",
+                                                        "processType": "15",
+                                                        "processInstId": "36008397",
+                                                        "processTaskId": "36021140",
+                                                        "processTaskName": "高校园区管理处待分拨",
+                                                        "processAssigneeId": "465546697",
+                                                        "processAssigneeName": "张萍",
+                                                        "processNextTaskId": "36021489",
+                                                        "processNextTaskName": "蓉江新区办理结果确认",
+                                                        "processNextAssigneeId": "465546577",
+                                                        "processNextAssigneeName": "刘晓梅",
+                                                        "processStepTitle": "高校园区管理处提交结果",
+                                                        "approveMsg": "已处理",
+                                                        "processStepName": null,
+                                                        "regulationCompleteTime": null,
+                                                        "createTime": "2022-09-22 11:11:38",
+                                                        "parentTitleId": "DCEB4053DCD040FC907CA8CBDAFB9BED",
+                                                        "fileId": "ec8a05e25dae5571154f17e998653339",
+                                                        "parentInstanceId": null,
+                                                        "applyWay": null,
+                                                        "dataLv": null,
+                                                        "processStepExtend": null,
+                                                        "isAuto": null,
+                                                        "processAssigneeDeptName": "高校园区管理处",
+                                                        "processNextAssigneeDeptName": "蓉江新区"
+                                                    },
+                                                    "parentTitleId": "DCEB4053DCD040FC907CA8CBDAFB9BED",
+                                                    "processStepTitle": "高校园区管理处提交结果",
+                                                    "children": [
+                                                        {
+                                                            "id": "ED0DDD8B224747B88F051E28F1A4AF39",
+                                                            "info": {
+                                                                "id": "ED0DDD8B224747B88F051E28F1A4AF39",
+                                                                "businessId": "aa00ac6d759540d4942de3b00990bacc",
+                                                                "processType": "15",
+                                                                "processInstId": "36008397",
+                                                                "processTaskId": "36021489",
+                                                                "processTaskName": "蓉江新区办理结果确认",
+                                                                "processAssigneeId": "465546577",
+                                                                "processAssigneeName": "刘晓梅",
+                                                                "processNextTaskId": null,
+                                                                "processNextTaskName": null,
+                                                                "processNextAssigneeId": null,
+                                                                "processNextAssigneeName": null,
+                                                                "processStepTitle": "结案",
+                                                                "approveMsg": null,
+                                                                "processStepName": "结束",
+                                                                "regulationCompleteTime": null,
+                                                                "createTime": "2022-09-26 09:03:08",
+                                                                "parentTitleId": "0DDDAFE1B10C444B95E5D61E8483F1D4",
+                                                                "fileId": null,
+                                                                "parentInstanceId": null,
+                                                                "applyWay": null,
+                                                                "dataLv": null,
+                                                                "processStepExtend": null,
+                                                                "isAuto": null,
+                                                                "processAssigneeDeptName": "蓉江新区",
+                                                                "processNextAssigneeDeptName": null
+                                                            },
+                                                            "parentTitleId": "0DDDAFE1B10C444B95E5D61E8483F1D4",
+                                                            "processStepTitle": "结案",
+                                                            "children": []
+                                                        }
+                                                    ]
+                                                }
+                                            ]
+                                        }
+                                    ]
+                                }
+                            ]
+                        }
+                    ]
+                }
+            ]
+        }
+    ],
+    "code": 200
+}
\ No newline at end of file
diff --git a/src/views/caseManage/caseCommon/process2.json b/src/views/caseManage/caseCommon/process2.json
new file mode 100644
index 0000000..53506ad
--- /dev/null
+++ b/src/views/caseManage/caseCommon/process2.json
@@ -0,0 +1,23 @@
+{
+    "code": 200,
+    "msg": "操作成功",
+    "success": true,
+    "data": {
+        "eventId": "866691836176740352",
+        "appCode": "A001",
+        "desc": "好吃多",
+        "status": 1,
+        "replyDatas": [
+            {
+                "id": "21345234523",
+                "time": "2021-07-19 14:42:34",
+                "name": "张三",
+                "content": "大师傅处置完成",
+                "attachments": "http://ztuploadfile.oss-cn-beijing.aliyuncs.com/%E8%BD%A6%E8%BE%86.jpeg?Expires=1934519183&OSSAccessKeyId=LTAI4G3j5y61aAVjgUB2sWXv&Signature=Ws%2BXAnQw6BPs8r3R7atb3MjzCFY%3D",
+                "status": "11",
+                "statusDesc": "成功",
+                "businessStatus": "success"
+            }
+        ]
+    }
+}
\ No newline at end of file
diff --git a/src/views/caseManage/caseDetail.vue b/src/views/caseManage/caseDetail.vue
index 0fc16f1..6444c93 100644
--- a/src/views/caseManage/caseDetail.vue
+++ b/src/views/caseManage/caseDetail.vue
@@ -4,28 +4,47 @@
     <!-- 基础信息表单 -->
     <div>
       <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-tickets"/>事件基础信息</div></el-col>
+        <el-col :span="6"
+          ><div class="title-header">
+            <i class="el-icon-tickets" />事件基础信息
+          </div></el-col
+        >
       </el-row>
-      <case-form-process v-if="showProcess" ref="caseFormProcess" :case-form="caseDetail"/>
-      <case-form-read v-else ref="caseFormRead" :case-form="caseDetail"/>
+      <case-form-process
+        v-if="showProcess"
+        ref="caseFormProcess"
+        :case-form="caseDetail"
+      />
+      <case-form-read v-else ref="caseFormRead" :case-form="caseDetail" />
     </div>
 
-    <!-- 事件地图 -->
-    <div>
+    <!-- 事件处理流程 -->
+    <div v-if="caseType != '应急事件'">
       <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-tickets"/>事件地图</div></el-col>
+        <el-col :span="6"
+          ><div class="title-header">
+            <i class="el-icon-tickets" />事件处理流程
+          </div></el-col
+        >
       </el-row>
       <el-row>
-        <el-col :span="24">
-          <f-map ref="mapDetail" style="height: 40vh; padding: 20px 0px"/>
+        <el-col :span="6">
+          <caseImgShow :imgs="caseImgs" />
+        </el-col>
+        <el-col :span="6">
+          <caseProcessTable :list="processList" />
         </el-col>
       </el-row>
     </div>
 
     <!-- 事件流程处理 -->
-    <div v-if="showProcess&&caseDetail.id">
+    <div v-if="showProcess && caseDetail.id">
       <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-tickets"/>事件流程处理</div></el-col>
+        <el-col :span="6"
+          ><div class="title-header">
+            <i class="el-icon-tickets" />事件流程处理
+          </div></el-col
+        >
       </el-row>
       <case-process
         ref="caseProcess"
@@ -42,40 +61,94 @@
     </div>
     <!-- 事件处理记录 -->
     <div v-if="caseDetail.processId">
-      <case-record ref="caseRecord" :process-id="caseDetail.processId" :id="id"/>
+      <case-record
+        ref="caseRecord"
+        :process-id="caseDetail.processId"
+        :id="id"
+      />
+    </div>
+
+    <!-- 事件地图 -->
+    <div>
+      <el-row class="table-title">
+        <el-col :span="6"
+          ><div class="title-header">
+            <i class="el-icon-tickets" />事件地图
+          </div></el-col
+        >
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <f-map ref="mapDetail" style="height: 40vh; padding: 20px 0px" />
+        </el-col>
+      </el-row>
     </div>
   </div>
 </template>
 
 <script>
-import CaseFormRead from './caseCommon/caseFormRead'
-import CaseFormProcess from './caseCommon/caseFormProcess'
-import CaseProcess from './caseCommon/caseProcess'
-import CaseRecord from './caseCommon/caseRecord'
-import { caseDetail } from '@/api/callCase'
-import FMap from '../../components/fMap/components/fMap'
-
+import CaseFormRead from "./caseCommon/caseFormRead";
+import CaseFormProcess from "./caseCommon/caseFormProcess";
+import CaseProcess from "./caseCommon/caseProcess";
+import CaseRecord from "./caseCommon/caseRecord";
+import caseImgShow from "./caseCommon/caseImgShow";
+import caseProcessTable from "./caseCommon/caseProcessTable.vue";
+import { caseDetail, eventStepList } from "@/api/callCase";
+import FMap from "../../components/fMap/components/fMap";
+import process from "./caseCommon/process.json";
 export default {
-  name: 'CaseDetail',
-  components: { FMap, CaseFormRead, CaseProcess, CaseRecord, CaseFormProcess },
+  name: "CaseDetail",
+  components: {
+    FMap,
+    CaseFormRead,
+    CaseProcess,
+    CaseRecord,
+    CaseFormProcess,
+    caseImgShow,
+    caseProcessTable,
+  },
   data() {
     return {
-      id: '',
-      taskId: '', // 当前任务id，只有任务处理的详情中需要，会签用
+      id: "",
+      taskId: "", // 当前任务id，只有任务处理的详情中需要，会签用
       caseDetail: {},
+      caseType: "",
+      caseImgs: [
+        "https://t7.baidu.com/it/u=1742010762,3975931984&fm=193&f=GIF",
+        "https://t7.baidu.com/it/u=1302518827,2012573433&fm=193&f=GIF",
+      ], // 事件流程图片
+      processList: [], // 事件流程信息
       showProcess: false,
-      wholeLoading: false
-    }
+      wholeLoading: false,
+    };
+  },
+  created() {
+    // 获取事件分类类型
+    let caseTypeMap = {
+      2: "应急事件",
+      3: "运维事件",
+      4: "精细化管理事件",
+    };
+    let caseType = caseTypeMap[this.$route.query.caseType];
+    this.caseType = caseType;
+    //   this.id = this.$route.params.id;
+    // if (this.$route.query.taskId) {
+    //   this.taskId = this.$route.query.taskId;
+    // }
+    // if (this.$route.query.showProcess) {
+    //   this.showProcess = this.$route.query.showProcess;
+    // }
+    // this.fetchDetail();
   },
   mounted() {
-    this.id = this.$route.params.id
+    this.id = this.$route.params.id;
     if (this.$route.query.taskId) {
-      this.taskId = this.$route.query.taskId
+      this.taskId = this.$route.query.taskId;
     }
     if (this.$route.query.showProcess) {
-      this.showProcess = this.$route.query.showProcess
+      this.showProcess = this.$route.query.showProcess;
     }
-    this.fetchDetail()
+    this.fetchDetail();
   },
   methods: {
     /**
@@ -83,52 +156,132 @@
      */
     fetchDetail() {
       if (this.id) {
-        this.wholeLoading = true
-        caseDetail(this.id).then(response => {
-          this.caseDetail = response.data
-          this.wholeLoading = false
-          this.$refs.mapDetail.initMap(true, this.caseDetail)
-        })
+        this.wholeLoading = true;
+        caseDetail(this.id).then((response) => {
+          this.caseDetail = response.data;
+          // if (this.caseDetail.caseImage) {
+          //     const base_url = process.env.BASE_API + "/static/";
+          //     const image_ori = this.caseDetail.caseImage.split(";");
+          //     this.caseImgs = image_ori.map((item) => base_url + item);
+          //   } else {
+          //     this.caseImgs = [];
+          //   }
+          this.wholeLoading = false;
+          this.$refs.mapDetail.initMap(true, this.caseDetail);
+        });
+
+        // 通过类型判断传递内容
+        // id为caseId
+        if (this.caseType == "运维事件") {
+          // 获取返回的数据
+          this.$nextTick(() => {
+            this.processList = this.treeDataToCompressed([
+              ...process.data,
+            ]).reverse();
+          });
+          // let propsMap = {
+          //   processTitle: "processTaskName",
+          //   time: "createTime",
+          //   sender: "processAssigneeName",
+          //   incept: "processAssigneeName",
+          //   detail: "processTaskName",
+          //   nextId: "processNextAssigneeId",
+          // };
+
+          // this.$nextTick(async ()=>{
+          //   this.processList = await this.handlePropstoArray(
+          //   this.processList,
+          //   propsMap
+          // );
+          // })
+          return;
+          this.processList = this.processList.map((item) => {
+            return {
+              processTitle: item.processTaskName,
+              time: item.createTime,
+              sender: item.processAssigneeName,
+              incept: item.processAssigneeName,
+              detail: item.processTaskName,
+              nextId: item.processNextAssigneeId,
+            };
+          });
+          console.log(this.processList);
+          return;
+          // 获取事件流程详情
+          eventStepList({ caseId: this.id }).then((res) => {
+            console.log(res);
+
+            // 获取流程节点图片以及流程数组数据
+          });
+        } else if (this.caseType == "精细化管理事件") {
+        }
+        return;
       }
     },
+    handlePropstoArray(array, props) {
+      return new Promise((resolve, reject) => {
+        let jsonData = JSON.stringify(array);
+        for (const key in props) {
+          var reg = new RegExp(props[key], "g");
+          jsonData = jsonData.replace(reg, key);
+        }
+        resolve(JSON.parse(jsonData));
+      });
+    },
+    treeDataToCompressed(source) {
+      let target = [];
+      for (const i in source) {
+        target.push(source[i].info);
+        if (
+          Array.isArray(source[i].children) &&
+          source[i].children.length > 0
+        ) {
+          target = [
+            ...target,
+            ...this.treeDataToCompressed(source[i].children),
+          ];
+        }
+      }
+      return target;
+    },
     loading() {
-      this.wholeLoading = true
+      this.wholeLoading = true;
     },
     /**
      * 提交成功之后
      */
     submitSuccess() {
-      console.log('submitSuccess')
-      this.$message.success('提交成功')
-      this.showProcess = false
-      this.$route.query.showProcess = false
-      this.wholeLoading = false
-      this.fetchDetail()
-      this.$refs['caseRecord'].fetchProcessRecords()
+      console.log("submitSuccess");
+      this.$message.success("提交成功");
+      this.showProcess = false;
+      this.$route.query.showProcess = false;
+      this.wholeLoading = false;
+      this.fetchDetail();
+      this.$refs["caseRecord"].fetchProcessRecords();
     },
     /**
      * 提交失败之后
      */
     submitError() {
-      console.log('submitError')
-      this.wholeLoading = false
-    }
-  }
-}
+      console.log("submitError");
+      this.wholeLoading = false;
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-  .table-title{
-    background-color:rgba(243, 243, 243, 1);
-    height: 46px;
-    .title-header{
-      line-height:46px;
-      color: #606266;
-      font-size: 15px;
-      i{
-        margin-left: 5px;
-        margin-right: 5px;
-      }
+.table-title {
+  background-color: rgba(243, 243, 243, 1);
+  height: 46px;
+  .title-header {
+    line-height: 46px;
+    color: #606266;
+    font-size: 15px;
+    i {
+      margin-left: 5px;
+      margin-right: 5px;
     }
   }
+}
 </style>
diff --git a/src/views/caseManage/caseManage.vue b/src/views/caseManage/caseManage.vue
index a986eaa..2f5bfea 100644
--- a/src/views/caseManage/caseManage.vue
+++ b/src/views/caseManage/caseManage.vue
@@ -180,6 +180,7 @@
       this.$router.push({
         path: '/caseDetail/' + row.id,
         query: {
+          caseType:row.eorc,
           showProcess: false
         }
       })
diff --git a/src/views/caseManage/createCase.vue b/src/views/caseManage/createCase.vue
index de1db64..a8db838 100644
--- a/src/views/caseManage/createCase.vue
+++ b/src/views/caseManage/createCase.vue
@@ -3,72 +3,176 @@
   <div ref="caseContainer" class="case-container">
     <!--表单-->
     <div v-show="!showMap" class="form-div">
-      <el-form ref="form" :model="form" :size="inputSize" :rules="rules" label-width="80px">
+      <el-form
+        ref="form"
+        :model="form"
+        :size="inputSize"
+        :rules="rules"
+        label-width="80px"
+      >
         <div>
           <el-row :gutter="20">
             <el-col :span="8">
               <el-form-item label="事件编号" prop="caseId">
-                <el-input v-model="form.caseId" disabled/>
+                <el-input v-model="form.caseId" disabled />
               </el-form-item>
             </el-col>
             <el-col :span="8">
               <el-form-item label="录音编号" prop="sound">
-                <el-input v-model="form.sound" disabled/>
+                <el-input v-model="form.sound" disabled />
               </el-form-item>
             </el-col>
             <el-col :span="8">
               <el-form-item label="来电时间" prop="callTime" disabled>
-                <el-input v-model="form.callTime"/>
+                <el-input v-model="form.callTime" />
               </el-form-item>
             </el-col>
           </el-row>
           <el-row :gutter="20">
             <el-col :span="8">
               <el-form-item label="联系电话" prop="reporterPhone">
-                <el-input v-model="form.reporterPhone" disabled/>
+                <el-input v-model="form.reporterPhone" disabled />
               </el-form-item>
             </el-col>
             <el-col :span="8">
               <el-form-item label="联系人" prop="reporterName">
-                <el-input v-model="form.reporterName"/>
+                <el-input v-model="form.reporterName" />
               </el-form-item>
             </el-col>
-            <el-button v-if="allowAdd" :disabled="form.reporterName==''||form.reporterPhone==''" type="primary" size="small" @click="addToCustomerList">添加到通讯录</el-button>
-          </el-row>
-          <el-row>
-            <el-form-item label="事件类型" prop="type" required>
-              <el-col :span="6">
-                <el-select v-model="form.type.eorc" placeholder="请选择" style="width: 100%">
-                  <el-option v-for="item of eorcList" :key="'eorc_'+item.value" :label="item.name" :value="item.value"/>
-                </el-select>
-              </el-col>
-              <!--<el-col :span="6">-->
-                <!--<el-select v-model="form.type.caseTypeCode" placeholder="请选择" style="width: 100%">-->
-                  <!--<el-option v-for="item of caseTypeList" :key="'case_'+item.id" :label="item.typeName" :value="item.typeCode"/>-->
-                <!--</el-select>-->
-              <!--</el-col>-->
-              <!--<el-col :span="6">-->
-              <!--<el-select v-model="form.type.caseDetailTypeCode" placeholder="请选择" style="width: 100%" clearable>-->
-              <!--<el-option v-for="item of caseDetailTypeList" :key="'casedetail_'+item.id" :label="item.typeDetailName" :value="item.typeDetailCode"/>-->
-              <!--</el-select>-->
-              <!--</el-col>-->
-            </el-form-item>
+            <el-button
+              v-if="allowAdd"
+              :disabled="form.reporterName == '' || form.reporterPhone == ''"
+              type="primary"
+              size="small"
+              @click="addToCustomerList"
+              >添加到通讯录</el-button
+            >
           </el-row>
           <el-row :gutter="20">
+                <el-col :span="8">
+              <el-form-item label="事件分类" prop="type">
+                <el-select
+                  v-model="form.type.eorc"
+                  placeholder="请选择"
+                  style="width: 100%"
+                  @change="changeEorc"
+                >
+                  <el-option
+                    v-for="item of eorcList"
+                    :key="'eorc_' + item.value"
+                    :label="item.name"
+                    :value="item.value"
+                  />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="事件类型" prop="typeCode">
+                <select-tree
+                  v-model="form.typeCode"
+                  :options="typeSelectList"
+                  :props="typeProps"
+                  expandAll
+                />
+              </el-form-item>
+            </el-col>
+          </el-row>
+            
+          <!-- <el-row>
+            <el-form-item label="事件分类" prop="type" required>
+              <el-col :span="6"> -->
+          <!-- <el-select v-model="form.classify" placeholder="请选择" style="width: 100%">
+                  <el-option v-for="item of classifyList" :key="'classify_'+item.value" :label="item.name" :value="item.value"/>
+                </el-select> -->
+          <!-- <el-select
+                  v-model="form.type.eorc"
+                  placeholder="请选择"
+                  style="width: 100%"
+                >
+                  <el-option
+                    v-for="item of eorcList"
+                    :key="'eorc_' + item.value"
+                    :label="item.name"
+                    :value="item.value"
+                  />
+                </el-select>
+              </el-col> -->
+          <!-- <el-col :span="6">
+            <el-form-item label="事件类型" prop="type" required>
+                <el-select v-model="form.type.eorc" filterable  placeholder="请选择" style="width: 100%">
+                  <el-option v-for="item of eorcList" :key="'eorc_'+item.value" :label="item.name" :value="item.value"/>
+                </el-select>
+            </el-form-item>
+              </el-col> -->
+          <!-- 案卷类别二级 -->
+          <!-- <el-col :span="6">
+                <el-select
+                  v-model="form.type.caseTypeCode"
+                  placeholder="请选择"
+                  style="width: 100%"
+                  filterable
+                >
+                  <el-option
+                    v-for="item of caseTypeList"
+                    :key="'case_' + item.id"
+                    :label="item.typeName"
+                    :value="item.typeCode"
+                  />
+                </el-select>
+              </el-col> -->
+          <!-- 案卷类别三级 -->
+          <!-- <el-col :span="6">
+                <el-select
+                  v-model="form.type.caseDetailTypeCode"
+                  placeholder="请选择"
+                  style="width: 100%"
+                  filterable
+                  clearable
+                >
+                  <el-option
+                    v-for="item of caseDetailTypeList"
+                    :key="'casedetail_' + item.id"
+                    :label="item.typeDetailName"
+                    :value="item.typeDetailCode"
+                  />
+                </el-select>
+              </el-col> -->
+          <!-- </el-form-item> -->
+          <!-- </el-row> -->
+          <el-row :gutter="20">
+      
             <el-col :span="8">
               <el-form-item label="事件来源" prop="source">
-                <el-select v-model="form.source" placeholder="请选择" style="width: 100%">
-                  <el-option v-for="item of caseSourceList" :key="'source_'+item.value" :label="item.name" :value="item.value"/>
+                <el-select
+                  v-model="form.source"
+                  placeholder="请选择"
+                  style="width: 100%"
+                >
+                  <el-option
+                    v-for="item of caseSourceList"
+                    :key="'source_' + item.value"
+                    :label="item.name"
+                    :value="item.value"
+                  />
                 </el-select>
               </el-form-item>
             </el-col>
-            <el-col :span="8">
+            <!-- <el-col :span="8">
               <el-form-item label="紧急程度" prop="caseLevel">
-                <el-select v-model="form.caseLevel" placeholder="请选择" style="width: 100%">
-                  <el-option v-for="item of caseLevelList" :key="'caselevel_'+item.value" :label="item.name" :value="item.value"/>
+                <el-select
+                  v-model="form.caseLevel"
+                  placeholder="请选择"
+                  style="width: 100%"
+                >
+                  <el-option
+                    v-for="item of caseLevelList"
+                    :key="'caselevel_' + item.value"
+                    :label="item.name"
+                    :value="item.value"
+                  />
                 </el-select>
               </el-form-item>
-            </el-col>
+            </el-col> -->
             <el-col :span="8">
               <el-form-item label="办理期限" prop="limitedTime">
                 <el-date-picker
@@ -76,21 +180,42 @@
                   type="datetime"
                   value-format="yyyy-MM-dd HH:mm:ss"
                   placeholder="请选择时间"
-                  style="width: 100%"/>
+                  style="width: 100%"
+                />
               </el-form-item>
             </el-col>
           </el-row>
           <el-row>
             <el-form-item label="事件地址" prop="address" required>
               <el-col :span="5">
-                <el-select v-model="form.address.areaCode" placeholder="选择所在区" value="" style="width: 100%">
+                <el-select
+                  v-model="form.address.areaCode"
+                  placeholder="选择所在区"
+                  value=""
+                  style="width: 152px"
+                >
                   <!--<el-option key="99" label="蓉江新区" value="99"/>-->
-                  <el-option v-for="item in areaList" :key="item.id" :label="item.name" :value="item.id"/>
+                  <el-option
+                    v-for="item in areaList"
+                    :key="item.id"
+                    :label="item.name"
+                    :value="item.id"
+                  />
                 </el-select>
               </el-col>
               <el-col :span="5">
-                <el-select v-model="form.address.streetCode" placeholder="选择所在街道" value="" style="width: 100%">
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.name" :value="item.id"/>
+                <el-select
+                  v-model="form.address.streetCode"
+                  placeholder="选择所在街道"
+                  value=""
+                  style="width: 152px"
+                >
+                  <el-option
+                    v-for="item in streetList"
+                    :key="item.id"
+                    :label="item.name"
+                    :value="item.id"
+                  />
                 </el-select>
               </el-col>
               <!--<el-col :span="5">-->
@@ -99,27 +224,54 @@
               <!--</el-select>-->
               <!--</el-col>-->
               <el-col :span="5">
-                <el-input v-model="form.address.fieldintro" placeholder="详细地址"/>
+                <el-input
+                  v-model="form.address.fieldintro"
+                  placeholder="详细地址"
+                  style="width: 152px"
+                />
               </el-col>
-              <el-button type="primary" size="small" style="margin-left: 10px" @click="showMapDiv">地图选点</el-button>
-              <span v-show="form.lng!='0'" style="font-size:9px;">({{ form.lng }},{{ form.lat }})</span>
+              <el-button
+                type="primary"
+                size="small"
+                style="margin-left: 10px"
+                @click="showMapDiv"
+                >地图选点</el-button
+              >
+              <span v-show="form.lng != '0'" style="font-size: 9px"
+                >({{ form.lng }},{{ form.lat }})</span
+              >
             </el-form-item>
           </el-row>
           <el-row :gutter="20">
             <el-col :span="12">
               <el-form-item label="事件标题" prop="title">
-                <el-input v-model="form.title" maxlength="100"/>
+                <el-input v-model="form.title" maxlength="100" />
               </el-form-item>
             </el-col>
             <el-col :span="12">
               <div class="checkbox">
-                <el-checkbox v-model="form.isTypical" true-label="1" false-label="0">典型案例</el-checkbox>
+                <el-checkbox
+                  v-model="form.isTypical"
+                  true-label="1"
+                  false-label="0"
+                  >典型案例</el-checkbox
+                >
               </div>
               <div class="checkbox">
-                <el-checkbox v-model="form.isImportant" true-label="1" false-label="0">要情</el-checkbox>
+                <el-checkbox
+                  v-model="form.isImportant"
+                  true-label="1"
+                  false-label="0"
+                  >要情</el-checkbox
+                >
               </div>
               <div class="checkbox">
-                <el-checkbox v-model="form.isReturnVisit" true-label="1" false-label="0">需要回访</el-checkbox>
+                <el-checkbox
+                  v-model="form.isReturnVisit"
+                  true-label="1"
+                  false-label="0"
+                  >需要回访</el-checkbox
+                >
               </div>
             </el-col>
           </el-row>
@@ -128,10 +280,11 @@
               <el-form-item label="事件内容" prop="description">
                 <el-input
                   v-model="form.description"
-                  :autosize="{ minRows: 2, maxRows: 4}"
+                  :autosize="{ minRows: 2, maxRows: 4 }"
                   type="textarea"
                   maxlength="255"
-                  placeholder="请输入内容"/>
+                  placeholder="请输入内容"
+                />
               </el-form-item>
             </el-col>
           </el-row>
@@ -139,7 +292,17 @@
             <el-col>
               <el-form-item label="处理方式" prop="processWay">
                 <el-radio-group v-model="form.processWay">
-                  <el-radio v-for="item in processWayList" :disabled="form.caseLevel&&form.caseLevel=='2'&&item.nextState!=6" :key="'process_'+item.id" :label="item.nextState">{{ item.nextOperation }}</el-radio>
+                  <el-radio
+                    v-for="item in processWayList"
+                    :disabled="
+                      form.caseLevel &&
+                      form.caseLevel == '2' &&
+                      item.nextState != 6
+                    "
+                    :key="'process_' + item.id"
+                    :label="item.nextState"
+                    >{{ item.nextOperation }}</el-radio
+                  >
                 </el-radio-group>
               </el-form-item>
             </el-col>
@@ -161,7 +324,13 @@
           <el-row :gutter="20" type="flex" justify="center">
             <el-col :span="24">
               <div style="text-align: center">
-                <el-button :size="inputSize" :loading="submitLoading" type="primary" @click="submit">提交</el-button>
+                <el-button
+                  :size="inputSize"
+                  :loading="submitLoading"
+                  type="primary"
+                  @click="submit"
+                  >提交</el-button
+                >
               </div>
             </el-col>
           </el-row>
@@ -170,105 +339,180 @@
     </div>
     <!-- 知识库检索-->
     <div v-show="!showMap" class="knowledge-div">
-      <knowledge-search/>
+      <knowledge-search />
     </div>
     <!-- 地图显示 -->
     <div v-show="showMap" id="map" :style="{ height: mapHeight }">
-      <el-row :gutter="20" type="flex" style="margin-top: -30px; margin-bottom: 10px;">
+      <el-row
+        :gutter="20"
+        type="flex"
+        style="margin-top: -30px; margin-bottom: 10px"
+      >
         <el-col :span="6">
-          <el-input v-model="keyword" placeholder="兴趣点筛选" size="small"/>
+          <el-input v-model="keyword" placeholder="兴趣点筛选" size="small" />
         </el-col>
         <el-col :span="14">
-          <el-button size="small" type="primary" @click="queryPoi">查询</el-button>
-          <el-button size="small" type="primary" style="margin-left: 15px;" @click="confirmPos">确定</el-button>
+          <el-button size="small" type="primary" @click="queryPoi"
+            >查询</el-button
+          >
+          <el-button
+            size="small"
+            type="primary"
+            style="margin-left: 15px"
+            @click="confirmPos"
+            >确定</el-button
+          >
           <span>说明：双击添加位置, </span>
-          <span>当前坐标：{{ currentPosition.lng }},{{ currentPosition.lat }}</span>
+          <span
+            >当前坐标：{{ currentPosition.lng }},{{ currentPosition.lat }}</span
+          >
         </el-col>
         <el-col :span="4" style="text-align: right">
-          <el-button size="small" type="info" @click="clearMap">清除地图</el-button>
+          <el-button size="small" type="info" @click="clearMap"
+            >清除地图</el-button
+          >
           <el-button size="small" @click="backToForm">返回</el-button>
         </el-col>
       </el-row>
-      <f-map ref="mapComp" type="vector" @ready="mapReady"/>
+      <f-map ref="mapComp" type="vector" @ready="mapReady" />
     </div>
   </div>
 </template>
 
 <script>
-import KnowledgeSearch from './components/knowledgeSearch'
-import { addCustomer } from '@/api/customer'
-import { getToday } from '@/utils/dateutils'
-import { getEorc, getCaseSource, getCaseLevel } from '@/api/allDict'
-import { getCaseType, getCaseDetailType, addCase } from '@/api/callCase'
-import { getNextNodeList } from '@/api/process'
-import { getAreaList } from '@/api/system/area'
-import { getCustomerList } from '@/api/customer'
-import { matchReverse } from '@/api/map'
-import FMap from '@/components/fMap/components/fMap'
-
+import KnowledgeSearch from "./components/knowledgeSearch";
+import { addCustomer } from "@/api/customer";
+import { getToday } from "@/utils/dateutils";
+import { getEorc, getCaseSource, getCaseLevel } from "@/api/allDict";
+import { getCaseType, getCaseDetailType, addCase } from "@/api/callCase";
+import { getNextNodeList } from "@/api/process";
+import { getAreaList } from "@/api/system/area";
+import { getCustomerList } from "@/api/customer";
+import { matchReverse } from "@/api/map";
+import FMap from "@/components/fMap/components/fMap";
+import SelectTree from "@/components/SelectTree/singleSelect";
+import { toTreeList } from "@/utils/structure";
 export default {
-  name: 'CreateCase',
-  components: { KnowledgeSearch, FMap },
+  name: "CreateCase",
+  components: { KnowledgeSearch, FMap, SelectTree },
   data() {
-    const validateAddress = function(rule, value, callback) {
-      console.log(value)
+    const validateAddress = function (rule, value, callback) {
+      console.log(value);
       // if (value.areaCode === '' || value.streetCode === '' || value.communityCode === '') {
-      if (value.areaCode === '' || value.streetCode === '' || value.fieldintro.trim() === '') {
-        callback(new Error('地址需填写完整'))
+      if (
+        value.areaCode === "" ||
+        value.streetCode === "" ||
+        value.fieldintro.trim() === ""
+      ) {
+        callback(new Error("地址需填写完整"));
       } else {
-        callback()
+        callback();
       }
-    }
-    const validateType = function(rule, value, callback) {
-      console.log(value)
-      if (value.eorc === '' || value.caseTypeCode === '' || value.caseDetailTypeCode === '') {
-        callback(new Error('请选择事件类型'))
+    };
+    const validateType = function (rule, value, callback) {
+      console.log(value);
+      if (
+        value.eorc === "" ||
+        value.caseTypeCode === "" ||
+        value.caseDetailTypeCode === ""
+      ) {
+        callback(new Error("请选择事件类型"));
       } else {
-        callback()
+        callback();
       }
-    }
+    };
     return {
+      // props: {
+      //   lazy: true,
+      //   lazyLoad(node, resolve) {
+      //     let { level, value } = node;
+      //     if (level == 1) {
+      //       getCaseType(value).then((response) => {
+      //         resolve(response.data.map((item) => {
+      //           return {
+      //             value: item.typeCode,
+      //             label: item.typeName,
+      //             leaf: false,
+      //           };
+      //         }))
+      //       });
+      //     } else if (level == 2) {
+      //       getCaseDetailType(value).then((response) => {
+      //         resolve(response.data.map((item) => {
+      //           return {
+      //             value: item.typeDetailCode,
+      //             label: item.typeDetailName,
+      //             leaf: true,
+      //           };
+      //         }))
+      //       });
+      //     }
+      //   },
+      // },
+      typeProps: {
+        parent: "pid",
+        value: "id",
+        label: "name",
+        children: "children",
+      },
+      typeSelectList: [],
       form: {
-        caseId: '', // 案卷编号，年月日时分秒毫秒+坐席号
-        sound: '', // 来电录音编号
-        callTime: '', // 来电时间
-        reporterName: '', // 事件联系人
-        reporterPhone: '', // 时间联系人电话
+        typeCode:"", // 二三级value
+        caseId: "", // 案卷编号，年月日时分秒毫秒+坐席号
+        sound: "", // 来电录音编号
+        callTime: "", // 来电时间
+        reporterName: "", // 事件联系人
+        reporterPhone: "", // 时间联系人电话
+        // classify: "", // 事件类别
         type: {
-          eorc: '', // 案卷类别
-          caseTypeCode: '911', // 案卷大类编码
-          caseDetailTypeCode: '9111000' // 案卷小类编码
+          eorc: "", // 案卷类别
+          caseTypeCode: "", // 案卷大类编码
+          caseDetailTypeCode: "", // 案卷小类编码
         }, // 案卷类别
-        source: '3', // 来源
+        source: "3", // 来源
         address: {
-          areaCode: '360791', // 区域ID
-          streetCode: '', // 街道ID
-          communityCode: '', // 社区ID
-          gridId: '', // 网格ID
-          fieldintro: '' // 事件地址
+          areaCode: "360791", // 区域ID
+          streetCode: "", // 街道ID
+          communityCode: "", // 社区ID
+          gridId: "", // 网格ID
+          fieldintro: "", // 事件地址
         },
-        caseLevel: '', // 案卷紧急程度
-        isTypical: '0', // 是否典型案例
-        isImportant: '0', // 是否要情
-        isReturnVisit: '1', // 是否需要回访
-        title: '', // 事件标题
-        description: '', // 事件内容
-        limitedTime: '', // 事件办理期限
-        processWay: '', // 处理方式
-        processDept: '', // 处理单位
-        processUser: '', // 处理人
-        lng: '', // 事件经度
-        lat: '' // 事件纬度
+        caseLevel: "", // 案卷紧急程度
+        isTypical: "0", // 是否典型案例
+        isImportant: "0", // 是否要情
+        isReturnVisit: "1", // 是否需要回访
+        title: "", // 事件标题
+        description: "", // 事件内容
+        limitedTime: "", // 事件办理期限
+        processWay: "", // 处理方式
+        processDept: "", // 处理单位
+        processUser: "", // 处理人
+        lng: "", // 事件经度
+        lat: "", // 事件纬度
       },
       currentPosition: {
-        lng: '0',
-        lat: '0'
+        lng: "0",
+        lat: "0",
       },
       allowAdd: true, // 允许新增联系人
       addLoading: false, // 添加允许等待
       submitLoading: false,
       reportersList: [], // 联系人选择列表
       eorcList: [], // 案卷类别
+      classifyList: [
+        {
+          name: "应急事件",
+          value: 1,
+        },
+        {
+          name: "运维事件",
+          value: 3,
+        },
+        {
+          name: "精细化平台事件",
+          value: 4,
+        },
+      ], //事件类别
       caseTypeList: [], // 案卷类别二级
       caseDetailTypeList: [], // 案卷类别三级
       areaList: [], // 区域列表
@@ -279,89 +523,194 @@
       processWayList: [], // 是否列表
       caseSourceList: [],
       userList: [], // 处理人列表
-      inputSize: 'small', // 按钮样式
+      inputSize: "small", // 按钮样式
       fmap: null, // 地图
       showMap: false, // 是否显示地图
-      mapHeight: '0px',
-      keyword: '',
+      mapHeight: "0px",
+      keyword: "",
       rules: {
-        caseId: [{ required: true, message: '事件编号不能为空', trigger: ['blur'] }],
-        sound: [{ required: true, message: '来电录音编号不能为空', trigger: ['blur'] }],
-        callTime: [{ required: true, message: '来电时间不能为空', trigger: ['blur'] }],
-        reporterName: [{ required: true, message: '联系人姓名不能为空', trigger: ['blur'] }],
-        reporterPhone: [{ required: true, message: '联系电话不能为空', trigger: ['blur'] }],
-        areaCode: [{ required: true, message: '事件辖区必选', trigger: ['blur'] }],
-        source: [{ required: true, message: '事件来源必选', trigger: ['blur', 'change'] }],
-        caseLevel: [{ required: true, message: '紧急程度必选', trigger: ['blur', 'change'] }],
-        type: [{ required: true, message: '事件类型必选', trigger: ['blur'], validator: validateType }],
-        caseDetailTypeCode: [{ required: true, message: '事件类型必选', trigger: ['blur'] }],
-        description: [{ required: true, message: '事件内容不能为空', trigger: ['blur'] }],
-        title: [{ required: true, message: '事件标题不能为空', trigger: ['blur', 'change'] }],
-        address: [{ required: true, message: '地址需填写完整', trigger: ['blur'], validator: validateAddress }],
-        processWay: [{ required: true, message: '处理方式必选', trigger: ['blur', 'change'] }]
-      } // 表单验证
-    }
+        caseId: [
+          { required: true, message: "事件编号不能为空", trigger: ["blur"] },
+        ],
+        sound: [
+          {
+            required: true,
+            message: "来电录音编号不能为空",
+            trigger: ["blur"],
+          },
+        ],
+        callTime: [
+          { required: true, message: "来电时间不能为空", trigger: ["blur"] },
+        ],
+        reporterName: [
+          { required: true, message: "联系人姓名不能为空", trigger: ["blur"] },
+        ],
+        reporterPhone: [
+          { required: true, message: "联系电话不能为空", trigger: ["blur"] },
+        ],
+        areaCode: [
+          { required: true, message: "事件辖区必选", trigger: ["blur"] },
+        ],
+        source: [
+          {
+            required: true,
+            message: "事件来源必选",
+            trigger: ["blur", "change"],
+          },
+        ],
+        caseLevel: [
+          {
+            required: true,
+            message: "紧急程度必选",
+            trigger: ["blur", "change"],
+          },
+        ],
+        // classify: [
+        //   { required: true, message: "事件分类必选", trigger: ["blur"] },
+        // ],
+        type: [
+          {
+            required: true,
+            message: "事件分类必选",
+            trigger: ["blur"],
+            validator: validateType,
+          },
+        ],
+        typeCode:[
+           {
+            required: true,
+            message: "事件类型必选",
+            trigger: ["change"],
+          },
+        ],
+        caseDetailTypeCode: [
+          { required: true, message: "事件分类必选", trigger: ["blur"] },
+        ],
+        description: [
+          { required: true, message: "事件内容不能为空", trigger: ["blur"] },
+        ],
+        title: [
+          {
+            required: true,
+            message: "事件标题不能为空",
+            trigger: ["blur", "change"],
+          },
+        ],
+        address: [
+          {
+            required: true,
+            message: "地址需填写完整",
+            trigger: ["blur"],
+            validator: validateAddress,
+          },
+        ],
+        processWay: [
+          {
+            required: true,
+            message: "处理方式必选",
+            trigger: ["blur", "change"],
+          },
+        ],
+      }, // 表单验证
+    };
   },
   watch: {
-    'form.type.eorc': function(val) {
-      // if (val === '') {
-      //   this.form.type.caseTypeCode = ''
-      //   this.form.type.caseDetailTypeCode = ''
-      // } else {
-      //   this.form.type.caseTypeCode = ''
-      //   this.form.type.caseDetailTypeCode = ''
-      //   this.fetchCaseTypeList()
-      // }
-      // 资讯类，默认地址和坐标
-      if(val=='2'){
-        this.form.address= {
-          areaCode: '360791', // 区域ID
-          streetCode: '360791103', // 街道ID
-          communityCode: '', // 社区ID
-          gridId: '', // 网格ID
-          fieldintro: '516双创产业园运行指挥调度中心' // 事件地址
+    "form.typeCode":function(val){
+      if(val == ""){
+        this.form.type.caseTypeCode = "";
+        this.form.type.caseDetailTypeCode = "";
+      } else {
+        if(val.length <= 3){
+          this.form.type.caseTypeCode = val;
+          this.typeSelectList.map(item =>{
+            if(item.value == val){
+               this.form.type.caseDetailTypeCode = item.children[0].value;
+            }
+          })
+        } else {
+          this.form.type.caseDetailTypeCode = val;
+          this.form.type.caseTypeCode = val.slice(0,3)
         }
-        this.form.lng = 114.87176164
-        this.form.lat = 25.77615476
       }
     },
-    // 'form.type.caseTypeCode': function(val) {
-    //   if (val === '') {
-    //     this.form.type.caseDetailTypeCode = ''
-    //   } else {
-    //     this.form.type.caseDetailTypeCode = ''
-    //     this.fetchCaseDetailTypeList()
-    //   }
-    // },
-    'form.address.areaCode': function(val) {
-      if (val === '') {
-        this.form.address.streetCode = ''
-        this.form.address.communityCode = ''
+    "form.type.eorc": function (val) {
+      if (val === "") {
+        this.form.type.caseTypeCode = "";
+        this.form.type.caseDetailTypeCode = "";
       } else {
-        this.fetchStreetList()
+        this.form.typeCode = ""
+        this.form.type.caseTypeCode = "";
+        this.form.type.caseDetailTypeCode = "";
+      }
+      // else {
+      //   this.form.type.caseTypeCode = "";
+      //   this.form.type.caseDetailTypeCode = "";
+      //   this.fetchCaseTypeList();
+      // }
+      if (val == "2") {
+        this.form.caseLevel = "2"; // 默认设置为紧急事件
+      } else {
+        this.form.caseLevel = "1"; // 普通事件
+      }
+      // 资讯类，默认地址和坐标
+      if (val == "2") {
+        this.form.address = {
+          areaCode: "360791", // 区域ID
+          streetCode: "360791103", // 街道ID
+          communityCode: "", // 社区ID
+          gridId: "", // 网格ID
+          fieldintro: "516双创产业园运行指挥调度中心", // 事件地址
+        };
+        this.form.lng = 114.87176164;
+        this.form.lat = 25.77615476;
       }
     },
-    'form.address.streetCode': function(val) {
-      if (val === '') {
-        this.form.address.communityCode = ''
+    "form.type.caseTypeCode": function (val) {
+      if (val === "") {
+        this.form.type.caseDetailTypeCode = "";
       } else {
-        this.fetchCommunityList()
+        this.form.type.caseDetailTypeCode = "";
+        this.fetchCaseDetailTypeList();
       }
-    }
+    },
+    "form.address.areaCode": function (val) {
+      if (val === "") {
+        this.form.address.streetCode = "";
+        this.form.address.communityCode = "";
+      } else {
+        this.fetchStreetList();
+      }
+    },
+    "form.address.streetCode": function (val) {
+      if (val === "") {
+        this.form.address.communityCode = "";
+      } else {
+        this.fetchCommunityList();
+      }
+    },
   },
   created() {
-    this.fetchCaseSourceList()
-    this.fetchCaseLevelList()
-    this.fetchEorcList()
-    this.fetchAreaList()
-    this.fetchStreetList()
-    this.fetchProcessWayList()
+    // 获取大类
+    this.fetchEorcList();
+    this.fetchCaseSourceList();
+    // 事件紧急程度
+    // this.fetchCaseLevelList();
+    this.fetchAreaList();
+    this.fetchStreetList();
+    this.fetchProcessWayList();
   },
   methods: {
+    // 选中下拉框内容
+    handleSelectChange(node) {
+      this.form.type.eorc = node[0];
+      this.form.type.caseTypeCode = node[1];
+      this.form.type.caseDetailTypeCode = node[2];
+    },
     // 提交
     submit() {
-      this.submitLoading = true
-      this.$refs['form'].validate((valid) => {
+      console.log(this.form.caseLevel);
+      this.submitLoading = true;
+      this.$refs["form"].validate((valid) => {
         if (valid && this.twiceValidate()) {
           // 初步校验通过
           const form = {
@@ -386,173 +735,253 @@
             title: this.form.title, // 事件标题
             description: this.form.description, // 事件内容
             limitedTime: this.form.limitedTime, // 事件办理期限
-            processWay: '' + this.form.processWay, // 处理方式
+            processWay: "" + this.form.processWay, // 处理方式
             processDept: this.form.processDept, // 处理单位
             processUser: this.form.processUser, // 处理人
             lng: this.form.lng, // 事件经度
-            lat: this.form.lat // 事件纬度
-          }
-          addCase(form).then(response => {
-            if (response.code === 200) {
-              this.$message.success('新建成功')
-              this.$emit('cancel')
-              this.submitLoading = false
-            }
-          }).catch(_ => {
-            this.$emit('cancel')
-            this.submitLoading = false
-          })
+            lat: this.form.lat, // 事件纬度
+          };
+          addCase(form)
+            .then((response) => {
+              if (response.code === 200) {
+                this.$message.success("新建成功");
+                this.$emit("cancel");
+                this.submitLoading = false;
+              }
+            })
+            .catch((_) => {
+              this.$emit("cancel");
+              this.submitLoading = false;
+            });
         } else {
-          this.submitLoading = false
+          this.submitLoading = false;
         }
-      })
+      });
     },
     // 二次校验
     twiceValidate() {
-      debugger
-      const judge = this.form.processWay === 6 && (this.form.lng === '0' || this.form.lat === '0')
+      // debugger;
+      const judge =
+        this.form.processWay === 6 &&
+        (this.form.lng === "0" || this.form.lat === "0");
       if (judge) {
-        this.$message.warning('请在地图上选点')
-        return false
+        this.$message.warning("请在地图上选点");
+        return false;
       } else {
-        return true
+        return true;
       }
     },
     // 初始化数据
     initData(data) {
       this.form = {
-        caseId: '', // 案卷编号，年月日时分秒毫秒+坐席号
+        caseId: "", // 案卷编号，年月日时分秒毫秒+坐席号
         sound: data.callid, // 来电录音编号
         callTime: data.dialStartStamp, // 来电时间
-        reporterName: '', // 事件联系人
+        reporterName: "", // 事件联系人
         reporterPhone: data.number, // 时间联系人电话
         type: {
-          eorc: '', // 案卷类别
-          caseTypeCode: '911', // 案卷大类编码
-          caseDetailTypeCode: '9111000' // 案卷小类编码
+          eorc: "", // 案卷类别
+          caseTypeCode: "", // 案卷大类编码
+          caseDetailTypeCode: "", // 案卷小类编码
         }, // 案卷类别
-        source: '3', // 来源
+        source: "3", // 来源
         address: {
-          areaCode: '360791', // 区域ID
-          streetCode: '', // 街道ID
-          communityCode: '', // 社区ID
-          gridId: '', // 网格ID
-          fieldintro: '' // 事件地址
+          areaCode: "360791", // 区域ID
+          streetCode: "", // 街道ID
+          communityCode: "", // 社区ID
+          gridId: "", // 网格ID
+          fieldintro: "", // 事件地址
         },
-        lng: '0',
-        lat: '0',
-        caseLevel: '', // 案卷紧急程度
-        isTypical: '0', // 是否典型案例
-        isImportant: '0', // 是否要情
-        title: '', // 事件标题
-        description: '', // 事件内容
-        limitedTime: '', // 事件办理期限
-        processWay: '', // 处理方式
-        processDept: '', // 处理单位
-        processUser: '' // 处理人
-      }
+        lng: "0",
+        lat: "0",
+        caseLevel: "", // 案卷紧急程度
+        isTypical: "0", // 是否典型案例
+        isImportant: "0", // 是否要情
+        title: "", // 事件标题
+        description: "", // 事件内容
+        limitedTime: "", // 事件办理期限
+        processWay: "", // 处理方式
+        processDept: "", // 处理单位
+        processUser: "", // 处理人
+      };
       // 清除校验
       this.$nextTick(() => {
-        this.$refs['form'].clearValidate()
-      })
-      this.generateCaseId()
+        this.$refs["form"].clearValidate();
+      });
+      this.generateCaseId();
       // 根据电话去查找人
       if (this.form.reporterPhone) {
-        this.fetchReporter(this.form.reporterPhone)
+        this.fetchReporter(this.form.reporterPhone);
       }
       // this.$refs.mapComp.initMap()
     },
     // 将客户添加到通讯录
     addToCustomerList() {
-      this.addLoading = true
+      this.addLoading = true;
       const customerForm = {
         name: this.form.reporterName, // 姓名
-        tel1: this.form.reporterPhone // 联系方式1
-      }
+        tel1: this.form.reporterPhone, // 联系方式1
+      };
       // 如果信息完整, 添加到通讯录
       if (this.allowAdd && customerForm.tel1 && customerForm.name) {
-        this.$confirm(
-          '确定要将该客户添加到客户列表吗？',
-          '确认操作',
-          {
-            confirmButtonText: '确定',
-            cancelButtonText: '取消',
-            type: 'warning'
-          }
-        ).then(() => {
-          addCustomer(customerForm).then(response => {
-            if (response.code === 200) {
-              this.$message.success('添加成功')
-              this.allowAdd = false
-            }
-          }).catch(_ => { // 异常情况，loading置为false
-            this.addLoading = false
-          })
-        })
+        this.$confirm("确定要将该客户添加到客户列表吗？", "确认操作", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning",
+        }).then(() => {
+          addCustomer(customerForm)
+            .then((response) => {
+              if (response.code === 200) {
+                this.$message.success("添加成功");
+                this.allowAdd = false;
+              }
+            })
+            .catch((_) => {
+              // 异常情况，loading置为false
+              this.addLoading = false;
+            });
+        });
       } else {
-        this.$message.warning('请确保联系人姓名和电话完整性')
+        this.$message.warning("请确保联系人姓名和电话完整性");
       }
     },
     // 根据电话去找人
     fetchReporter(phone) {
       const params = {
-        tel: phone
-      }
-      getCustomerList(params).then(response => {
+        tel: phone,
+      };
+      getCustomerList(params).then((response) => {
         if (response.code === 200 && response.data) {
           if (response.data.total === 1) {
-            this.form.reporterName = response.data.rows[0].name
-            this.allowAdd = false
+            this.form.reporterName = response.data.rows[0].name;
+            this.allowAdd = false;
           } else {
-            this.allowAdd = true
+            this.allowAdd = true;
           }
         }
-      })
+      });
     },
     // 获取联系人列表
     fetchReportersList() {
       const params = {
         limit: 10000,
-        offset: 1
-      }
-      getCustomerList(params).then(response => {
+        offset: 1,
+      };
+      getCustomerList(params).then((response) => {
         if (response.code === 200) {
-          this.reportersList = response.data.rows
+          this.reportersList = response.data.rows;
         }
-      })
+      });
     },
     // 案卷来源列表
     fetchCaseSourceList() {
-      getCaseSource().then(response => {
+      getCaseSource().then((response) => {
         if (response.code === 200) {
-          this.caseSourceList = response.data
+          this.caseSourceList = response.data;
         }
-      })
+      });
     },
     // 案卷等级列表
     fetchCaseLevelList() {
-      getCaseLevel().then(response => {
+      getCaseLevel().then((response) => {
         if (response.code === 200) {
-          this.caseLevelList = response.data
+          this.caseLevelList = response.data;
         }
-      })
+      });
     },
     // 大类列表
     fetchEorcList() {
-      getEorc().then(response => {
+      getEorc().then(async (response) => {
         if (response.code === 200) {
-          this.eorcList = response.data
+          this.eorcList = response.data;
+          // this.typeSelectList = response.data.map((item) => {
+          //   item.pid = "-1";
+          //   item.level = 1;
+          //   return item;
+          // });
+          // let data2 = await this.getLevelData2(this.typeSelectList);
+          // let data3 = await this.getLevelData3(data2);
+          // setTimeout(() => {
+          //   this.typeSelectList = toTreeList([...this.typeSelectList, ...data2,...data3], "-1");
+          //   console.log(this.typeSelectList)
+          // }, 2000);
         }
+      });
+    },
+    // 大类选中改变
+    async changeEorc(node){
+      let data2 = await this.getLevelData2(node);
+      let codeList = data2.map(item =>{
+        return item.id
       })
+      let data3 = await this.getLevelData3(codeList);
+      setTimeout(()=>{
+        this.typeSelectList = toTreeList([...data2,...data3], "-1");
+      },500)
+    },
+    getLevelData2(node) {
+      return new Promise((resolve) => {
+          getCaseType(node).then((res) => {
+            if (res.code === 200) {
+              let data  = res.data.map(child =>{
+                return {
+                  id:child.typeCode,
+                  pid:"-1",
+                  level:1,
+                  name:child.typeName,
+                  value:child.typeCode
+                }
+              })
+              resolve(data);
+            }
+          });
+      });
+    },
+    getLevelData3(codeList) {
+      return new Promise((resolve) => {
+        getCaseDetailType().then((res) => {
+          if (res.code === 200) {
+               res.data = res.data.map(child =>{
+                return {
+                  pid:child.typeCode,
+                  id:child.typeDetailCode,
+                  level:2,
+                  name:child.typeDetailName,
+                  value:child.typeDetailCode
+                }
+              })
+              res.data = res.data.filter(item =>{
+                if(codeList.includes(item.pid)){
+                  return item;
+                }
+              })
+            resolve(res.data);
+          }
+        });
+      });
     },
     // 二级类型列表
     fetchCaseTypeList() {
-      getCaseType(this.form.type.eorc).then(response => {
-        this.caseTypeList = response.data
-      })
+      getCaseType(this.form.type.eorc).then((response) => {
+        this.caseTypeList = response.data;
+        // let index =  this.eorcList.findIndex((item, index, arr)=> (this.form.type.eorc == item.value))
+        // let level2 = Object.assign(this.caseTypeList).map(item =>{
+        //     return {
+        //         pid:this.eorcList[index].id,
+        //         level:2,
+        //         id:item.id,
+        //         name:item.targetName,
+        //         value:item.typeCode
+        //         }
+        //   })
+        //   this.typeSelectList.push(...level2)
+        //   console.log(this.typeSelectList)
+      });
     },
     // 三级类型列表
     fetchCaseDetailTypeList() {
+      // :label="item.typeDetailName"
+      //             :value="item.typeDetailCode"
       // 遍历caseTypeList根据code获取大类的ID，进行级联查询
       // let typeId = 0
       // this.caseTypeList.forEach(item => {
@@ -565,154 +994,175 @@
       //     this.caseDetailTypeList = response.data
       //   })
       // }
-      getCaseDetailType(this.form.type.caseTypeCode).then(response => {
-        this.caseDetailTypeList = response.data
-        this.form.type.caseDetailTypeCode = this.caseDetailTypeList[0].typeDetailCode
-      })
+      getCaseDetailType(this.form.type.caseTypeCode).then((response) => {
+        this.caseDetailTypeList = response.data;
+        this.form.type.caseDetailTypeCode =
+          this.caseDetailTypeList[0].typeDetailCode;
+        //    let index =  this.caseTypeList.findIndex((item, index, arr)=> (this.form.type.typeCode == item.value))
+        // let level3 = Object.assign(this.caseDetailTypeList).map(item =>{
+        //     return {
+        //         pid:this.caseTypeList[index].id,
+        //         level:3,
+        //         id:item.id,
+        //         name:item.typeDetailName,
+        //         value:item.typeDetailCode
+        //         }
+        //   })
+        //   this.typeSelectList.push(...level3)
+        //   console.log(this.typeSelectList)
+      });
     },
     // 区列表
     fetchAreaList() {
-      getAreaList('0').then(response => {
-        this.areaList = response.data
-      })
+      getAreaList("0").then((response) => {
+        this.areaList = response.data;
+      });
     },
     // 街道列表
     fetchStreetList() {
-      getAreaList(this.form.address.areaCode).then(response => {
-        this.streetList = response.data
-      })
+      getAreaList(this.form.address.areaCode).then((response) => {
+        this.streetList = response.data;
+      });
     },
     // 社区列表
     fetchCommunityList() {
-      getAreaList(this.form.address.streetCode).then(response => {
-        this.communityList = response.data
-      })
+      getAreaList(this.form.address.streetCode).then((response) => {
+        this.communityList = response.data;
+      });
     },
     // 获取处理方式列表
     fetchProcessWayList() {
-      getNextNodeList('0').then(response => {
-        this.processWayList = response.data
-      })
+      getNextNodeList("0").then((response) => {
+        this.processWayList = response.data;
+      });
     },
     fetchGridList() {},
     // 自动生成案卷编号，时间+坐席号
     generateCaseId() {
-      const id = getToday('yyMMddhhmmss')
-      const seat = this.$store.getters.seat
-      this.form.caseId = id + seat
+      const id = getToday("yyMMddhhmmss");
+      const seat = this.$store.getters.seat;
+      this.form.caseId = id + seat;
     },
     // 地图准备好后的操作
     mapReady({ fmap }) {
-      this.fmap = fmap
+      this.fmap = fmap;
       // 禁用双击放大
-      this.fmap.deactivateDbClickZoom()
-      const that = this
+      this.fmap.deactivateDbClickZoom();
+      const that = this;
       // 添加双击事件,在地图上添加点
-      this.fmap.on('fmap.map.dbclick', function(event) {
-        that.fmap.clearLayer('case')
+      this.fmap.on("fmap.map.dbclick", function (event) {
+        that.fmap.clearLayer("case");
         const marker = {
           lon: event.coordinate[0],
           lat: event.coordinate[1],
-          layer: 'case'
-        }
-        that.currentPosition.lng = marker.lon.toFixed(8) + ''
-        that.currentPosition.lat = marker.lat.toFixed(8) + ''
-        that.fmap.addFeatures([marker], { xField: 'lon', yField: 'lat', layer: 'case' })
+          layer: "case",
+        };
+        that.currentPosition.lng = marker.lon.toFixed(8) + "";
+        that.currentPosition.lat = marker.lat.toFixed(8) + "";
+        that.fmap.addFeatures([marker], {
+          xField: "lon",
+          yField: "lat",
+          layer: "case",
+        });
         // that.fmap.navigate2Center([marker.lon, marker.lat])
-      })
+      });
     },
     // 显示地图
     showMapDiv() {
-      this.showMap = true
-      this.$refs.mapComp.initMap()
+      this.showMap = true;
+      this.$refs.mapComp.initMap();
       // 如果已经有坐标了，显示当前点
-      if(this.form.lng && this.form.lat){
+      if (this.form.lng && this.form.lat) {
         const marker = {
           lon: this.form.lng,
           lat: this.form.lat,
-          layer: 'case'
-        }
-        this.currentPosition.lng = this.form.lng
-        this.currentPosition.lat = this.form.lat
-        this.fmap.addFeatures([marker], { xField: 'lon', yField: 'lat', layer: 'case' })
+          layer: "case",
+        };
+        this.currentPosition.lng = this.form.lng;
+        this.currentPosition.lat = this.form.lat;
+        this.fmap.addFeatures([marker], {
+          xField: "lon",
+          yField: "lat",
+          layer: "case",
+        });
       }
-      this.mapHeight = this.$refs.caseContainer.offsetHeight + 'px'
+      this.mapHeight = this.$refs.caseContainer.offsetHeight + "px";
     },
     // 查询兴趣点
     queryPoi() {
-      if (this.keyword === '') {
-        this.$message.warning('请输入关键字')
+      if (this.keyword === "") {
+        this.$message.warning("请输入关键字");
       } else {
-        this.$refs.mapComp.queryPoi(this.keyword)
+        this.$refs.mapComp.queryPoi(this.keyword);
       }
     },
     // 确定, 保存坐标并返回
     confirmPos() {
-      this.form.lng = this.currentPosition.lng
-      this.form.lat = this.currentPosition.lat
-      if(this.currentPosition.lng!='0'){
+      this.form.lng = this.currentPosition.lng;
+      this.form.lat = this.currentPosition.lat;
+      if (this.currentPosition.lng != "0") {
         // 进行逆地址解析
-        matchReverse(this.currentPosition.lng,this.currentPosition.lat).then(res=>{
-          if(res.data.length>0){
-            this.form.address= {
-              areaCode: res.data[0].politicalCode.substring(0,6), // 区域ID
-              streetCode: res.data[0].politicalCode.substring(0,9), // 街道ID
-              communityCode: res.data[0].politicalCode, // 社区ID
-              gridId: '', // 网格ID
-              fieldintro: res.data[0].standardAddressName.substring(10) // 事件地址
+        matchReverse(this.currentPosition.lng, this.currentPosition.lat)
+          .then((res) => {
+            if (res.data.length > 0) {
+              this.form.address = {
+                areaCode: res.data[0].politicalCode.substring(0, 6), // 区域ID
+                streetCode: res.data[0].politicalCode.substring(0, 9), // 街道ID
+                communityCode: res.data[0].politicalCode, // 社区ID
+                gridId: "", // 网格ID
+                fieldintro: res.data[0].standardAddressName.substring(10), // 事件地址
+              };
             }
-          }
-        }).catch(()=>{
-          console.log('逆地址解析失败')
-        })
-
+          })
+          .catch(() => {
+            console.log("逆地址解析失败");
+          });
       }
-      this.showMap = false
-      this.clearMap()
-      console.log(this.form)
+      this.showMap = false;
+      this.clearMap();
+      console.log(this.form);
     },
     // 清除地图
     clearMap() {
-      this.currentPosition.lng = '0'
-      this.currentPosition.lat = '0'
-      this.$refs.mapComp.clearMap()
+      this.currentPosition.lng = "0";
+      this.currentPosition.lat = "0";
+      this.$refs.mapComp.clearMap();
     },
     // 返回到事件详情
     backToForm() {
       if (this.showMap) {
-        this.showMap = false
-        this.clearMap()
+        this.showMap = false;
+        this.clearMap();
       }
-    }
-  }
-}
+    },
+  },
+};
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-  $rightwidth: 300px;
-  .case-container{
-    width: 100%;
-    display: flex;
-    display: -webkit-flex; /* Safari */
-    justify-content:space-between;
+$rightwidth: 300px;
+.case-container {
+  width: 100%;
+  display: flex;
+  display: -webkit-flex; /* Safari */
+  justify-content: space-between;
+}
+.form-div {
+  width: calc(100%- 300px);
+  /*height: 50vh;*/
+  .checkbox {
+    display: inline-block;
+    line-height: 32px; // 设置行高
+    margin-right: 20px;
   }
-  .form-div{
-    width: calc( 100%- 300px);
-    /*height: 50vh;*/
-    .checkbox{
-      display: inline-block;
-      line-height: 32px; // 设置行高
-      margin-right: 20px;
-    }
-    padding-right:10px;
-  }
-  .knowledge-div{
-    width: $rightwidth;
-  }
+  padding-right: 10px;
+}
+.knowledge-div {
+  width: $rightwidth;
+}
 
-  #map {
-    width: 100%;
-    height: 50vh;
-  }
-
+#map {
+  width: 100%;
+  height: 50vh;
+}
 </style>

diff --git a/package.json b/package.json
index fb32aa2..c325e45 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
     "vue-amap": "^0.5.9",
     "vue-baidu-map": "^0.21.22",
     "vue-router": "3.0.1",
+    "vue-slide-mini": "^1.0.4",
     "vuex": "3.0.1",
     "wangeditor": "^3.1.1"
   },
diff --git a/src/api/callCase.js b/src/api/callCase.js
index cd61986..9da1fc7 100644
--- a/src/api/callCase.js
+++ b/src/api/callCase.js
@@ -126,3 +126,12 @@
     }
   })
 }
+
+// 社会治理事流转步骤接口
+export function eventStepList(data) {
+  return request({
+    url: '/callcenter/api/case/eventStepList',
+    method: 'post',
+    data
+  })
+}
diff --git a/src/assets/global_images/done.png b/src/assets/global_images/done.png
new file mode 100644
index 0000000..c9a2c5e
--- /dev/null
+++ b/src/assets/global_images/done.png
Binary files differ
diff --git a/src/assets/global_images/process.png b/src/assets/global_images/process.png
new file mode 100644
index 0000000..311fe3a
--- /dev/null
+++ b/src/assets/global_images/process.png
Binary files differ
diff --git a/src/components/NomalTable/index.vue b/src/components/NomalTable/index.vue
index 55a7378..8616987 100644
--- a/src/components/NomalTable/index.vue
+++ b/src/components/NomalTable/index.vue
@@ -55,7 +55,7 @@
         </el-col>
       </el-row>
       <!-- 表格正文-->
-      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="handleSelectionChange">
+      <el-table v-loading="listLoading" :data="data" :height="height" :size="size" class="table" row-class-name="small-row-class" border @selection-change="handleSelectionChange">
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns"/>
         <!--多选选中列-->
@@ -176,7 +176,10 @@
           refresh: false // 是否需要刷新按钮
         }
       }
-    }// 表格工具配置
+    },// 表格工具配置
+    height:{
+      type:String,
+    }
   },
   data() {
     return {
diff --git a/src/components/SelectTree/singleSelect.vue b/src/components/SelectTree/singleSelect.vue
index ba15b20..3336346 100644
--- a/src/components/SelectTree/singleSelect.vue
+++ b/src/components/SelectTree/singleSelect.vue
@@ -6,7 +6,8 @@
     trigger="click"
     class="select-tree scrollbar"
     @show="onShowPopover"
-    @hide="onHidePopover">
+    @hide="onHidePopover"
+  >
     <el-tree
       ref="tree"
       :style="`min-width: ${treeWidth}`"
@@ -14,265 +15,276 @@
       :props="props"
       :expand-on-click-node="false"
       :filter-node-method="filterNode"
-      :default-expand-all="false"
+      :default-expand-all="expandAll"
       class="innerbox"
       highlight-current
       accordion
-      @node-click="onClickNode"/>
+      @node-click="onClickNode"
+    />
     <el-input
       slot="reference"
       ref="input"
       v-model="labelModel"
       :style="`width: ${width}px`"
       :size="size"
-      :class="{ 'rotate': showStatus }"
+      :class="{ rotate: showStatus }"
       :placeholder="placeholder"
       :disabled="disabled"
       clearable
-      suffix-icon="el-icon-arrow-down"/>
+      suffix-icon="el-icon-arrow-down"
+    />
   </el-popover>
 </template>
 
 <script>
-
 export default {
-  name: 'SelectTree',
+  name: "SelectTree",
+
   // 设置绑定参数
   model: {
-    prop: 'value',
-    event: 'selected'
+    prop: "value",
+    event: "selected",
   },
   props: {
+    // 是否默认展开全部
+    expandAll: {
+      type: Boolean,
+      default: false,
+    },
     // 接收绑定参数
     value: {
       type: String,
-      default: ''
+      default: "",
     },
     // 输入框宽度
     width: {
       type: String,
-      default: ''
+      default: "",
     },
     size: {
       type: String,
-      default: ''
+      default: "",
     },
     // 输入框宽度
     disabled: {
       type: Boolean,
-      default: false
+      default: false,
     },
     // 选项数据
     options: {
       type: Array,
-      required: true
+      required: true,
     },
     // 输入框占位符
     placeholder: {
       type: String,
       required: false,
-      default: '请选择'
+      default: "请选择",
     },
     // 树节点配置选项
     props: {
       type: Object,
       required: false,
       default: () => ({
-        parent: 'parentId',
-        value: 'rowGuid',
-        label: 'areaName',
-        children: 'children'
-      })
-    }
+        parent: "parentId",
+        value: "rowGuid",
+        label: "areaName",
+        children: "children",
+      }),
+    },
   },
   data() {
     return {
       // 树状菜单显示状态
       showStatus: false,
       // 菜单宽度
-      treeWidth: 'auto',
+      treeWidth: "auto",
       // 输入框显示值
-      labelModel: '',
+      labelModel: "",
       // 实际请求传值
-      valueModel: ''
-    }
+      valueModel: "",
+    };
   },
   computed: {
     // 是否为树状结构数据
     dataType() {
-      const jsonStr = JSON.stringify(this.options)
-      return jsonStr.indexOf(this.props.children) !== -1
+      const jsonStr = JSON.stringify(this.options);
+      return jsonStr.indexOf(this.props.children) !== -1;
     },
     // 若非树状结构，则转化为树状结构数据
     data() {
       // return this.dataType ? this.options : this.switchTree()
-      return this.options
-    }
+      return this.options;
+    },
   },
   watch: {
     labelModel(val) {
-      console.log('labelModel change:' + val)
+      console.log("labelModel change:" + val);
       if (!val) {
-        if (val === '') {
-          this.valueModel = ''
-          this.onCloseTree()
-          this.$emit('selected', this.valueModel)
+        if (val === "") {
+          this.valueModel = "";
+          this.onCloseTree();
+          this.$emit("selected", this.valueModel);
         }
-        this.valueModel = ''
+        this.valueModel = "";
       }
-      this.$refs.tree.filter(val)
+      this.$refs.tree.filter(val);
     },
     value(val) {
-      this.labelModel = this.queryTree(this.data, val)
-    }
+      this.labelModel = this.queryTree(this.data, val);
+    },
   },
   created() {
     // 检测输入框原有值并显示对应 label
     if (this.value) {
-      this.labelModel = this.queryTree(this.data, this.value)
+      this.labelModel = this.queryTree(this.data, this.value);
     }
     // 获取输入框宽度同步至树状菜单宽度
     this.$nextTick(() => {
-      this.treeWidth = `${(this.width || this.$refs.input.$refs.input.clientWidth) - 24}px`
-    })
+      this.treeWidth = `${
+        (this.width || this.$refs.input.$refs.input.clientWidth) - 24
+      }px`;
+    });
   },
   methods: {
     // 单击节点
     onClickNode(node) {
-      this.labelModel = node[this.props.label]
-      this.valueModel = node[this.props.value]
-      this.onCloseTree()
+      this.labelModel = node[this.props.label];
+      this.valueModel = node[this.props.value];
+      this.onCloseTree();
     },
     // 偏平数组转化为树状层级结构
     switchTree() {
-      return this.cleanChildren(this.buildTree(this.options, '0'))
+      return this.cleanChildren(this.buildTree(this.options, "0"));
     },
     // 隐藏树状菜单
     onCloseTree() {
-      this.$refs.popover.showPopper = false
+      this.$refs.popover.showPopper = false;
     },
     // 显示时触发
     onShowPopover() {
-      this.showStatus = true
-      this.$refs.tree.filter(false)
+      this.showStatus = true;
+      this.$refs.tree.filter(false);
     },
     // 隐藏时触发
     onHidePopover() {
-      this.showStatus = false
-      console.log('onHidePopover:' + this.valueModel)
+      this.showStatus = false;
+      console.log("onHidePopover:" + this.valueModel);
       // if (this.valueModel !== '') {
       //   this.$emit('selected', this.valueModel)
       // }
-      this.$emit('selected', this.valueModel)
+      this.$emit("selected", this.valueModel);
     },
     // 树节点过滤方法
     filterNode(query, data) {
-      if (!query) return true
-      return data[this.props.label].indexOf(query) !== -1
+      if (!query) return true;
+      return data[this.props.label].indexOf(query) !== -1;
     },
     // 搜索树状数据中的 ID
     queryTree(tree, id) {
-      let stark = []
-      stark = stark.concat(tree)
+      let stark = [];
+      stark = stark.concat(tree);
       while (stark.length) {
-        const temp = stark.shift()
+        const temp = stark.shift();
         if (temp[this.props.children]) {
-          stark = stark.concat(temp[this.props.children])
+          stark = stark.concat(temp[this.props.children]);
         }
         if (temp[this.props.value] === id) {
-          return temp[this.props.label]
+          return temp[this.props.label];
         }
       }
-      return ''
+      return "";
     },
     // 将一维的扁平数组转换为多层级对象
-    buildTree(data, id = '0') {
+    buildTree(data, id = "0") {
       const fa = (parentId) => {
-        console.log('parentId:' + parentId)
-        const temp = []
+        console.log("parentId:" + parentId);
+        const temp = [];
         for (let i = 0; i < data.length; i++) {
-          const n = data[i]
+          const n = data[i];
           if (n[this.props.parent] === parentId) {
-            n.children = fa(n.code)
-            temp.push(n)
+            n.children = fa(n.code);
+            temp.push(n);
           }
         }
-        return temp
-      }
-      return fa(id)
+        return temp;
+      };
+      return fa(id);
     },
     // 清除空 children项
     cleanChildren(data) {
       const fa = (list) => {
         list.map((e) => {
           if (e.children.length) {
-            fa(e.children)
+            fa(e.children);
           } else {
-            delete e.children
+            delete e.children;
           }
-          return e
-        })
-        return list
-      }
-      return fa(data)
-    }
-  }
-}
+          return e;
+        });
+        return list;
+      };
+      return fa(data);
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-  .scrollbar {
-    overflow-y: scroll;
-    &::-webkit-scrollbar {
-      z-index: 11;
-      width: 6px;
-    }
-    &::-webkit-scrollbar-track,
-    &::-webkit-scrollbar-corner {
-      background: #fff;
-    }
-    &::-webkit-scrollbar-thumb {
-      // border-radius: 5px;
-      width: 6px;
-      background-color: #eee;
-      &:hover {
-        background-color: #ccc;
-      }
-    }
-    &::-webkit-scrollbar-track-piece {
-      background: #fff;
-      width: 6px;
+.scrollbar {
+  overflow-y: scroll;
+  &::-webkit-scrollbar {
+    z-index: 11;
+    width: 6px;
+  }
+  &::-webkit-scrollbar-track,
+  &::-webkit-scrollbar-corner {
+    background: #fff;
+  }
+  &::-webkit-scrollbar-thumb {
+    // border-radius: 5px;
+    width: 6px;
+    background-color: #eee;
+    &:hover {
+      background-color: #ccc;
     }
   }
-  .select-tree .el-tree {
-    max-height: 350px;
+  &::-webkit-scrollbar-track-piece {
+    background: #fff;
+    width: 6px;
   }
-  .select-tree .el-input.el-input--suffix {
-    cursor: pointer;
-  }
-  .select-tree .el-input.el-input--suffix.rotate .el-input__suffix {
-    transform: rotate(180deg);
-  }
+}
+.select-tree .el-tree {
+  max-height: 350px;
+}
+.select-tree .el-input.el-input--suffix {
+  cursor: pointer;
+}
+.select-tree .el-input.el-input--suffix.rotate .el-input__suffix {
+  transform: rotate(180deg);
+}
 
-  .innerbox::-webkit-scrollbar {/*滚动条整体样式*/
-    width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
-    height: 4px;
-  }
-  .innerbox::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
-    border-radius: 5px;
-    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
-    background: rgba(0,0,0,0.2);
-  }
-  .innerbox::-webkit-scrollbar-track { /*滚动条里面轨道*/
-    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
-    border-radius: 0;
-    background: rgba(0, 0, 0, 0.1);
-  }
+.innerbox::-webkit-scrollbar {
+  /*滚动条整体样式*/
+  width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
+  height: 4px;
+}
+.innerbox::-webkit-scrollbar-thumb {
+  /*滚动条里面小方块*/
+  border-radius: 5px;
+  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  background: rgba(0, 0, 0, 0.2);
+}
+.innerbox::-webkit-scrollbar-track {
+  /*滚动条里面轨道*/
+  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  border-radius: 0;
+  background: rgba(0, 0, 0, 0.1);
+}
 </style>
 <style lang="scss">
-  .el-popover{
-    max-height: 400px;
-    overflow: auto;
-  }
-
+.el-popover {
+  max-height: 400px;
+  overflow: auto;
+}
 </style>
diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss
index 65abe46..8236420 100644
--- a/src/styles/sidebar.scss
+++ b/src/styles/sidebar.scss
@@ -212,3 +212,8 @@
 .is-active>.light-line{
   background-color: $menuActiveText
 }
+
+.el-image-viewer__close{
+  color: #fff !important;
+  font-size: 52px !important;
+}
\ No newline at end of file
diff --git a/src/views/caseManage/caseCommon/SwiperImg.vue b/src/views/caseManage/caseCommon/SwiperImg.vue
new file mode 100644
index 0000000..4ff3fd2
--- /dev/null
+++ b/src/views/caseManage/caseCommon/SwiperImg.vue
@@ -0,0 +1,88 @@
+<template>
+	<div class="swiper" @mouseover="overHd" @mouseout="auto">
+		<div class="swiper-item" v-for="(item,ind) in gallery" :key="item" v-show="ind==index">
+			<img :src="item" width="100%"  style="width: 300px; height: 450px; overflow: hidden">
+		</div>
+		<div class="thumbs" v-if="gallery.length > 1">
+			<span class="thumb" :class="{'active' :item==index+1}" v-for="item in gallery.length" :key='item'
+				@click="index=item-1">{{item}}</span>
+		</div>
+	</div>
+</template>
+ 
+<script>
+	export default {
+		props: {
+			gallery: {
+				type: Array,
+				default () {
+					return []
+				}
+			}
+		},
+		data() {
+			return {
+				//默认显示 
+				index: 0,
+				stopID: null,
+			}
+		},
+		// 当组件挂载完毕 执行自动播放
+		created() {
+			this.auto();
+		},
+		beforeDestroy(){
+			this.overHd();
+		},
+		methods: {
+			//鼠标一开  auto自动执行
+			auto() {
+				this.stopID = setInterval(() => {
+					this.index++;
+					this.check();
+				}, 5000)
+			},
+			overHd() {
+				clearInterval(this.stopID);
+			},
+			//检查边界
+			check() {
+				if (this.index == this.gallery.length) {
+					this.index = 0;
+				}
+			}
+		}
+	}
+</script>
+ 
+<style scoped="scoped">
+	.swiper {
+		position: relative;
+	}
+ 
+	.swiper .thumbs {
+		position: absolute;
+		bottom: 10px;
+		width: 100%;
+		text-align: center;
+	}
+ 
+	.thumb {
+		width: 10px;
+		height: 10px;
+		display: inline-block;
+		border-radius: 15px;
+		text-indent: 9999em;
+		margin: 0 5px;
+		background-color: #fff;
+	}
+ 
+	.thumb:hover {
+		cursor: pointer;
+		background-color: #42b983;
+	}
+	.active {
+		background-color: #42b983;
+ 
+	}
+</style>
\ No newline at end of file
diff --git a/src/views/caseManage/caseCommon/caseFormProcess.vue b/src/views/caseManage/caseCommon/caseFormProcess.vue
index f8a9666..e6a6446 100644
--- a/src/views/caseManage/caseCommon/caseFormProcess.vue
+++ b/src/views/caseManage/caseCommon/caseFormProcess.vue
@@ -4,138 +4,183 @@
       <el-row :gutter="20">
         <el-col :span="6">
           <el-form-item label="事件编号">
-            <el-input :value="caseForm.caseId" size="small"/>
+            <el-input :value="caseForm.caseId" size="small" />
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="来电时间">
-            <el-input :value="caseForm.callTime" size="small"/>
+            <el-input :value="caseForm.callTime" size="small" />
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="联系人">
-            <el-input :value="caseForm.reporterName" size="small"/>
+            <el-input :value="caseForm.reporterName" size="small" />
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="联系电话">
-            <el-input :value="caseForm.reporterPhone" size="small"/>
+            <el-input :value="caseForm.reporterPhone" size="small" />
           </el-form-item>
         </el-col>
       </el-row>
       <el-row :gutter="20">
         <el-col :span="6">
           <el-form-item label="事件来源">
-            <el-input :value="caseForm.sourceName" size="small"/>
+            <el-input :value="caseForm.sourceName" size="small" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="事件类型">
+            <el-input :value="caseForm.sourceType" size="small" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="精细化平台事件编号">
+            <el-input :value="caseForm.sourceNumber" size="small" />
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="事件分类">
-            <el-input :value="caseForm.eorcName" size="small"/>
+            <el-input :value="caseForm.eorcName" size="small" />
             <!--<el-input :value="caseForm.eorcName + '/' + caseForm.caseTypeName" size="small"/>-->
             <!--<el-input :value="caseForm.eorcName + '/' + caseForm.caseTypeName + '/' + caseForm.caseDetailTypeName" size="small"/>-->
           </el-form-item>
         </el-col>
-        <el-col :span="6">
-          <el-form-item label="紧急程度">
-            <el-input :value="caseForm.caseLevelName" size="small"/>
-          </el-form-item>
-        </el-col>
+
         <el-col :span="6">
           <el-form-item label="限办日期">
-            <el-input :value="caseForm.limitedTime" size="small"/>
+            <el-input :value="caseForm.limitedTime" size="small" />
           </el-form-item>
         </el-col>
-      </el-row>
-      <el-row :gutter="20">
         <el-col :span="6">
           <el-form-item label="事件地址">
             <!--<el-input :value="caseForm.areaName + '-' + caseForm.streetName + '-' + caseForm.communityName + '-' + caseForm.fieldintro" size="small"/>-->
-            <el-input :value="address" size="small"/>
+            <el-input :value="address" size="small" />
           </el-form-item>
         </el-col>
         <el-col :span="6">
-          <el-form-item label="事件辖区">
-            <el-input :value="caseForm.areaName" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="典型案例">
-            <el-input :value="caseForm.isTypical === '1' ? '是' : '否'" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="要情">
-            <el-input :value="caseForm.isImportant === '1' ? '是' : '否'" size="small"/>
+          <!-- <el-form-item label="紧急程度"> -->
+          <el-form-item label="事件状态">
+            <el-input :value="caseForm.caseLevelName" size="small" />
           </el-form-item>
         </el-col>
       </el-row>
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item label="当前事件状态">
-            <el-input :value="caseForm.stateName" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="当前处理方式">
-            <el-input :value="caseForm.caseStateName" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="需要回访">
-            <el-input :value="caseForm.isReturnVisit === '1' ? '是' : '否'" size="small"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="受理录音">
-            <el-input :value="caseForm.sound" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-button type="text" @click="playSound(caseForm.sound)">播放录音</el-button>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="回访录音">
-            <el-input :value="caseForm.satisfactionSound" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-button type="text" @click="playSound(caseForm.satisfactionSound)">播放录音</el-button>
-        <el-popover
-          v-if="caseForm.caseState === 5"
-          placement="top"
-          width="180"
-          v-model="popoverVisible">
-          <div style="text-align:center; margin: 0">
-            <el-button size="mini"  @click="revisit('')">本地号码</el-button>
-            <el-button type="primary" size="mini"  @click="revisit('0')">外地号码</el-button>
-          </div>
-          <el-button slot="reference" type="text">回访拨号</el-button>
-        </el-popover>
-      </el-row>
-      <el-row>
-        <el-col :span="24">
-          <el-form-item label="事件标题">
-            <el-input :value="caseForm.title" size="small"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row>
-        <el-col :span="24">
-          <el-form-item label="事件内容">
-            <el-input :value="caseForm.description" size="small"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row v-show="this.caseImage.length>0">
-        <el-form-item label="事件图片">
-          <!-- 图片展示 -->
-          <div class="image-container">
-            <el-image v-for="img in caseImage" :key="img" :src="img" fit="fill" class="case-image" :preview-src-list="caseImage"/>
-          </div>
-        </el-form-item>
-      </el-row>
+      <el-collapse v-model="activeName" accordion>
+        <el-collapse-item name="1">
+          <template slot="title">
+            <span class="collapse-title">更多信息</span>
+          </template>
+          <el-row :gutter="20">
+            <el-col :span="6">
+              <el-form-item label="事件辖区">
+                <el-input :value="caseForm.areaName" size="small" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="典型案例">
+                <el-input
+                  :value="caseForm.isTypical === '1' ? '是' : '否'"
+                  size="small"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="要情">
+                <el-input
+                  :value="caseForm.isImportant === '1' ? '是' : '否'"
+                  size="small"
+                />
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <el-row :gutter="20">
+            <el-col :span="6">
+              <el-form-item label="当前事件状态">
+                <el-input :value="caseForm.stateName" size="small" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="当前处理方式">
+                <el-input :value="caseForm.caseStateName" size="small" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="需要回访">
+                <el-input
+                  :value="caseForm.isReturnVisit === '1' ? '是' : '否'"
+                  size="small"
+                />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <el-form-item label="受理录音">
+                <el-input :value="caseForm.sound" size="small" />
+              </el-form-item>
+            </el-col>
+            <el-button type="text" @click="playSound(caseForm.sound)"
+              >播放录音</el-button
+            >
+          </el-row>
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <el-form-item label="回访录音">
+                <el-input :value="caseForm.satisfactionSound" size="small" />
+              </el-form-item>
+            </el-col>
+            <el-button
+              type="text"
+              @click="playSound(caseForm.satisfactionSound)"
+              >播放录音</el-button
+            >
+            <el-popover
+              v-if="caseForm.caseState === 5"
+              placement="top"
+              width="180"
+              v-model="popoverVisible"
+            >
+              <div style="text-align: center; margin: 0">
+                <el-button size="mini" @click="revisit('')">本地号码</el-button>
+                <el-button type="primary" size="mini" @click="revisit('0')"
+                  >外地号码</el-button
+                >
+              </div>
+              <el-button slot="reference" type="text">回访拨号</el-button>
+            </el-popover>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="事件标题">
+                <el-input :value="caseForm.title" size="small" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="事件内容">
+                <el-input :value="caseForm.description" size="small" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row v-show="this.caseImage.length > 0">
+            <el-form-item label="事件图片">
+              <!-- 图片展示 -->
+              <div class="image-container">
+                <el-image
+                  v-for="img in caseImage"
+                  :key="img"
+                  :src="img"
+                  fit="fill"
+                  class="case-image"
+                  :preview-src-list="caseImage"
+                />
+              </div>
+            </el-form-item>
+          </el-row>
+        </el-collapse-item>
+      </el-collapse>
       <!--<el-row>-->
       <!--<el-col :span="24">-->
       <!--<el-form-item label="备注信息">-->
@@ -151,98 +196,128 @@
       width="600px"
       append-to-body
       custom-class="sound-dialog"
-      @close="closeSound">
-      <audio-player ref="adplayer" :the-url="sound.url" :the-control-ist="sound.controlList"/>
+      @close="closeSound"
+    >
+      <audio-player
+        ref="adplayer"
+        :the-url="sound.url"
+        :the-control-ist="sound.controlList"
+      />
     </el-dialog>
   </div>
 </template>
 
 <script>
 // import { caseDetail } from '@/api/callCase'
-import { getSoundName } from '@/api/sound'
-import AudioPlayer from '@/components/AudioPlayer/AudioPlayer'
+import { getSoundName } from "@/api/sound";
+import AudioPlayer from "@/components/AudioPlayer/AudioPlayer";
 
 export default {
-  name: 'CaseFormProcess',
+  name: "CaseFormProcess",
   components: { AudioPlayer },
   props: {
     id: {
       type: String,
-      default: ''
+      default: "",
     }, // 事件id（主键id）
     caseForm: {
       type: Object,
       default() {
-        return {}
-      }
-    }
+        return {};
+      },
+    },
   },
   data() {
     return {
+      activeName: 1,
       sound: {
-        url: '',
-        controlList: 'noDownload noSpeed onlyOnePlaying'
+        url: "",
+        controlList: "noDownload noSpeed onlyOnePlaying",
       },
       popoverVisible: false, // 选择本地外地呼叫的弹窗
-      soundShow: false // 显示音频弹窗
-    }
+      soundShow: false, // 显示音频弹窗
+    };
   },
   computed: {
     address() {
-      const address_ori = [this.caseForm.areaName, this.caseForm.streetName, this.caseForm.communityName, this.caseForm.fieldintro]
-      const address = address_ori.filter(item => item && item.length > 0)
-      return address.join('-')
+      const address_ori = [
+        this.caseForm.areaName,
+        this.caseForm.streetName,
+        this.caseForm.communityName,
+        this.caseForm.fieldintro,
+      ];
+      const address = address_ori.filter((item) => item && item.length > 0);
+      return address.join("-");
     },
-    caseImage(){
-      if(this.caseForm.caseImage){
-        const base_url = process.env.BASE_API + '/static/'
-        const image_ori = this.caseForm.caseImage.split(';')
-        const imageList = image_ori.map(item=>base_url+ item)
-        return imageList
-      }else{
-        return []
+    caseImage() {
+      if (this.caseForm.caseImage) {
+        const base_url = process.env.BASE_API + "/static/";
+        const image_ori = this.caseForm.caseImage.split(";");
+        const imageList = image_ori.map((item) => base_url + item);
+        return imageList;
+      } else {
+        return [];
       }
-    }
+    },
   },
   methods: {
     // 播放录音
     playSound(sound) {
       if (sound) {
-        getSoundName(sound).then(res => {
-          const recordName = res.data
+        getSoundName(sound).then((res) => {
+          const recordName = res.data;
           if (recordName) {
-            this.sound.url = recordName
-            this.soundShow = true
+            this.sound.url = recordName;
+            this.soundShow = true;
           } else {
-            this.$message.warning('无录音')
+            this.$message.warning("无录音");
           }
-        })
+        });
       } else {
-        this.$message.warning('无录音')
+        this.$message.warning("无录音");
       }
     },
     // 关闭播放弹窗
     closeSound() {
-      this.$refs.adplayer.pausePlay()
+      this.$refs.adplayer.pausePlay();
     },
     // 拨打回访电话
     revisit(middleString) {
       // middleString为空或0，分别表示本地或外地
-      const tel = '9' + middleString + this.caseForm.reporterPhone
-      this.$store.dispatch('dial', tel)
-      this.popoverVisible = false
-    }
-  }
-}
+      const tel = "9" + middleString + this.caseForm.reporterPhone;
+      this.$store.dispatch("dial", tel);
+      this.popoverVisible = false;
+    },
+  },
+};
 </script>
 <style lang="scss" scoped>
-  .image-container{
-    display: flex;
-    justify-content: flex-start;
-    .case-image{
-      width:100px;
-      height:100px;
-      margin-right: 10px;
-    }
+.image-container {
+  display: flex;
+  justify-content: flex-start;
+  .case-image {
+    width: 100px;
+    height: 100px;
+    margin-right: 10px;
   }
+}
+.collapse-title {
+  font-size: 14px;
+  color: #606266;
+  font-weight: 800;
+  position: absolute;
+  right: 80px;
+  margin-top: -85px;
+}
+/deep/.el-collapse-item__arrow{
+  margin-top: -85px;
+}
+/deep/.el-collapse {
+  border: 0;
+}
+/deep/.el-collapse-item__header {
+  justify-content: end;
+  border: 0;
+  height: 0;
+}
 </style>
diff --git a/src/views/caseManage/caseCommon/caseFormRead.vue b/src/views/caseManage/caseCommon/caseFormRead.vue
index 897023a..7fa39af 100644
--- a/src/views/caseManage/caseCommon/caseFormRead.vue
+++ b/src/views/caseManage/caseCommon/caseFormRead.vue
@@ -4,134 +4,173 @@
       <el-row :gutter="20">
         <el-col :span="6">
           <el-form-item label="事件编号">
-            <el-input :value="caseForm.caseId" size="small"/>
+            <el-input :value="caseForm.caseId" size="small" />
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="来电时间">
-            <el-input :value="caseForm.callTime" size="small"/>
+            <el-input :value="caseForm.callTime" size="small" />
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="联系人">
-            <el-input :value="caseForm.reporterName" size="small"/>
+            <el-input :value="caseForm.reporterName" size="small" />
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="联系电话">
-            <el-input :value="caseForm.reporterPhone" size="small"/>
+            <el-input :value="caseForm.reporterPhone" size="small" />
           </el-form-item>
         </el-col>
       </el-row>
       <el-row :gutter="20">
         <el-col :span="6">
           <el-form-item label="事件来源">
-            <el-input :value="caseForm.sourceName" size="small"/>
+            <el-input :value="caseForm.sourceName" size="small" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="事件类型">
+            <el-input :value="caseForm.sourceType" size="small" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="精细化平台事件编号">
+            <el-input :value="caseForm.sourceNumber" size="small" />
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="事件分类">
-            <el-input :value="caseForm.eorcName" size="small"/>
+            <el-input :value="caseForm.eorcName" size="small" />
             <!--<el-input :value="caseForm.eorcName + '/' + caseForm.caseTypeName" size="small"/>-->
             <!--<el-input :value="caseForm.eorcName + '/' + caseForm.caseTypeName + '/' + caseForm.caseDetailTypeName" size="small"/>-->
           </el-form-item>
         </el-col>
-        <el-col :span="6">
-          <el-form-item label="紧急程度">
-            <el-input :value="caseForm.caseLevelName" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="限办日期">
-            <el-input :value="caseForm.limitedTime" size="small"/>
-          </el-form-item>
-        </el-col>
       </el-row>
       <el-row :gutter="20">
         <el-col :span="6">
+          <el-form-item label="限办日期">
+            <el-input :value="caseForm.limitedTime" size="small" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
           <el-form-item label="事件地址">
             <!--<el-input :value="caseForm.areaName + '-' + caseForm.streetName + '-' + caseForm.communityName + '-' + caseForm.fieldintro" size="small"/>-->
-            <el-input :value="address" size="small"/>
+            <el-input :value="address" size="small" />
           </el-form-item>
         </el-col>
         <el-col :span="6">
-          <el-form-item label="事件辖区">
-            <el-input :value="caseForm.areaName" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="典型案例">
-            <el-input :value="caseForm.isTypical === '1' ? '是' : '否'" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="要情">
-            <el-input :value="caseForm.isImportant === '1' ? '是' : '否'" size="small"/>
+          <el-form-item label="事件状态">
+            <el-input :value="caseForm.caseLevelName" size="small" />
           </el-form-item>
         </el-col>
       </el-row>
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item label="当前事件状态">
-            <el-input :value="caseForm.stateName" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="当前处理方式">
-            <el-input :value="caseForm.caseStateName" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="需要回访">
-            <el-input :value="caseForm.isReturnVisit === '1' ? '是' : '否'" size="small"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row v-if="caseForm.sound" :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="受理录音">
-            <el-input :value="caseForm.sound" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-button type="text" @click="playSound(caseForm.sound)">播放录音</el-button>
-      </el-row>
-      <el-row v-if="caseForm.satisfactionSound" :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="回访录音">
-            <el-input :value="caseForm.satisfactionSound" size="small"/>
-          </el-form-item>
-        </el-col>
-        <el-button type="text" @click="playSound(caseForm.satisfactionSound)">播放录音</el-button>
-      </el-row>
-      <el-row>
-        <el-col :span="24">
-          <el-form-item label="事件标题">
-            <el-input :value="caseForm.title" size="small"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row>
-        <el-col :span="24">
-          <el-form-item label="事件内容">
-            <el-input :value="caseForm.description" size="small"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row v-show="this.caseImage.length>0">
-        <el-form-item label="事件图片">
-        <!-- 图片展示 -->
-        <div class="image-container">
-          <el-image v-for="img in caseImage" :key="img" :src="img" fit="fill" class="case-image" :preview-src-list="caseImage"/>
-        </div>
-        </el-form-item>
-      </el-row>
-      <!--<el-row>-->
-      <!--<el-col :span="24">-->
-      <!--<el-form-item label="备注信息">-->
-      <!--<el-input :value="caseForm.remarks" size="small"/>-->
-      <!--</el-form-item>-->
-      <!--</el-col>-->
-      <!--</el-row>-->
+      <el-collapse v-model="activeName" accordion>
+        <el-collapse-item name="1">
+          <template slot="title">
+            <span class="collapse-title">更多信息</span>
+          </template>
+          <el-row :gutter="20">
+            <el-col :span="6">
+              <el-form-item label="事件辖区">
+                <el-input :value="caseForm.areaName" size="small" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="典型案例">
+                <el-input
+                  :value="caseForm.isTypical === '1' ? '是' : '否'"
+                  size="small"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="要情">
+                <el-input
+                  :value="caseForm.isImportant === '1' ? '是' : '否'"
+                  size="small"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="当前事件状态">
+                <el-input :value="caseForm.stateName" size="small" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="当前处理方式">
+                <el-input :value="caseForm.caseStateName" size="small" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="需要回访">
+                <el-input
+                  :value="caseForm.isReturnVisit === '1' ? '是' : '否'"
+                  size="small"
+                />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row v-if="caseForm.sound" :gutter="20">
+            <el-col :span="12">
+              <el-form-item label="受理录音">
+                <el-input :value="caseForm.sound" size="small" />
+              </el-form-item>
+            </el-col>
+            <el-button type="text" @click="playSound(caseForm.sound)"
+              >播放录音</el-button
+            >
+          </el-row>
+          <el-row v-if="caseForm.satisfactionSound" :gutter="20">
+            <el-col :span="12">
+              <el-form-item label="回访录音">
+                <el-input :value="caseForm.satisfactionSound" size="small" />
+              </el-form-item>
+            </el-col>
+            <el-button
+              type="text"
+              @click="playSound(caseForm.satisfactionSound)"
+              >播放录音</el-button
+            >
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="事件标题">
+                <el-input :value="caseForm.title" size="small" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="事件内容">
+                <el-input :value="caseForm.description" size="small" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row v-show="this.caseImage.length > 0">
+            <el-form-item label="事件图片">
+              <!-- 图片展示 -->
+              <div class="image-container">
+                <el-image
+                  v-for="img in caseImage"
+                  :key="img"
+                  :src="img"
+                  fit="fill"
+                  class="case-image"
+                  :preview-src-list="caseImage"
+                />
+              </div>
+            </el-form-item>
+          </el-row>
+          <!--<el-row>-->
+          <!--<el-col :span="24">-->
+          <!--<el-form-item label="备注信息">-->
+          <!--<el-input :value="caseForm.remarks" size="small"/>-->
+          <!--</el-form-item>-->
+          <!--</el-col>-->
+          <!--</el-row>-->
+        </el-collapse-item>
+      </el-collapse>
     </el-form>
     <!--播放音频弹窗-->
     <el-dialog
@@ -140,90 +179,120 @@
       width="600px"
       append-to-body
       custom-class="sound-dialog"
-      @close="closeSound">
-      <audio-player ref="adplayer" :the-url="sound.url" :the-control-ist="sound.controlList"/>
+      @close="closeSound"
+    >
+      <audio-player
+        ref="adplayer"
+        :the-url="sound.url"
+        :the-control-ist="sound.controlList"
+      />
     </el-dialog>
   </div>
 </template>
 
 <script>
 // import { caseDetail } from '@/api/callCase'
-import { getSoundName } from '@/api/sound'
-import AudioPlayer from '@/components/AudioPlayer/AudioPlayer'
+import { getSoundName } from "@/api/sound";
+import AudioPlayer from "@/components/AudioPlayer/AudioPlayer";
 
 export default {
-  name: 'CaseFormRead',
+  name: "CaseFormRead",
   components: { AudioPlayer },
   props: {
     id: {
       type: String,
-      default: ''
+      default: "",
     }, // 事件id（主键id）
     caseForm: {
       type: Object,
       default() {
-        return {}
-      }
-    }
+        return {};
+      },
+    },
   },
   data() {
     return {
+      activeName: 1,
       sound: {
-        url: '',
-        controlList: 'noDownload noSpeed onlyOnePlaying'
+        url: "",
+        controlList: "noDownload noSpeed onlyOnePlaying",
       },
-      soundShow: false // 显示音频弹窗
-    }
+      soundShow: false, // 显示音频弹窗
+    };
   },
   computed: {
     address() {
-      const address_ori = [this.caseForm.areaName, this.caseForm.streetName, this.caseForm.communityName, this.caseForm.fieldintro]
-      const address = address_ori.filter(item => item && item.length > 0)
-      return address.join('-')
+      const address_ori = [
+        this.caseForm.areaName,
+        this.caseForm.streetName,
+        this.caseForm.communityName,
+        this.caseForm.fieldintro,
+      ];
+      const address = address_ori.filter((item) => item && item.length > 0);
+      return address.join("-");
     },
-    caseImage(){
-      if(this.caseForm.caseImage){
-        const base_url = process.env.BASE_API + '/static/'
-        const image_ori = this.caseForm.caseImage.split(';')
-        const imageList = image_ori.map(item=>base_url+ item)
-        return imageList
-      }else{
-        return []
+    caseImage() {
+      if (this.caseForm.caseImage) {
+        const base_url = process.env.BASE_API + "/static/";
+        const image_ori = this.caseForm.caseImage.split(";");
+        const imageList = image_ori.map((item) => base_url + item);
+        return imageList;
+      } else {
+        return [];
       }
-    }
+    },
   },
   methods: {
     // 播放录音
     playSound(sound) {
       if (sound) {
-        getSoundName(sound).then(res => {
-          const recordName = res.data
+        getSoundName(sound).then((res) => {
+          const recordName = res.data;
           if (recordName) {
-            this.sound.url = recordName
-            this.soundShow = true
+            this.sound.url = recordName;
+            this.soundShow = true;
           } else {
-            this.$message.warning('无录音')
+            this.$message.warning("无录音");
           }
-        })
+        });
       } else {
-        this.$message.warning('无录音')
+        this.$message.warning("无录音");
       }
     },
     // 关闭播放弹窗
     closeSound() {
-      this.$refs.adplayer.pausePlay()
-    }
-  }
-}
+      this.$refs.adplayer.pausePlay();
+    },
+  },
+};
 </script>
 <style lang="scss" scoped>
-  .image-container{
-    display: flex;
-    justify-content: flex-start;
-    .case-image{
-      width:100px;
-      height:100px;
-      margin-right: 10px;
-    }
+.image-container {
+  display: flex;
+  justify-content: flex-start;
+  .case-image {
+    width: 100px;
+    height: 100px;
+    margin-right: 10px;
   }
+}
+.collapse-title {
+  font-size: 14px;
+  color: #606266;
+  font-weight: 800;
+  position: absolute;
+  right: 80px;
+  margin-top: -85px;
+}
+/deep/.el-collapse-item__arrow {
+  margin-top: -85px;
+}
+/deep/.el-collapse {
+  border: 0;
+}
+/deep/.el-collapse-item__header {
+  justify-content: end;
+  border: 0;
+  height: 0;
+}
 </style>
diff --git a/src/views/caseManage/caseCommon/caseImgShow.vue b/src/views/caseManage/caseCommon/caseImgShow.vue
new file mode 100644
index 0000000..c6c911d
--- /dev/null
+++ b/src/views/caseManage/caseCommon/caseImgShow.vue
@@ -0,0 +1,42 @@
+<template>
+  <SwiperImg
+    v-if="imgs.length > 0"
+    style="width: 300px; height: 450px; overflow: hidden"
+    :gallery="imgs"
+  />
+  <el-image v-else>
+    <div slot="error" class="image-slot">
+      暂无图片
+    </div>
+  </el-image>
+</template>
+
+<script>
+import SwiperImg from "./SwiperImg.vue";
+export default {
+  components: {
+    SwiperImg,
+  },
+  props: {
+    imgs: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.el-image {
+  margin-top: 3px;
+  width: 300px;
+  height: 450px;
+  line-height: 450px;
+  overflow: hidden;
+  text-align: center;
+  background: #f5f7fa;
+  color: #909399;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/caseManage/caseCommon/caseProcessTable.vue b/src/views/caseManage/caseCommon/caseProcessTable.vue
new file mode 100644
index 0000000..4c54b7f
--- /dev/null
+++ b/src/views/caseManage/caseCommon/caseProcessTable.vue
@@ -0,0 +1,423 @@
+<template>
+  <div class="case-wrap">
+      {{showAll}}
+      {{listData}}
+    <div class="showAllDetail">
+      <el-switch
+        v-model="showAll"
+        active-color="#13ce66"
+        active-text="展开全部信息"
+      >
+      </el-switch>
+    </div>
+    <div class="moreDetail" v-show="!showAll">
+      <!-- 两条数据显示 -->
+      <!-- <div class="step-wrap" style="display:none">
+        <div class="before line">
+          <div class="icon"></div>
+          <div class="title">
+            {{ detailObj.end.processTitle }} &nbsp;&nbsp;&nbsp;&nbsp;
+            <span>{{ detailObj.end.time }}</span>
+          </div>
+          <div class="content">
+            <div class="left">
+              <p>发送人:{{ detailObj.end.sender }}</p>
+              <p>接收人:{{ detailObj.end.sender }}</p>
+              <p>处置详情:{{ detailObj.end.processTitle }}</p>
+            </div>
+            <div class="right">
+              <div class="imgs-wrap">
+                <el-image
+                  v-for="img in detailObj.end.imgs"
+                  :key="img"
+                  :src="img"
+                  class="zoom"
+                  fit="fill"
+                  :preview-src-list="caseImage(img)"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="after">
+          <div class="icon"></div>
+          <div class="title">
+            {{ detailObj.end.processTitle }} &nbsp;&nbsp;&nbsp;&nbsp;
+            <span>{{ detailObj.end.time }}</span>
+          </div>
+          <div class="content">
+            <div class="left">
+              <p>发送人:{{ detailObj.end.sender }}</p>
+              <p>接收人:{{ detailObj.end.sender }}</p>
+              <p>处置详情:{{ detailObj.end.processTitle }}</p>
+            </div>
+            <div class="right">
+              <div class="imgs-wrap">
+                <el-image
+                  v-for="img in detailObj.end.imgs"
+                  :key="img"
+                  :src="img"
+                  class="zoom"
+                  fit="fill"
+                  :preview-src-list="caseImage(img)"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div> -->
+        <div class="step-more-wrap">
+        <div class="detail-wrap" v-for="(item,index) in tempList" :Key="index">
+          <div class="leftLine" v-if="index != tempList.length-1"></div>
+          <div class="title">
+          <div v-if="item.nextId" class="done"></div>
+          <div v-else class="process"></div>
+            {{ item.processTitle }} &nbsp;&nbsp;&nbsp;&nbsp;
+            <span>{{ item.time }}</span>
+          </div>
+          <div class="content">
+            <div class="left">
+              <p>发送人:{{ item.sender }}</p>
+              <p>接收人:{{ item.sender }}</p>
+              <p>处置详情:{{item.processTitle }}</p>
+            </div>
+            <div class="right">
+              <div class="imgs-wrap">
+                <el-image
+                  v-for="img in item.imgs"
+                  :key="img"
+                  :src="img"
+                  class="zoom"
+                  fit="fill"
+                  :preview-src-list="caseImage(img)"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="moreDetail">
+      <div class="step-more-wrap" v-show="showAll">
+        <div class="detail-wrap" v-for="(item,index) in listData" :Key="index">
+          <div class="leftLine" v-if="index != listData.length-1"></div>
+          <div class="title">
+          <div v-if="item.nextId" class="done"></div>
+          <div v-else class="process"></div>
+            {{ item.processTitle }} &nbsp;&nbsp;&nbsp;&nbsp;
+            <span>{{ item.time }}</span>
+          </div>
+          <div class="content">
+            <div class="left">
+              <p>发送人:{{ item.sender }}</p>
+              <p>接收人:{{ item.sender }}</p>
+              <p :title="item.processTitle">处置详情:{{item.processTitle }}</p>
+            </div>
+            <div class="right">
+              <div class="imgs-wrap">
+                <el-image
+                  v-for="img in item.imgs"
+                  :key="img"
+                  :src="img"
+                  class="zoom"
+                  fit="fill"
+                  :preview-src-list="caseImage(img)"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    list: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      showAll: false,
+      photoVisible: false,
+      bigImgUrl: "",
+      detailObj: {
+        start: {},
+        end: {},
+      },
+      imgs: [
+        "https://t7.baidu.com/it/u=1742010762,3975931984&fm=193&f=GIF",
+        "https://t7.baidu.com/it/u=1302518827,2012573433&fm=193&f=GIF",
+        "https://t7.baidu.com/it/u=1216634532,1327384749&fm=193&f=GIF",
+      ],
+      listData: [], // 全部数据
+      tempList: [], // 首尾数据
+    };
+  },
+  watch:{
+    list(val){
+      // alert(val)
+      console.log(val)
+    }
+  },
+  created() {
+          // alert(this.list)
+    // this.listData = this.treeDataToCompressed(this.list).reverse();
+      // 处理之后的数据 获取首尾数据
+    this.listData = this.list;
+    this.tempList = [this.listData[0],this.listData.at(-1)];
+    this.listData = this.listData.map((item) => {
+      item.imgs = this.imgs;
+      return item; 
+    });
+  },
+  methods: {
+    showBigImage(e) {
+      //点击图片函数，点击后，把photoVisible设置成true
+      if (e != "") {
+        this.photoVisible = true;
+        this.bigImgUrl = e.currentTarget.src;
+      }
+    },
+    caseImage(img) {
+      return img ? [].concat(img) : [];
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.case-wrap {
+  width: 60vw;
+  padding-top: 20px;
+}
+.before::after {
+  content: "";
+  display: inline-block;
+  position: absolute;
+  top: 12px;
+  left: -31px;
+  width: 2px;
+  height: 90%;
+  border-left: 2px dashed #ccc;
+}
+.moreDetail {
+  font-size: 14px !important;
+  position: relative;
+  margin-top: 20px;
+}
+.step-wrap {
+  box-sizing: border-box;
+  height: 300px;
+  padding-left: 30px;
+}
+.step-wrap {
+  .before {
+    position: relative;
+    height: 50%;
+  }
+  .after {
+    position: relative;
+    height: 50%;
+  }
+  .content {
+    margin-top: 20px;
+    width: 95%;
+    height: 100px;
+    background: #f0f0f0;
+    padding: 20px 30px;
+    border-radius: 10px;
+    display: flex;
+
+    .left {
+      width: 420px;
+      p {
+        font-size: 14px !important;
+        padding: 0;
+        margin: 0;
+        margin-top: 2px;
+        line-height: 20px;
+      }
+    }
+    .right {
+      position: relative;
+      flex: 1;
+    }
+  }
+}
+.title {
+  font-weight: 800;
+  span {
+    color: #ccc;
+    font-weight: 400 !important;
+  }
+}
+.moreDetail .process {
+  z-index: 10;
+  content: "";
+  display: inline-block;
+  width: 25px;
+  height: 25px;
+  background: url("../../../assets/global_images/process.png") no-repeat;
+  position: absolute;
+  top: -8px;
+  left: -12px;
+  background-size: contain;
+}
+.moreDetail .done {
+  z-index: 10;
+  content: "";
+  display: inline-block;
+  width: 25px;
+  height: 25px;
+  background: url("../../../assets/global_images/done.png") no-repeat;
+  position: absolute;
+  bottom: -8px;
+  left: -12px;
+  background-size: contain;
+}
+.before .icon,.after .icon {
+  z-index: 10;
+  display: inline-block;
+  width: 25px;
+  height: 25px;
+  background: url("../../../assets/global_images/done.png") no-repeat;
+  position: absolute;
+  top: -3px;
+  left: -42px;
+  background-size: contain;
+}
+.imgs-wrap {
+  position: absolute;
+  left: -5px;
+  top: -10px;
+  width: 400px;
+  height: 80px;
+  overflow-y: auto;
+}
+.text-over {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.text-over-more {
+  overflow: hidden; // 溢出隐藏
+  text-overflow: ellipsis; // 溢出用省略号显示
+  display: -webkit-box; // 作为弹性伸缩盒子模型显示。
+  -webkit-box-orient: vertical; // 设置伸缩盒子的子元素排列方式：从上到下垂直排列
+  -webkit-line-clamp: 2; // 显示的行数
+}
+/deep/.zoom {
+  display: inline-block;
+  box-sizing: border-box;
+  width: 120px;
+  height: 70px;
+  margin-right: 10px;
+  margin-top: 5px;
+  cursor: pointer;
+}
+.leftLine{
+    position: absolute;
+    top: 18px;
+    left: -19px;
+    width: 2px;
+    height: 99%;
+    border-left: 2px dashed #ccc;
+}
+.moreDetail {
+  .step-more-wrap {
+    box-sizing: border-box;
+    padding-left: 30px;
+    height: 360px;
+    overflow-y: auto;
+    .detail-wrap {
+      margin-top: 3px;
+      margin-bottom: 20px;
+      position: relative;
+      .title{
+        position: relative;
+        .process{
+          z-index: 10 !important;
+          position: absolute;
+          top: -3px;
+          left: -30px;
+          width: 25px;
+          height: 25px;
+          background: url("../../../assets/global_images/process.png") no-repeat;
+          background-size: contain;
+        }
+        .done{
+          z-index: 10 !important;
+          position: absolute;
+          top: -3px;
+          left: -30px;
+          width: 25px;
+          height: 25px;
+          background: url("../../../assets/global_images/done.png") no-repeat;
+          background-size: contain;
+        }
+      }
+      p {
+        font-size: 14px !important;
+        padding: 0;
+        margin: 0;
+        margin-top: 2px;
+        line-height: 20px;
+        width: 90%;
+          overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+      }
+      .content {
+        margin-top: 20px;
+        width: 96%;
+        height: 100px;
+        background: #f0f0f0;
+        padding: 20px 30px;
+        border-radius: 10px;
+        display: flex;
+
+        .left {
+          width: 420px;
+          p {
+            font-size: 14px !important;
+            padding: 0;
+            margin: 0;
+            margin-top: 2px;
+            line-height: 20px;
+          }
+        }
+        .right {
+          position: relative;
+          flex: 1;
+        }
+      }
+    }
+  }
+}
+
+::-webkit-scrollbar {
+  /*滚动条整体样式*/
+  width: 6px; /*高宽分别对应横竖滚动条的尺寸*/
+  height: 8px;
+}
+::-webkit-scrollbar-thumb {
+  /*滚动条里面小方块*/
+  border-radius: 5px;
+  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  background: rgba(0, 0, 0, 0.1);
+}
+::-webkit-scrollbar-track {
+  /*滚动条里面轨道*/
+  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  border-radius: 5px;
+  background: rgba(0, 0, 0, 0.1);
+}
+
+</style>
\ No newline at end of file
diff --git a/src/views/caseManage/caseCommon/process.json b/src/views/caseManage/caseCommon/process.json
new file mode 100644
index 0000000..db58784
--- /dev/null
+++ b/src/views/caseManage/caseCommon/process.json
@@ -0,0 +1,251 @@
+{
+    "state": true,
+    "msg": "",
+    "data": [
+        {
+            "id": "1E03D7C7D3C84E838D1A4C6E8DFC4240",
+            "info": {
+                "id": "1E03D7C7D3C84E838D1A4C6E8DFC4240",
+                "businessId": "aa00ac6d759540d4942de3b00990bacc",
+                "processType": "15",
+                "processInstId": "36008397",
+                "processTaskId": null,
+                "processTaskName": null,
+                "processAssigneeId": "465546017",
+                "processAssigneeName": "呼叫中心系统",
+                "processNextTaskId": "36008446",
+                "processNextTaskName": "专项系统对接待分拨",
+                "processNextAssigneeId": "465546017",
+                "processNextAssigneeName": "呼叫中心系统",
+                "processStepTitle": "新建",
+                "approveMsg": null,
+                "processStepName": "提交",
+                "regulationCompleteTime": null,
+                "createTime": "2022-09-22 09:57:03",
+                "parentTitleId": null,
+                "fileId": null,
+                "parentInstanceId": null,
+                "applyWay": null,
+                "dataLv": null,
+                "processStepExtend": null,
+                "isAuto": null,
+                "processAssigneeDeptName": "专项系统对接",
+                "processNextAssigneeDeptName": "专项系统对接"
+            },
+            "parentTitleId": null,
+            "processStepTitle": "新建",
+            "children": [
+                {
+                    "id": "1AB4B8BD0E034AE08DFF0EAE1F7750DE",
+                    "info": {
+                        "id": "1AB4B8BD0E034AE08DFF0EAE1F7750DE",
+                        "businessId": "aa00ac6d759540d4942de3b00990bacc",
+                        "processType": "15",
+                        "processInstId": "36008397",
+                        "processTaskId": "36008446",
+                        "processTaskName": "专项系统对接待分拨",
+                        "processAssigneeId": "465546017",
+                        "processAssigneeName": "呼叫中心系统",
+                        "processNextTaskId": "36008473",
+                        "processNextTaskName": "蓉江新区待分拨",
+                        "processNextAssigneeId": "465546577",
+                        "processNextAssigneeName": "刘晓梅",
+                        "processStepTitle": "上报蓉江新区",
+                        "approveMsg": null,
+                        "processStepName": null,
+                        "regulationCompleteTime": null,
+                        "createTime": "2022-09-22 09:57:03",
+                        "parentTitleId": "1E03D7C7D3C84E838D1A4C6E8DFC4240",
+                        "fileId": null,
+                        "parentInstanceId": null,
+                        "applyWay": null,
+                        "dataLv": null,
+                        "processStepExtend": null,
+                        "isAuto": null,
+                        "processAssigneeDeptName": "专项系统对接",
+                        "processNextAssigneeDeptName": "蓉江新区"
+                    },
+                    "parentTitleId": "1E03D7C7D3C84E838D1A4C6E8DFC4240",
+                    "processStepTitle": "上报蓉江新区",
+                    "children": [
+                        {
+                            "id": "7F644436F8B04DAEBEB475214F64783E",
+                            "info": {
+                                "id": "7F644436F8B04DAEBEB475214F64783E",
+                                "businessId": "aa00ac6d759540d4942de3b00990bacc",
+                                "processType": "15",
+                                "processInstId": "36008397",
+                                "processTaskId": "36008473",
+                                "processTaskName": "蓉江新区待分拨",
+                                "processAssigneeId": "465546577",
+                                "processAssigneeName": "刘晓梅",
+                                "processNextTaskId": "36010141",
+                                "processNextTaskName": "蓉江新区待分拨",
+                                "processNextAssigneeId": "465546577",
+                                "processNextAssigneeName": "刘晓梅",
+                                "processStepTitle": "立案",
+                                "approveMsg": null,
+                                "processStepName": null,
+                                "regulationCompleteTime": null,
+                                "createTime": "2022-09-22 10:07:02",
+                                "parentTitleId": "1AB4B8BD0E034AE08DFF0EAE1F7750DE",
+                                "fileId": null,
+                                "parentInstanceId": null,
+                                "applyWay": null,
+                                "dataLv": null,
+                                "processStepExtend": null,
+                                "isAuto": null,
+                                "processAssigneeDeptName": "蓉江新区",
+                                "processNextAssigneeDeptName": "蓉江新区"
+                            },
+                            "parentTitleId": "1AB4B8BD0E034AE08DFF0EAE1F7750DE",
+                            "processStepTitle": "立案",
+                            "children": [
+                                {
+                                    "id": "156D83539A10444BBDE445E132E551C1",
+                                    "info": {
+                                        "id": "156D83539A10444BBDE445E132E551C1",
+                                        "businessId": "aa00ac6d759540d4942de3b00990bacc",
+                                        "processType": "15",
+                                        "processInstId": "36008397",
+                                        "processTaskId": "36010141",
+                                        "processTaskName": "蓉江新区待分拨",
+                                        "processAssigneeId": "465546577",
+                                        "processAssigneeName": "刘晓梅",
+                                        "processNextTaskId": "36010490",
+                                        "processNextTaskName": "高校园区管理处待分拨",
+                                        "processNextAssigneeId": "465546697",
+                                        "processNextAssigneeName": "张萍",
+                                        "processStepTitle": "蓉江新区分拨",
+                                        "approveMsg": null,
+                                        "processStepName": null,
+                                        "regulationCompleteTime": null,
+                                        "createTime": "2022-09-22 10:08:11",
+                                        "parentTitleId": "7F644436F8B04DAEBEB475214F64783E",
+                                        "fileId": "371daad0c65b871f532a49ccae8d34dc",
+                                        "parentInstanceId": null,
+                                        "applyWay": "1",
+                                        "dataLv": null,
+                                        "processStepExtend": null,
+                                        "isAuto": null,
+                                        "processAssigneeDeptName": "蓉江新区",
+                                        "processNextAssigneeDeptName": "高校园区管理处"
+                                    },
+                                    "parentTitleId": "7F644436F8B04DAEBEB475214F64783E",
+                                    "processStepTitle": "蓉江新区分拨",
+                                    "children": [
+                                        {
+                                            "id": "DCEB4053DCD040FC907CA8CBDAFB9BED",
+                                            "info": {
+                                                "id": "DCEB4053DCD040FC907CA8CBDAFB9BED",
+                                                "businessId": "aa00ac6d759540d4942de3b00990bacc",
+                                                "processType": "15",
+                                                "processInstId": "36008397",
+                                                "processTaskId": "36010490",
+                                                "processTaskName": "高校园区管理处待分拨",
+                                                "processAssigneeId": "465546697",
+                                                "processAssigneeName": "张萍",
+                                                "processNextTaskId": "36021140",
+                                                "processNextTaskName": "高校园区管理处待分拨",
+                                                "processNextAssigneeId": "465546697",
+                                                "processNextAssigneeName": "张萍",
+                                                "processStepTitle": "签收",
+                                                "approveMsg": null,
+                                                "processStepName": null,
+                                                "regulationCompleteTime": null,
+                                                "createTime": "2022-09-22 11:11:10",
+                                                "parentTitleId": "156D83539A10444BBDE445E132E551C1",
+                                                "fileId": null,
+                                                "parentInstanceId": null,
+                                                "applyWay": "1",
+                                                "dataLv": null,
+                                                "processStepExtend": null,
+                                                "isAuto": null,
+                                                "processAssigneeDeptName": "高校园区管理处",
+                                                "processNextAssigneeDeptName": "高校园区管理处"
+                                            },
+                                            "parentTitleId": "156D83539A10444BBDE445E132E551C1",
+                                            "processStepTitle": "签收",
+                                            "children": [
+                                                {
+                                                    "id": "0DDDAFE1B10C444B95E5D61E8483F1D4",
+                                                    "info": {
+                                                        "id": "0DDDAFE1B10C444B95E5D61E8483F1D4",
+                                                        "businessId": "aa00ac6d759540d4942de3b00990bacc",
+                                                        "processType": "15",
+                                                        "processInstId": "36008397",
+                                                        "processTaskId": "36021140",
+                                                        "processTaskName": "高校园区管理处待分拨",
+                                                        "processAssigneeId": "465546697",
+                                                        "processAssigneeName": "张萍",
+                                                        "processNextTaskId": "36021489",
+                                                        "processNextTaskName": "蓉江新区办理结果确认",
+                                                        "processNextAssigneeId": "465546577",
+                                                        "processNextAssigneeName": "刘晓梅",
+                                                        "processStepTitle": "高校园区管理处提交结果",
+                                                        "approveMsg": "已处理",
+                                                        "processStepName": null,
+                                                        "regulationCompleteTime": null,
+                                                        "createTime": "2022-09-22 11:11:38",
+                                                        "parentTitleId": "DCEB4053DCD040FC907CA8CBDAFB9BED",
+                                                        "fileId": "ec8a05e25dae5571154f17e998653339",
+                                                        "parentInstanceId": null,
+                                                        "applyWay": null,
+                                                        "dataLv": null,
+                                                        "processStepExtend": null,
+                                                        "isAuto": null,
+                                                        "processAssigneeDeptName": "高校园区管理处",
+                                                        "processNextAssigneeDeptName": "蓉江新区"
+                                                    },
+                                                    "parentTitleId": "DCEB4053DCD040FC907CA8CBDAFB9BED",
+                                                    "processStepTitle": "高校园区管理处提交结果",
+                                                    "children": [
+                                                        {
+                                                            "id": "ED0DDD8B224747B88F051E28F1A4AF39",
+                                                            "info": {
+                                                                "id": "ED0DDD8B224747B88F051E28F1A4AF39",
+                                                                "businessId": "aa00ac6d759540d4942de3b00990bacc",
+                                                                "processType": "15",
+                                                                "processInstId": "36008397",
+                                                                "processTaskId": "36021489",
+                                                                "processTaskName": "蓉江新区办理结果确认",
+                                                                "processAssigneeId": "465546577",
+                                                                "processAssigneeName": "刘晓梅",
+                                                                "processNextTaskId": null,
+                                                                "processNextTaskName": null,
+                                                                "processNextAssigneeId": null,
+                                                                "processNextAssigneeName": null,
+                                                                "processStepTitle": "结案",
+                                                                "approveMsg": null,
+                                                                "processStepName": "结束",
+                                                                "regulationCompleteTime": null,
+                                                                "createTime": "2022-09-26 09:03:08",
+                                                                "parentTitleId": "0DDDAFE1B10C444B95E5D61E8483F1D4",
+                                                                "fileId": null,
+                                                                "parentInstanceId": null,
+                                                                "applyWay": null,
+                                                                "dataLv": null,
+                                                                "processStepExtend": null,
+                                                                "isAuto": null,
+                                                                "processAssigneeDeptName": "蓉江新区",
+                                                                "processNextAssigneeDeptName": null
+                                                            },
+                                                            "parentTitleId": "0DDDAFE1B10C444B95E5D61E8483F1D4",
+                                                            "processStepTitle": "结案",
+                                                            "children": []
+                                                        }
+                                                    ]
+                                                }
+                                            ]
+                                        }
+                                    ]
+                                }
+                            ]
+                        }
+                    ]
+                }
+            ]
+        }
+    ],
+    "code": 200
+}
\ No newline at end of file
diff --git a/src/views/caseManage/caseCommon/process2.json b/src/views/caseManage/caseCommon/process2.json
new file mode 100644
index 0000000..53506ad
--- /dev/null
+++ b/src/views/caseManage/caseCommon/process2.json
@@ -0,0 +1,23 @@
+{
+    "code": 200,
+    "msg": "操作成功",
+    "success": true,
+    "data": {
+        "eventId": "866691836176740352",
+        "appCode": "A001",
+        "desc": "好吃多",
+        "status": 1,
+        "replyDatas": [
+            {
+                "id": "21345234523",
+                "time": "2021-07-19 14:42:34",
+                "name": "张三",
+                "content": "大师傅处置完成",
+                "attachments": "http://ztuploadfile.oss-cn-beijing.aliyuncs.com/%E8%BD%A6%E8%BE%86.jpeg?Expires=1934519183&OSSAccessKeyId=LTAI4G3j5y61aAVjgUB2sWXv&Signature=Ws%2BXAnQw6BPs8r3R7atb3MjzCFY%3D",
+                "status": "11",
+                "statusDesc": "成功",
+                "businessStatus": "success"
+            }
+        ]
+    }
+}
\ No newline at end of file
diff --git a/src/views/caseManage/caseDetail.vue b/src/views/caseManage/caseDetail.vue
index 0fc16f1..6444c93 100644
--- a/src/views/caseManage/caseDetail.vue
+++ b/src/views/caseManage/caseDetail.vue
@@ -4,28 +4,47 @@
     <!-- 基础信息表单 -->
     <div>
       <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-tickets"/>事件基础信息</div></el-col>
+        <el-col :span="6"
+          ><div class="title-header">
+            <i class="el-icon-tickets" />事件基础信息
+          </div></el-col
+        >
       </el-row>
-      <case-form-process v-if="showProcess" ref="caseFormProcess" :case-form="caseDetail"/>
-      <case-form-read v-else ref="caseFormRead" :case-form="caseDetail"/>
+      <case-form-process
+        v-if="showProcess"
+        ref="caseFormProcess"
+        :case-form="caseDetail"
+      />
+      <case-form-read v-else ref="caseFormRead" :case-form="caseDetail" />
     </div>
 
-    <!-- 事件地图 -->
-    <div>
+    <!-- 事件处理流程 -->
+    <div v-if="caseType != '应急事件'">
       <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-tickets"/>事件地图</div></el-col>
+        <el-col :span="6"
+          ><div class="title-header">
+            <i class="el-icon-tickets" />事件处理流程
+          </div></el-col
+        >
       </el-row>
       <el-row>
-        <el-col :span="24">
-          <f-map ref="mapDetail" style="height: 40vh; padding: 20px 0px"/>
+        <el-col :span="6">
+          <caseImgShow :imgs="caseImgs" />
+        </el-col>
+        <el-col :span="6">
+          <caseProcessTable :list="processList" />
         </el-col>
       </el-row>
     </div>
 
     <!-- 事件流程处理 -->
-    <div v-if="showProcess&&caseDetail.id">
+    <div v-if="showProcess && caseDetail.id">
       <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-tickets"/>事件流程处理</div></el-col>
+        <el-col :span="6"
+          ><div class="title-header">
+            <i class="el-icon-tickets" />事件流程处理
+          </div></el-col
+        >
       </el-row>
       <case-process
         ref="caseProcess"
@@ -42,40 +61,94 @@
     </div>
     <!-- 事件处理记录 -->
     <div v-if="caseDetail.processId">
-      <case-record ref="caseRecord" :process-id="caseDetail.processId" :id="id"/>
+      <case-record
+        ref="caseRecord"
+        :process-id="caseDetail.processId"
+        :id="id"
+      />
+    </div>
+
+    <!-- 事件地图 -->
+    <div>
+      <el-row class="table-title">
+        <el-col :span="6"
+          ><div class="title-header">
+            <i class="el-icon-tickets" />事件地图
+          </div></el-col
+        >
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <f-map ref="mapDetail" style="height: 40vh; padding: 20px 0px" />
+        </el-col>
+      </el-row>
     </div>
   </div>
 </template>
 
 <script>
-import CaseFormRead from './caseCommon/caseFormRead'
-import CaseFormProcess from './caseCommon/caseFormProcess'
-import CaseProcess from './caseCommon/caseProcess'
-import CaseRecord from './caseCommon/caseRecord'
-import { caseDetail } from '@/api/callCase'
-import FMap from '../../components/fMap/components/fMap'
-
+import CaseFormRead from "./caseCommon/caseFormRead";
+import CaseFormProcess from "./caseCommon/caseFormProcess";
+import CaseProcess from "./caseCommon/caseProcess";
+import CaseRecord from "./caseCommon/caseRecord";
+import caseImgShow from "./caseCommon/caseImgShow";
+import caseProcessTable from "./caseCommon/caseProcessTable.vue";
+import { caseDetail, eventStepList } from "@/api/callCase";
+import FMap from "../../components/fMap/components/fMap";
+import process from "./caseCommon/process.json";
 export default {
-  name: 'CaseDetail',
-  components: { FMap, CaseFormRead, CaseProcess, CaseRecord, CaseFormProcess },
+  name: "CaseDetail",
+  components: {
+    FMap,
+    CaseFormRead,
+    CaseProcess,
+    CaseRecord,
+    CaseFormProcess,
+    caseImgShow,
+    caseProcessTable,
+  },
   data() {
     return {
-      id: '',
-      taskId: '', // 当前任务id，只有任务处理的详情中需要，会签用
+      id: "",
+      taskId: "", // 当前任务id，只有任务处理的详情中需要，会签用
       caseDetail: {},
+      caseType: "",
+      caseImgs: [
+        "https://t7.baidu.com/it/u=1742010762,3975931984&fm=193&f=GIF",
+        "https://t7.baidu.com/it/u=1302518827,2012573433&fm=193&f=GIF",
+      ], // 事件流程图片
+      processList: [], // 事件流程信息
       showProcess: false,
-      wholeLoading: false
-    }
+      wholeLoading: false,
+    };
+  },
+  created() {
+    // 获取事件分类类型
+    let caseTypeMap = {
+      2: "应急事件",
+      3: "运维事件",
+      4: "精细化管理事件",
+    };
+    let caseType = caseTypeMap[this.$route.query.caseType];
+    this.caseType = caseType;
+    //   this.id = this.$route.params.id;
+    // if (this.$route.query.taskId) {
+    //   this.taskId = this.$route.query.taskId;
+    // }
+    // if (this.$route.query.showProcess) {
+    //   this.showProcess = this.$route.query.showProcess;
+    // }
+    // this.fetchDetail();
   },
   mounted() {
-    this.id = this.$route.params.id
+    this.id = this.$route.params.id;
     if (this.$route.query.taskId) {
-      this.taskId = this.$route.query.taskId
+      this.taskId = this.$route.query.taskId;
     }
     if (this.$route.query.showProcess) {
-      this.showProcess = this.$route.query.showProcess
+      this.showProcess = this.$route.query.showProcess;
     }
-    this.fetchDetail()
+    this.fetchDetail();
   },
   methods: {
     /**
@@ -83,52 +156,132 @@
      */
     fetchDetail() {
       if (this.id) {
-        this.wholeLoading = true
-        caseDetail(this.id).then(response => {
-          this.caseDetail = response.data
-          this.wholeLoading = false
-          this.$refs.mapDetail.initMap(true, this.caseDetail)
-        })
+        this.wholeLoading = true;
+        caseDetail(this.id).then((response) => {
+          this.caseDetail = response.data;
+          // if (this.caseDetail.caseImage) {
+          //     const base_url = process.env.BASE_API + "/static/";
+          //     const image_ori = this.caseDetail.caseImage.split(";");
+          //     this.caseImgs = image_ori.map((item) => base_url + item);
+          //   } else {
+          //     this.caseImgs = [];
+          //   }
+          this.wholeLoading = false;
+          this.$refs.mapDetail.initMap(true, this.caseDetail);
+        });
+
+        // 通过类型判断传递内容
+        // id为caseId
+        if (this.caseType == "运维事件") {
+          // 获取返回的数据
+          this.$nextTick(() => {
+            this.processList = this.treeDataToCompressed([
+              ...process.data,
+            ]).reverse();
+          });
+          // let propsMap = {
+          //   processTitle: "processTaskName",
+          //   time: "createTime",
+          //   sender: "processAssigneeName",
+          //   incept: "processAssigneeName",
+          //   detail: "processTaskName",
+          //   nextId: "processNextAssigneeId",
+          // };
+
+          // this.$nextTick(async ()=>{
+          //   this.processList = await this.handlePropstoArray(
+          //   this.processList,
+          //   propsMap
+          // );
+          // })
+          return;
+          this.processList = this.processList.map((item) => {
+            return {
+              processTitle: item.processTaskName,
+              time: item.createTime,
+              sender: item.processAssigneeName,
+              incept: item.processAssigneeName,
+              detail: item.processTaskName,
+              nextId: item.processNextAssigneeId,
+            };
+          });
+          console.log(this.processList);
+          return;
+          // 获取事件流程详情
+          eventStepList({ caseId: this.id }).then((res) => {
+            console.log(res);
+
+            // 获取流程节点图片以及流程数组数据
+          });
+        } else if (this.caseType == "精细化管理事件") {
+        }
+        return;
       }
     },
+    handlePropstoArray(array, props) {
+      return new Promise((resolve, reject) => {
+        let jsonData = JSON.stringify(array);
+        for (const key in props) {
+          var reg = new RegExp(props[key], "g");
+          jsonData = jsonData.replace(reg, key);
+        }
+        resolve(JSON.parse(jsonData));
+      });
+    },
+    treeDataToCompressed(source) {
+      let target = [];
+      for (const i in source) {
+        target.push(source[i].info);
+        if (
+          Array.isArray(source[i].children) &&
+          source[i].children.length > 0
+        ) {
+          target = [
+            ...target,
+            ...this.treeDataToCompressed(source[i].children),
+          ];
+        }
+      }
+      return target;
+    },
     loading() {
-      this.wholeLoading = true
+      this.wholeLoading = true;
     },
     /**
      * 提交成功之后
      */
     submitSuccess() {
-      console.log('submitSuccess')
-      this.$message.success('提交成功')
-      this.showProcess = false
-      this.$route.query.showProcess = false
-      this.wholeLoading = false
-      this.fetchDetail()
-      this.$refs['caseRecord'].fetchProcessRecords()
+      console.log("submitSuccess");
+      this.$message.success("提交成功");
+      this.showProcess = false;
+      this.$route.query.showProcess = false;
+      this.wholeLoading = false;
+      this.fetchDetail();
+      this.$refs["caseRecord"].fetchProcessRecords();
     },
     /**
      * 提交失败之后
      */
     submitError() {
-      console.log('submitError')
-      this.wholeLoading = false
-    }
-  }
-}
+      console.log("submitError");
+      this.wholeLoading = false;
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-  .table-title{
-    background-color:rgba(243, 243, 243, 1);
-    height: 46px;
-    .title-header{
-      line-height:46px;
-      color: #606266;
-      font-size: 15px;
-      i{
-        margin-left: 5px;
-        margin-right: 5px;
-      }
+.table-title {
+  background-color: rgba(243, 243, 243, 1);
+  height: 46px;
+  .title-header {
+    line-height: 46px;
+    color: #606266;
+    font-size: 15px;
+    i {
+      margin-left: 5px;
+      margin-right: 5px;
     }
   }
+}
 </style>
diff --git a/src/views/caseManage/caseManage.vue b/src/views/caseManage/caseManage.vue
index a986eaa..2f5bfea 100644
--- a/src/views/caseManage/caseManage.vue
+++ b/src/views/caseManage/caseManage.vue
@@ -180,6 +180,7 @@
       this.$router.push({
         path: '/caseDetail/' + row.id,
         query: {
+          caseType:row.eorc,
           showProcess: false
         }
       })
diff --git a/src/views/caseManage/createCase.vue b/src/views/caseManage/createCase.vue
index de1db64..a8db838 100644
--- a/src/views/caseManage/createCase.vue
+++ b/src/views/caseManage/createCase.vue
@@ -3,72 +3,176 @@
   <div ref="caseContainer" class="case-container">
     <!--表单-->
     <div v-show="!showMap" class="form-div">
-      <el-form ref="form" :model="form" :size="inputSize" :rules="rules" label-width="80px">
+      <el-form
+        ref="form"
+        :model="form"
+        :size="inputSize"
+        :rules="rules"
+        label-width="80px"
+      >
         <div>
           <el-row :gutter="20">
             <el-col :span="8">
               <el-form-item label="事件编号" prop="caseId">
-                <el-input v-model="form.caseId" disabled/>
+                <el-input v-model="form.caseId" disabled />
               </el-form-item>
             </el-col>
             <el-col :span="8">
               <el-form-item label="录音编号" prop="sound">
-                <el-input v-model="form.sound" disabled/>
+                <el-input v-model="form.sound" disabled />
               </el-form-item>
             </el-col>
             <el-col :span="8">
               <el-form-item label="来电时间" prop="callTime" disabled>
-                <el-input v-model="form.callTime"/>
+                <el-input v-model="form.callTime" />
               </el-form-item>
             </el-col>
           </el-row>
           <el-row :gutter="20">
             <el-col :span="8">
               <el-form-item label="联系电话" prop="reporterPhone">
-                <el-input v-model="form.reporterPhone" disabled/>
+                <el-input v-model="form.reporterPhone" disabled />
               </el-form-item>
             </el-col>
             <el-col :span="8">
               <el-form-item label="联系人" prop="reporterName">
-                <el-input v-model="form.reporterName"/>
+                <el-input v-model="form.reporterName" />
               </el-form-item>
             </el-col>
-            <el-button v-if="allowAdd" :disabled="form.reporterName==''||form.reporterPhone==''" type="primary" size="small" @click="addToCustomerList">添加到通讯录</el-button>
-          </el-row>
-          <el-row>
-            <el-form-item label="事件类型" prop="type" required>
-              <el-col :span="6">
-                <el-select v-model="form.type.eorc" placeholder="请选择" style="width: 100%">
-                  <el-option v-for="item of eorcList" :key="'eorc_'+item.value" :label="item.name" :value="item.value"/>
-                </el-select>
-              </el-col>
-              <!--<el-col :span="6">-->
-                <!--<el-select v-model="form.type.caseTypeCode" placeholder="请选择" style="width: 100%">-->
-                  <!--<el-option v-for="item of caseTypeList" :key="'case_'+item.id" :label="item.typeName" :value="item.typeCode"/>-->
-                <!--</el-select>-->
-              <!--</el-col>-->
-              <!--<el-col :span="6">-->
-              <!--<el-select v-model="form.type.caseDetailTypeCode" placeholder="请选择" style="width: 100%" clearable>-->
-              <!--<el-option v-for="item of caseDetailTypeList" :key="'casedetail_'+item.id" :label="item.typeDetailName" :value="item.typeDetailCode"/>-->
-              <!--</el-select>-->
-              <!--</el-col>-->
-            </el-form-item>
+            <el-button
+              v-if="allowAdd"
+              :disabled="form.reporterName == '' || form.reporterPhone == ''"
+              type="primary"
+              size="small"
+              @click="addToCustomerList"
+              >添加到通讯录</el-button
+            >
           </el-row>
           <el-row :gutter="20">
+                <el-col :span="8">
+              <el-form-item label="事件分类" prop="type">
+                <el-select
+                  v-model="form.type.eorc"
+                  placeholder="请选择"
+                  style="width: 100%"
+                  @change="changeEorc"
+                >
+                  <el-option
+                    v-for="item of eorcList"
+                    :key="'eorc_' + item.value"
+                    :label="item.name"
+                    :value="item.value"
+                  />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="事件类型" prop="typeCode">
+                <select-tree
+                  v-model="form.typeCode"
+                  :options="typeSelectList"
+                  :props="typeProps"
+                  expandAll
+                />
+              </el-form-item>
+            </el-col>
+          </el-row>
+            
+          <!-- <el-row>
+            <el-form-item label="事件分类" prop="type" required>
+              <el-col :span="6"> -->
+          <!-- <el-select v-model="form.classify" placeholder="请选择" style="width: 100%">
+                  <el-option v-for="item of classifyList" :key="'classify_'+item.value" :label="item.name" :value="item.value"/>
+                </el-select> -->
+          <!-- <el-select
+                  v-model="form.type.eorc"
+                  placeholder="请选择"
+                  style="width: 100%"
+                >
+                  <el-option
+                    v-for="item of eorcList"
+                    :key="'eorc_' + item.value"
+                    :label="item.name"
+                    :value="item.value"
+                  />
+                </el-select>
+              </el-col> -->
+          <!-- <el-col :span="6">
+            <el-form-item label="事件类型" prop="type" required>
+                <el-select v-model="form.type.eorc" filterable  placeholder="请选择" style="width: 100%">
+                  <el-option v-for="item of eorcList" :key="'eorc_'+item.value" :label="item.name" :value="item.value"/>
+                </el-select>
+            </el-form-item>
+              </el-col> -->
+          <!-- 案卷类别二级 -->
+          <!-- <el-col :span="6">
+                <el-select
+                  v-model="form.type.caseTypeCode"
+                  placeholder="请选择"
+                  style="width: 100%"
+                  filterable
+                >
+                  <el-option
+                    v-for="item of caseTypeList"
+                    :key="'case_' + item.id"
+                    :label="item.typeName"
+                    :value="item.typeCode"
+                  />
+                </el-select>
+              </el-col> -->
+          <!-- 案卷类别三级 -->
+          <!-- <el-col :span="6">
+                <el-select
+                  v-model="form.type.caseDetailTypeCode"
+                  placeholder="请选择"
+                  style="width: 100%"
+                  filterable
+                  clearable
+                >
+                  <el-option
+                    v-for="item of caseDetailTypeList"
+                    :key="'casedetail_' + item.id"
+                    :label="item.typeDetailName"
+                    :value="item.typeDetailCode"
+                  />
+                </el-select>
+              </el-col> -->
+          <!-- </el-form-item> -->
+          <!-- </el-row> -->
+          <el-row :gutter="20">
+      
             <el-col :span="8">
               <el-form-item label="事件来源" prop="source">
-                <el-select v-model="form.source" placeholder="请选择" style="width: 100%">
-                  <el-option v-for="item of caseSourceList" :key="'source_'+item.value" :label="item.name" :value="item.value"/>
+                <el-select
+                  v-model="form.source"
+                  placeholder="请选择"
+                  style="width: 100%"
+                >
+                  <el-option
+                    v-for="item of caseSourceList"
+                    :key="'source_' + item.value"
+                    :label="item.name"
+                    :value="item.value"
+                  />
                 </el-select>
               </el-form-item>
             </el-col>
-            <el-col :span="8">
+            <!-- <el-col :span="8">
               <el-form-item label="紧急程度" prop="caseLevel">
-                <el-select v-model="form.caseLevel" placeholder="请选择" style="width: 100%">
-                  <el-option v-for="item of caseLevelList" :key="'caselevel_'+item.value" :label="item.name" :value="item.value"/>
+                <el-select
+                  v-model="form.caseLevel"
+                  placeholder="请选择"
+                  style="width: 100%"
+                >
+                  <el-option
+                    v-for="item of caseLevelList"
+                    :key="'caselevel_' + item.value"
+                    :label="item.name"
+                    :value="item.value"
+                  />
                 </el-select>
               </el-form-item>
-            </el-col>
+            </el-col> -->
             <el-col :span="8">
               <el-form-item label="办理期限" prop="limitedTime">
                 <el-date-picker
@@ -76,21 +180,42 @@
                   type="datetime"
                   value-format="yyyy-MM-dd HH:mm:ss"
                   placeholder="请选择时间"
-                  style="width: 100%"/>
+                  style="width: 100%"
+                />
               </el-form-item>
             </el-col>
           </el-row>
           <el-row>
             <el-form-item label="事件地址" prop="address" required>
               <el-col :span="5">
-                <el-select v-model="form.address.areaCode" placeholder="选择所在区" value="" style="width: 100%">
+                <el-select
+                  v-model="form.address.areaCode"
+                  placeholder="选择所在区"
+                  value=""
+                  style="width: 152px"
+                >
                   <!--<el-option key="99" label="蓉江新区" value="99"/>-->
-                  <el-option v-for="item in areaList" :key="item.id" :label="item.name" :value="item.id"/>
+                  <el-option
+                    v-for="item in areaList"
+                    :key="item.id"
+                    :label="item.name"
+                    :value="item.id"
+                  />
                 </el-select>
               </el-col>
               <el-col :span="5">
-                <el-select v-model="form.address.streetCode" placeholder="选择所在街道" value="" style="width: 100%">
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.name" :value="item.id"/>
+                <el-select
+                  v-model="form.address.streetCode"
+                  placeholder="选择所在街道"
+                  value=""
+                  style="width: 152px"
+                >
+                  <el-option
+                    v-for="item in streetList"
+                    :key="item.id"
+                    :label="item.name"
+                    :value="item.id"
+                  />
                 </el-select>
               </el-col>
               <!--<el-col :span="5">-->
@@ -99,27 +224,54 @@
               <!--</el-select>-->
               <!--</el-col>-->
               <el-col :span="5">
-                <el-input v-model="form.address.fieldintro" placeholder="详细地址"/>
+                <el-input
+                  v-model="form.address.fieldintro"
+                  placeholder="详细地址"
+                  style="width: 152px"
+                />
               </el-col>
-              <el-button type="primary" size="small" style="margin-left: 10px" @click="showMapDiv">地图选点</el-button>
-              <span v-show="form.lng!='0'" style="font-size:9px;">({{ form.lng }},{{ form.lat }})</span>
+              <el-button
+                type="primary"
+                size="small"
+                style="margin-left: 10px"
+                @click="showMapDiv"
+                >地图选点</el-button
+              >
+              <span v-show="form.lng != '0'" style="font-size: 9px"
+                >({{ form.lng }},{{ form.lat }})</span
+              >
             </el-form-item>
           </el-row>
           <el-row :gutter="20">
             <el-col :span="12">
               <el-form-item label="事件标题" prop="title">
-                <el-input v-model="form.title" maxlength="100"/>
+                <el-input v-model="form.title" maxlength="100" />
               </el-form-item>
             </el-col>
             <el-col :span="12">
               <div class="checkbox">
-                <el-checkbox v-model="form.isTypical" true-label="1" false-label="0">典型案例</el-checkbox>
+                <el-checkbox
+                  v-model="form.isTypical"
+                  true-label="1"
+                  false-label="0"
+                  >典型案例</el-checkbox
+                >
               </div>
               <div class="checkbox">
-                <el-checkbox v-model="form.isImportant" true-label="1" false-label="0">要情</el-checkbox>
+                <el-checkbox
+                  v-model="form.isImportant"
+                  true-label="1"
+                  false-label="0"
+                  >要情</el-checkbox
+                >
               </div>
               <div class="checkbox">
-                <el-checkbox v-model="form.isReturnVisit" true-label="1" false-label="0">需要回访</el-checkbox>
+                <el-checkbox
+                  v-model="form.isReturnVisit"
+                  true-label="1"
+                  false-label="0"
+                  >需要回访</el-checkbox
+                >
               </div>
             </el-col>
           </el-row>
@@ -128,10 +280,11 @@
               <el-form-item label="事件内容" prop="description">
                 <el-input
                   v-model="form.description"
-                  :autosize="{ minRows: 2, maxRows: 4}"
+                  :autosize="{ minRows: 2, maxRows: 4 }"
                   type="textarea"
                   maxlength="255"
-                  placeholder="请输入内容"/>
+                  placeholder="请输入内容"
+                />
               </el-form-item>
             </el-col>
           </el-row>
@@ -139,7 +292,17 @@
             <el-col>
               <el-form-item label="处理方式" prop="processWay">
                 <el-radio-group v-model="form.processWay">
-                  <el-radio v-for="item in processWayList" :disabled="form.caseLevel&&form.caseLevel=='2'&&item.nextState!=6" :key="'process_'+item.id" :label="item.nextState">{{ item.nextOperation }}</el-radio>
+                  <el-radio
+                    v-for="item in processWayList"
+                    :disabled="
+                      form.caseLevel &&
+                      form.caseLevel == '2' &&
+                      item.nextState != 6
+                    "
+                    :key="'process_' + item.id"
+                    :label="item.nextState"
+                    >{{ item.nextOperation }}</el-radio
+                  >
                 </el-radio-group>
               </el-form-item>
             </el-col>
@@ -161,7 +324,13 @@
           <el-row :gutter="20" type="flex" justify="center">
             <el-col :span="24">
               <div style="text-align: center">
-                <el-button :size="inputSize" :loading="submitLoading" type="primary" @click="submit">提交</el-button>
+                <el-button
+                  :size="inputSize"
+                  :loading="submitLoading"
+                  type="primary"
+                  @click="submit"
+                  >提交</el-button
+                >
               </div>
             </el-col>
           </el-row>
@@ -170,105 +339,180 @@
     </div>
     <!-- 知识库检索-->
     <div v-show="!showMap" class="knowledge-div">
-      <knowledge-search/>
+      <knowledge-search />
     </div>
     <!-- 地图显示 -->
     <div v-show="showMap" id="map" :style="{ height: mapHeight }">
-      <el-row :gutter="20" type="flex" style="margin-top: -30px; margin-bottom: 10px;">
+      <el-row
+        :gutter="20"
+        type="flex"
+        style="margin-top: -30px; margin-bottom: 10px"
+      >
         <el-col :span="6">
-          <el-input v-model="keyword" placeholder="兴趣点筛选" size="small"/>
+          <el-input v-model="keyword" placeholder="兴趣点筛选" size="small" />
         </el-col>
         <el-col :span="14">
-          <el-button size="small" type="primary" @click="queryPoi">查询</el-button>
-          <el-button size="small" type="primary" style="margin-left: 15px;" @click="confirmPos">确定</el-button>
+          <el-button size="small" type="primary" @click="queryPoi"
+            >查询</el-button
+          >
+          <el-button
+            size="small"
+            type="primary"
+            style="margin-left: 15px"
+            @click="confirmPos"
+            >确定</el-button
+          >
           <span>说明：双击添加位置, </span>
-          <span>当前坐标：{{ currentPosition.lng }},{{ currentPosition.lat }}</span>
+          <span
+            >当前坐标：{{ currentPosition.lng }},{{ currentPosition.lat }}</span
+          >
         </el-col>
         <el-col :span="4" style="text-align: right">
-          <el-button size="small" type="info" @click="clearMap">清除地图</el-button>
+          <el-button size="small" type="info" @click="clearMap"
+            >清除地图</el-button
+          >
           <el-button size="small" @click="backToForm">返回</el-button>
         </el-col>
       </el-row>
-      <f-map ref="mapComp" type="vector" @ready="mapReady"/>
+      <f-map ref="mapComp" type="vector" @ready="mapReady" />
     </div>
   </div>
 </template>
 
 <script>
-import KnowledgeSearch from './components/knowledgeSearch'
-import { addCustomer } from '@/api/customer'
-import { getToday } from '@/utils/dateutils'
-import { getEorc, getCaseSource, getCaseLevel } from '@/api/allDict'
-import { getCaseType, getCaseDetailType, addCase } from '@/api/callCase'
-import { getNextNodeList } from '@/api/process'
-import { getAreaList } from '@/api/system/area'
-import { getCustomerList } from '@/api/customer'
-import { matchReverse } from '@/api/map'
-import FMap from '@/components/fMap/components/fMap'
-
+import KnowledgeSearch from "./components/knowledgeSearch";
+import { addCustomer } from "@/api/customer";
+import { getToday } from "@/utils/dateutils";
+import { getEorc, getCaseSource, getCaseLevel } from "@/api/allDict";
+import { getCaseType, getCaseDetailType, addCase } from "@/api/callCase";
+import { getNextNodeList } from "@/api/process";
+import { getAreaList } from "@/api/system/area";
+import { getCustomerList } from "@/api/customer";
+import { matchReverse } from "@/api/map";
+import FMap from "@/components/fMap/components/fMap";
+import SelectTree from "@/components/SelectTree/singleSelect";
+import { toTreeList } from "@/utils/structure";
 export default {
-  name: 'CreateCase',
-  components: { KnowledgeSearch, FMap },
+  name: "CreateCase",
+  components: { KnowledgeSearch, FMap, SelectTree },
   data() {
-    const validateAddress = function(rule, value, callback) {
-      console.log(value)
+    const validateAddress = function (rule, value, callback) {
+      console.log(value);
       // if (value.areaCode === '' || value.streetCode === '' || value.communityCode === '') {
-      if (value.areaCode === '' || value.streetCode === '' || value.fieldintro.trim() === '') {
-        callback(new Error('地址需填写完整'))
+      if (
+        value.areaCode === "" ||
+        value.streetCode === "" ||
+        value.fieldintro.trim() === ""
+      ) {
+        callback(new Error("地址需填写完整"));
       } else {
-        callback()
+        callback();
       }
-    }
-    const validateType = function(rule, value, callback) {
-      console.log(value)
-      if (value.eorc === '' || value.caseTypeCode === '' || value.caseDetailTypeCode === '') {
-        callback(new Error('请选择事件类型'))
+    };
+    const validateType = function (rule, value, callback) {
+      console.log(value);
+      if (
+        value.eorc === "" ||
+        value.caseTypeCode === "" ||
+        value.caseDetailTypeCode === ""
+      ) {
+        callback(new Error("请选择事件类型"));
       } else {
-        callback()
+        callback();
       }
-    }
+    };
     return {
+      // props: {
+      //   lazy: true,
+      //   lazyLoad(node, resolve) {
+      //     let { level, value } = node;
+      //     if (level == 1) {
+      //       getCaseType(value).then((response) => {
+      //         resolve(response.data.map((item) => {
+      //           return {
+      //             value: item.typeCode,
+      //             label: item.typeName,
+      //             leaf: false,
+      //           };
+      //         }))
+      //       });
+      //     } else if (level == 2) {
+      //       getCaseDetailType(value).then((response) => {
+      //         resolve(response.data.map((item) => {
+      //           return {
+      //             value: item.typeDetailCode,
+      //             label: item.typeDetailName,
+      //             leaf: true,
+      //           };
+      //         }))
+      //       });
+      //     }
+      //   },
+      // },
+      typeProps: {
+        parent: "pid",
+        value: "id",
+        label: "name",
+        children: "children",
+      },
+      typeSelectList: [],
       form: {
-        caseId: '', // 案卷编号，年月日时分秒毫秒+坐席号
-        sound: '', // 来电录音编号
-        callTime: '', // 来电时间
-        reporterName: '', // 事件联系人
-        reporterPhone: '', // 时间联系人电话
+        typeCode:"", // 二三级value
+        caseId: "", // 案卷编号，年月日时分秒毫秒+坐席号
+        sound: "", // 来电录音编号
+        callTime: "", // 来电时间
+        reporterName: "", // 事件联系人
+        reporterPhone: "", // 时间联系人电话
+        // classify: "", // 事件类别
         type: {
-          eorc: '', // 案卷类别
-          caseTypeCode: '911', // 案卷大类编码
-          caseDetailTypeCode: '9111000' // 案卷小类编码
+          eorc: "", // 案卷类别
+          caseTypeCode: "", // 案卷大类编码
+          caseDetailTypeCode: "", // 案卷小类编码
         }, // 案卷类别
-        source: '3', // 来源
+        source: "3", // 来源
         address: {
-          areaCode: '360791', // 区域ID
-          streetCode: '', // 街道ID
-          communityCode: '', // 社区ID
-          gridId: '', // 网格ID
-          fieldintro: '' // 事件地址
+          areaCode: "360791", // 区域ID
+          streetCode: "", // 街道ID
+          communityCode: "", // 社区ID
+          gridId: "", // 网格ID
+          fieldintro: "", // 事件地址
         },
-        caseLevel: '', // 案卷紧急程度
-        isTypical: '0', // 是否典型案例
-        isImportant: '0', // 是否要情
-        isReturnVisit: '1', // 是否需要回访
-        title: '', // 事件标题
-        description: '', // 事件内容
-        limitedTime: '', // 事件办理期限
-        processWay: '', // 处理方式
-        processDept: '', // 处理单位
-        processUser: '', // 处理人
-        lng: '', // 事件经度
-        lat: '' // 事件纬度
+        caseLevel: "", // 案卷紧急程度
+        isTypical: "0", // 是否典型案例
+        isImportant: "0", // 是否要情
+        isReturnVisit: "1", // 是否需要回访
+        title: "", // 事件标题
+        description: "", // 事件内容
+        limitedTime: "", // 事件办理期限
+        processWay: "", // 处理方式
+        processDept: "", // 处理单位
+        processUser: "", // 处理人
+        lng: "", // 事件经度
+        lat: "", // 事件纬度
       },
       currentPosition: {
-        lng: '0',
-        lat: '0'
+        lng: "0",
+        lat: "0",
       },
       allowAdd: true, // 允许新增联系人
       addLoading: false, // 添加允许等待
       submitLoading: false,
       reportersList: [], // 联系人选择列表
       eorcList: [], // 案卷类别
+      classifyList: [
+        {
+          name: "应急事件",
+          value: 1,
+        },
+        {
+          name: "运维事件",
+          value: 3,
+        },
+        {
+          name: "精细化平台事件",
+          value: 4,
+        },
+      ], //事件类别
       caseTypeList: [], // 案卷类别二级
       caseDetailTypeList: [], // 案卷类别三级
       areaList: [], // 区域列表
@@ -279,89 +523,194 @@
       processWayList: [], // 是否列表
       caseSourceList: [],
       userList: [], // 处理人列表
-      inputSize: 'small', // 按钮样式
+      inputSize: "small", // 按钮样式
       fmap: null, // 地图
       showMap: false, // 是否显示地图
-      mapHeight: '0px',
-      keyword: '',
+      mapHeight: "0px",
+      keyword: "",
       rules: {
-        caseId: [{ required: true, message: '事件编号不能为空', trigger: ['blur'] }],
-        sound: [{ required: true, message: '来电录音编号不能为空', trigger: ['blur'] }],
-        callTime: [{ required: true, message: '来电时间不能为空', trigger: ['blur'] }],
-        reporterName: [{ required: true, message: '联系人姓名不能为空', trigger: ['blur'] }],
-        reporterPhone: [{ required: true, message: '联系电话不能为空', trigger: ['blur'] }],
-        areaCode: [{ required: true, message: '事件辖区必选', trigger: ['blur'] }],
-        source: [{ required: true, message: '事件来源必选', trigger: ['blur', 'change'] }],
-        caseLevel: [{ required: true, message: '紧急程度必选', trigger: ['blur', 'change'] }],
-        type: [{ required: true, message: '事件类型必选', trigger: ['blur'], validator: validateType }],
-        caseDetailTypeCode: [{ required: true, message: '事件类型必选', trigger: ['blur'] }],
-        description: [{ required: true, message: '事件内容不能为空', trigger: ['blur'] }],
-        title: [{ required: true, message: '事件标题不能为空', trigger: ['blur', 'change'] }],
-        address: [{ required: true, message: '地址需填写完整', trigger: ['blur'], validator: validateAddress }],
-        processWay: [{ required: true, message: '处理方式必选', trigger: ['blur', 'change'] }]
-      } // 表单验证
-    }
+        caseId: [
+          { required: true, message: "事件编号不能为空", trigger: ["blur"] },
+        ],
+        sound: [
+          {
+            required: true,
+            message: "来电录音编号不能为空",
+            trigger: ["blur"],
+          },
+        ],
+        callTime: [
+          { required: true, message: "来电时间不能为空", trigger: ["blur"] },
+        ],
+        reporterName: [
+          { required: true, message: "联系人姓名不能为空", trigger: ["blur"] },
+        ],
+        reporterPhone: [
+          { required: true, message: "联系电话不能为空", trigger: ["blur"] },
+        ],
+        areaCode: [
+          { required: true, message: "事件辖区必选", trigger: ["blur"] },
+        ],
+        source: [
+          {
+            required: true,
+            message: "事件来源必选",
+            trigger: ["blur", "change"],
+          },
+        ],
+        caseLevel: [
+          {
+            required: true,
+            message: "紧急程度必选",
+            trigger: ["blur", "change"],
+          },
+        ],
+        // classify: [
+        //   { required: true, message: "事件分类必选", trigger: ["blur"] },
+        // ],
+        type: [
+          {
+            required: true,
+            message: "事件分类必选",
+            trigger: ["blur"],
+            validator: validateType,
+          },
+        ],
+        typeCode:[
+           {
+            required: true,
+            message: "事件类型必选",
+            trigger: ["change"],
+          },
+        ],
+        caseDetailTypeCode: [
+          { required: true, message: "事件分类必选", trigger: ["blur"] },
+        ],
+        description: [
+          { required: true, message: "事件内容不能为空", trigger: ["blur"] },
+        ],
+        title: [
+          {
+            required: true,
+            message: "事件标题不能为空",
+            trigger: ["blur", "change"],
+          },
+        ],
+        address: [
+          {
+            required: true,
+            message: "地址需填写完整",
+            trigger: ["blur"],
+            validator: validateAddress,
+          },
+        ],
+        processWay: [
+          {
+            required: true,
+            message: "处理方式必选",
+            trigger: ["blur", "change"],
+          },
+        ],
+      }, // 表单验证
+    };
   },
   watch: {
-    'form.type.eorc': function(val) {
-      // if (val === '') {
-      //   this.form.type.caseTypeCode = ''
-      //   this.form.type.caseDetailTypeCode = ''
-      // } else {
-      //   this.form.type.caseTypeCode = ''
-      //   this.form.type.caseDetailTypeCode = ''
-      //   this.fetchCaseTypeList()
-      // }
-      // 资讯类，默认地址和坐标
-      if(val=='2'){
-        this.form.address= {
-          areaCode: '360791', // 区域ID
-          streetCode: '360791103', // 街道ID
-          communityCode: '', // 社区ID
-          gridId: '', // 网格ID
-          fieldintro: '516双创产业园运行指挥调度中心' // 事件地址
+    "form.typeCode":function(val){
+      if(val == ""){
+        this.form.type.caseTypeCode = "";
+        this.form.type.caseDetailTypeCode = "";
+      } else {
+        if(val.length <= 3){
+          this.form.type.caseTypeCode = val;
+          this.typeSelectList.map(item =>{
+            if(item.value == val){
+               this.form.type.caseDetailTypeCode = item.children[0].value;
+            }
+          })
+        } else {
+          this.form.type.caseDetailTypeCode = val;
+          this.form.type.caseTypeCode = val.slice(0,3)
         }
-        this.form.lng = 114.87176164
-        this.form.lat = 25.77615476
       }
     },
-    // 'form.type.caseTypeCode': function(val) {
-    //   if (val === '') {
-    //     this.form.type.caseDetailTypeCode = ''
-    //   } else {
-    //     this.form.type.caseDetailTypeCode = ''
-    //     this.fetchCaseDetailTypeList()
-    //   }
-    // },
-    'form.address.areaCode': function(val) {
-      if (val === '') {
-        this.form.address.streetCode = ''
-        this.form.address.communityCode = ''
+    "form.type.eorc": function (val) {
+      if (val === "") {
+        this.form.type.caseTypeCode = "";
+        this.form.type.caseDetailTypeCode = "";
       } else {
-        this.fetchStreetList()
+        this.form.typeCode = ""
+        this.form.type.caseTypeCode = "";
+        this.form.type.caseDetailTypeCode = "";
+      }
+      // else {
+      //   this.form.type.caseTypeCode = "";
+      //   this.form.type.caseDetailTypeCode = "";
+      //   this.fetchCaseTypeList();
+      // }
+      if (val == "2") {
+        this.form.caseLevel = "2"; // 默认设置为紧急事件
+      } else {
+        this.form.caseLevel = "1"; // 普通事件
+      }
+      // 资讯类，默认地址和坐标
+      if (val == "2") {
+        this.form.address = {
+          areaCode: "360791", // 区域ID
+          streetCode: "360791103", // 街道ID
+          communityCode: "", // 社区ID
+          gridId: "", // 网格ID
+          fieldintro: "516双创产业园运行指挥调度中心", // 事件地址
+        };
+        this.form.lng = 114.87176164;
+        this.form.lat = 25.77615476;
       }
     },
-    'form.address.streetCode': function(val) {
-      if (val === '') {
-        this.form.address.communityCode = ''
+    "form.type.caseTypeCode": function (val) {
+      if (val === "") {
+        this.form.type.caseDetailTypeCode = "";
       } else {
-        this.fetchCommunityList()
+        this.form.type.caseDetailTypeCode = "";
+        this.fetchCaseDetailTypeList();
       }
-    }
+    },
+    "form.address.areaCode": function (val) {
+      if (val === "") {
+        this.form.address.streetCode = "";
+        this.form.address.communityCode = "";
+      } else {
+        this.fetchStreetList();
+      }
+    },
+    "form.address.streetCode": function (val) {
+      if (val === "") {
+        this.form.address.communityCode = "";
+      } else {
+        this.fetchCommunityList();
+      }
+    },
   },
   created() {
-    this.fetchCaseSourceList()
-    this.fetchCaseLevelList()
-    this.fetchEorcList()
-    this.fetchAreaList()
-    this.fetchStreetList()
-    this.fetchProcessWayList()
+    // 获取大类
+    this.fetchEorcList();
+    this.fetchCaseSourceList();
+    // 事件紧急程度
+    // this.fetchCaseLevelList();
+    this.fetchAreaList();
+    this.fetchStreetList();
+    this.fetchProcessWayList();
   },
   methods: {
+    // 选中下拉框内容
+    handleSelectChange(node) {
+      this.form.type.eorc = node[0];
+      this.form.type.caseTypeCode = node[1];
+      this.form.type.caseDetailTypeCode = node[2];
+    },
     // 提交
     submit() {
-      this.submitLoading = true
-      this.$refs['form'].validate((valid) => {
+      console.log(this.form.caseLevel);
+      this.submitLoading = true;
+      this.$refs["form"].validate((valid) => {
         if (valid && this.twiceValidate()) {
           // 初步校验通过
           const form = {
@@ -386,173 +735,253 @@
             title: this.form.title, // 事件标题
             description: this.form.description, // 事件内容
             limitedTime: this.form.limitedTime, // 事件办理期限
-            processWay: '' + this.form.processWay, // 处理方式
+            processWay: "" + this.form.processWay, // 处理方式
             processDept: this.form.processDept, // 处理单位
             processUser: this.form.processUser, // 处理人
             lng: this.form.lng, // 事件经度
-            lat: this.form.lat // 事件纬度
-          }
-          addCase(form).then(response => {
-            if (response.code === 200) {
-              this.$message.success('新建成功')
-              this.$emit('cancel')
-              this.submitLoading = false
-            }
-          }).catch(_ => {
-            this.$emit('cancel')
-            this.submitLoading = false
-          })
+            lat: this.form.lat, // 事件纬度
+          };
+          addCase(form)
+            .then((response) => {
+              if (response.code === 200) {
+                this.$message.success("新建成功");
+                this.$emit("cancel");
+                this.submitLoading = false;
+              }
+            })
+            .catch((_) => {
+              this.$emit("cancel");
+              this.submitLoading = false;
+            });
         } else {
-          this.submitLoading = false
+          this.submitLoading = false;
         }
-      })
+      });
     },
     // 二次校验
     twiceValidate() {
-      debugger
-      const judge = this.form.processWay === 6 && (this.form.lng === '0' || this.form.lat === '0')
+      // debugger;
+      const judge =
+        this.form.processWay === 6 &&
+        (this.form.lng === "0" || this.form.lat === "0");
       if (judge) {
-        this.$message.warning('请在地图上选点')
-        return false
+        this.$message.warning("请在地图上选点");
+        return false;
       } else {
-        return true
+        return true;
       }
     },
     // 初始化数据
     initData(data) {
       this.form = {
-        caseId: '', // 案卷编号，年月日时分秒毫秒+坐席号
+        caseId: "", // 案卷编号，年月日时分秒毫秒+坐席号
         sound: data.callid, // 来电录音编号
         callTime: data.dialStartStamp, // 来电时间
-        reporterName: '', // 事件联系人
+        reporterName: "", // 事件联系人
         reporterPhone: data.number, // 时间联系人电话
         type: {
-          eorc: '', // 案卷类别
-          caseTypeCode: '911', // 案卷大类编码
-          caseDetailTypeCode: '9111000' // 案卷小类编码
+          eorc: "", // 案卷类别
+          caseTypeCode: "", // 案卷大类编码
+          caseDetailTypeCode: "", // 案卷小类编码
         }, // 案卷类别
-        source: '3', // 来源
+        source: "3", // 来源
         address: {
-          areaCode: '360791', // 区域ID
-          streetCode: '', // 街道ID
-          communityCode: '', // 社区ID
-          gridId: '', // 网格ID
-          fieldintro: '' // 事件地址
+          areaCode: "360791", // 区域ID
+          streetCode: "", // 街道ID
+          communityCode: "", // 社区ID
+          gridId: "", // 网格ID
+          fieldintro: "", // 事件地址
         },
-        lng: '0',
-        lat: '0',
-        caseLevel: '', // 案卷紧急程度
-        isTypical: '0', // 是否典型案例
-        isImportant: '0', // 是否要情
-        title: '', // 事件标题
-        description: '', // 事件内容
-        limitedTime: '', // 事件办理期限
-        processWay: '', // 处理方式
-        processDept: '', // 处理单位
-        processUser: '' // 处理人
-      }
+        lng: "0",
+        lat: "0",
+        caseLevel: "", // 案卷紧急程度
+        isTypical: "0", // 是否典型案例
+        isImportant: "0", // 是否要情
+        title: "", // 事件标题
+        description: "", // 事件内容
+        limitedTime: "", // 事件办理期限
+        processWay: "", // 处理方式
+        processDept: "", // 处理单位
+        processUser: "", // 处理人
+      };
       // 清除校验
       this.$nextTick(() => {
-        this.$refs['form'].clearValidate()
-      })
-      this.generateCaseId()
+        this.$refs["form"].clearValidate();
+      });
+      this.generateCaseId();
       // 根据电话去查找人
       if (this.form.reporterPhone) {
-        this.fetchReporter(this.form.reporterPhone)
+        this.fetchReporter(this.form.reporterPhone);
       }
       // this.$refs.mapComp.initMap()
     },
     // 将客户添加到通讯录
     addToCustomerList() {
-      this.addLoading = true
+      this.addLoading = true;
       const customerForm = {
         name: this.form.reporterName, // 姓名
-        tel1: this.form.reporterPhone // 联系方式1
-      }
+        tel1: this.form.reporterPhone, // 联系方式1
+      };
       // 如果信息完整, 添加到通讯录
       if (this.allowAdd && customerForm.tel1 && customerForm.name) {
-        this.$confirm(
-          '确定要将该客户添加到客户列表吗？',
-          '确认操作',
-          {
-            confirmButtonText: '确定',
-            cancelButtonText: '取消',
-            type: 'warning'
-          }
-        ).then(() => {
-          addCustomer(customerForm).then(response => {
-            if (response.code === 200) {
-              this.$message.success('添加成功')
-              this.allowAdd = false
-            }
-          }).catch(_ => { // 异常情况，loading置为false
-            this.addLoading = false
-          })
-        })
+        this.$confirm("确定要将该客户添加到客户列表吗？", "确认操作", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning",
+        }).then(() => {
+          addCustomer(customerForm)
+            .then((response) => {
+              if (response.code === 200) {
+                this.$message.success("添加成功");
+                this.allowAdd = false;
+              }
+            })
+            .catch((_) => {
+              // 异常情况，loading置为false
+              this.addLoading = false;
+            });
+        });
       } else {
-        this.$message.warning('请确保联系人姓名和电话完整性')
+        this.$message.warning("请确保联系人姓名和电话完整性");
       }
     },
     // 根据电话去找人
     fetchReporter(phone) {
       const params = {
-        tel: phone
-      }
-      getCustomerList(params).then(response => {
+        tel: phone,
+      };
+      getCustomerList(params).then((response) => {
         if (response.code === 200 && response.data) {
           if (response.data.total === 1) {
-            this.form.reporterName = response.data.rows[0].name
-            this.allowAdd = false
+            this.form.reporterName = response.data.rows[0].name;
+            this.allowAdd = false;
           } else {
-            this.allowAdd = true
+            this.allowAdd = true;
           }
         }
-      })
+      });
     },
     // 获取联系人列表
     fetchReportersList() {
       const params = {
         limit: 10000,
-        offset: 1
-      }
-      getCustomerList(params).then(response => {
+        offset: 1,
+      };
+      getCustomerList(params).then((response) => {
         if (response.code === 200) {
-          this.reportersList = response.data.rows
+          this.reportersList = response.data.rows;
         }
-      })
+      });
     },
     // 案卷来源列表
     fetchCaseSourceList() {
-      getCaseSource().then(response => {
+      getCaseSource().then((response) => {
         if (response.code === 200) {
-          this.caseSourceList = response.data
+          this.caseSourceList = response.data;
         }
-      })
+      });
     },
     // 案卷等级列表
     fetchCaseLevelList() {
-      getCaseLevel().then(response => {
+      getCaseLevel().then((response) => {
         if (response.code === 200) {
-          this.caseLevelList = response.data
+          this.caseLevelList = response.data;
         }
-      })
+      });
     },
     // 大类列表
     fetchEorcList() {
-      getEorc().then(response => {
+      getEorc().then(async (response) => {
         if (response.code === 200) {
-          this.eorcList = response.data
+          this.eorcList = response.data;
+          // this.typeSelectList = response.data.map((item) => {
+          //   item.pid = "-1";
+          //   item.level = 1;
+          //   return item;
+          // });
+          // let data2 = await this.getLevelData2(this.typeSelectList);
+          // let data3 = await this.getLevelData3(data2);
+          // setTimeout(() => {
+          //   this.typeSelectList = toTreeList([...this.typeSelectList, ...data2,...data3], "-1");
+          //   console.log(this.typeSelectList)
+          // }, 2000);
         }
+      });
+    },
+    // 大类选中改变
+    async changeEorc(node){
+      let data2 = await this.getLevelData2(node);
+      let codeList = data2.map(item =>{
+        return item.id
       })
+      let data3 = await this.getLevelData3(codeList);
+      setTimeout(()=>{
+        this.typeSelectList = toTreeList([...data2,...data3], "-1");
+      },500)
+    },
+    getLevelData2(node) {
+      return new Promise((resolve) => {
+          getCaseType(node).then((res) => {
+            if (res.code === 200) {
+              let data  = res.data.map(child =>{
+                return {
+                  id:child.typeCode,
+                  pid:"-1",
+                  level:1,
+                  name:child.typeName,
+                  value:child.typeCode
+                }
+              })
+              resolve(data);
+            }
+          });
+      });
+    },
+    getLevelData3(codeList) {
+      return new Promise((resolve) => {
+        getCaseDetailType().then((res) => {
+          if (res.code === 200) {
+               res.data = res.data.map(child =>{
+                return {
+                  pid:child.typeCode,
+                  id:child.typeDetailCode,
+                  level:2,
+                  name:child.typeDetailName,
+                  value:child.typeDetailCode
+                }
+              })
+              res.data = res.data.filter(item =>{
+                if(codeList.includes(item.pid)){
+                  return item;
+                }
+              })
+            resolve(res.data);
+          }
+        });
+      });
     },
     // 二级类型列表
     fetchCaseTypeList() {
-      getCaseType(this.form.type.eorc).then(response => {
-        this.caseTypeList = response.data
-      })
+      getCaseType(this.form.type.eorc).then((response) => {
+        this.caseTypeList = response.data;
+        // let index =  this.eorcList.findIndex((item, index, arr)=> (this.form.type.eorc == item.value))
+        // let level2 = Object.assign(this.caseTypeList).map(item =>{
+        //     return {
+        //         pid:this.eorcList[index].id,
+        //         level:2,
+        //         id:item.id,
+        //         name:item.targetName,
+        //         value:item.typeCode
+        //         }
+        //   })
+        //   this.typeSelectList.push(...level2)
+        //   console.log(this.typeSelectList)
+      });
     },
     // 三级类型列表
     fetchCaseDetailTypeList() {
+      // :label="item.typeDetailName"
+      //             :value="item.typeDetailCode"
       // 遍历caseTypeList根据code获取大类的ID，进行级联查询
       // let typeId = 0
       // this.caseTypeList.forEach(item => {
@@ -565,154 +994,175 @@
       //     this.caseDetailTypeList = response.data
       //   })
       // }
-      getCaseDetailType(this.form.type.caseTypeCode).then(response => {
-        this.caseDetailTypeList = response.data
-        this.form.type.caseDetailTypeCode = this.caseDetailTypeList[0].typeDetailCode
-      })
+      getCaseDetailType(this.form.type.caseTypeCode).then((response) => {
+        this.caseDetailTypeList = response.data;
+        this.form.type.caseDetailTypeCode =
+          this.caseDetailTypeList[0].typeDetailCode;
+        //    let index =  this.caseTypeList.findIndex((item, index, arr)=> (this.form.type.typeCode == item.value))
+        // let level3 = Object.assign(this.caseDetailTypeList).map(item =>{
+        //     return {
+        //         pid:this.caseTypeList[index].id,
+        //         level:3,
+        //         id:item.id,
+        //         name:item.typeDetailName,
+        //         value:item.typeDetailCode
+        //         }
+        //   })
+        //   this.typeSelectList.push(...level3)
+        //   console.log(this.typeSelectList)
+      });
     },
     // 区列表
     fetchAreaList() {
-      getAreaList('0').then(response => {
-        this.areaList = response.data
-      })
+      getAreaList("0").then((response) => {
+        this.areaList = response.data;
+      });
     },
     // 街道列表
     fetchStreetList() {
-      getAreaList(this.form.address.areaCode).then(response => {
-        this.streetList = response.data
-      })
+      getAreaList(this.form.address.areaCode).then((response) => {
+        this.streetList = response.data;
+      });
     },
     // 社区列表
     fetchCommunityList() {
-      getAreaList(this.form.address.streetCode).then(response => {
-        this.communityList = response.data
-      })
+      getAreaList(this.form.address.streetCode).then((response) => {
+        this.communityList = response.data;
+      });
     },
     // 获取处理方式列表
     fetchProcessWayList() {
-      getNextNodeList('0').then(response => {
-        this.processWayList = response.data
-      })
+      getNextNodeList("0").then((response) => {
+        this.processWayList = response.data;
+      });
     },
     fetchGridList() {},
     // 自动生成案卷编号，时间+坐席号
     generateCaseId() {
-      const id = getToday('yyMMddhhmmss')
-      const seat = this.$store.getters.seat
-      this.form.caseId = id + seat
+      const id = getToday("yyMMddhhmmss");
+      const seat = this.$store.getters.seat;
+      this.form.caseId = id + seat;
     },
     // 地图准备好后的操作
     mapReady({ fmap }) {
-      this.fmap = fmap
+      this.fmap = fmap;
       // 禁用双击放大
-      this.fmap.deactivateDbClickZoom()
-      const that = this
+      this.fmap.deactivateDbClickZoom();
+      const that = this;
       // 添加双击事件,在地图上添加点
-      this.fmap.on('fmap.map.dbclick', function(event) {
-        that.fmap.clearLayer('case')
+      this.fmap.on("fmap.map.dbclick", function (event) {
+        that.fmap.clearLayer("case");
         const marker = {
           lon: event.coordinate[0],
           lat: event.coordinate[1],
-          layer: 'case'
-        }
-        that.currentPosition.lng = marker.lon.toFixed(8) + ''
-        that.currentPosition.lat = marker.lat.toFixed(8) + ''
-        that.fmap.addFeatures([marker], { xField: 'lon', yField: 'lat', layer: 'case' })
+          layer: "case",
+        };
+        that.currentPosition.lng = marker.lon.toFixed(8) + "";
+        that.currentPosition.lat = marker.lat.toFixed(8) + "";
+        that.fmap.addFeatures([marker], {
+          xField: "lon",
+          yField: "lat",
+          layer: "case",
+        });
         // that.fmap.navigate2Center([marker.lon, marker.lat])
-      })
+      });
     },
     // 显示地图
     showMapDiv() {
-      this.showMap = true
-      this.$refs.mapComp.initMap()
+      this.showMap = true;
+      this.$refs.mapComp.initMap();
       // 如果已经有坐标了，显示当前点
-      if(this.form.lng && this.form.lat){
+      if (this.form.lng && this.form.lat) {
         const marker = {
           lon: this.form.lng,
           lat: this.form.lat,
-          layer: 'case'
-        }
-        this.currentPosition.lng = this.form.lng
-        this.currentPosition.lat = this.form.lat
-        this.fmap.addFeatures([marker], { xField: 'lon', yField: 'lat', layer: 'case' })
+          layer: "case",
+        };
+        this.currentPosition.lng = this.form.lng;
+        this.currentPosition.lat = this.form.lat;
+        this.fmap.addFeatures([marker], {
+          xField: "lon",
+          yField: "lat",
+          layer: "case",
+        });
       }
-      this.mapHeight = this.$refs.caseContainer.offsetHeight + 'px'
+      this.mapHeight = this.$refs.caseContainer.offsetHeight + "px";
     },
     // 查询兴趣点
     queryPoi() {
-      if (this.keyword === '') {
-        this.$message.warning('请输入关键字')
+      if (this.keyword === "") {
+        this.$message.warning("请输入关键字");
       } else {
-        this.$refs.mapComp.queryPoi(this.keyword)
+        this.$refs.mapComp.queryPoi(this.keyword);
       }
     },
     // 确定, 保存坐标并返回
     confirmPos() {
-      this.form.lng = this.currentPosition.lng
-      this.form.lat = this.currentPosition.lat
-      if(this.currentPosition.lng!='0'){
+      this.form.lng = this.currentPosition.lng;
+      this.form.lat = this.currentPosition.lat;
+      if (this.currentPosition.lng != "0") {
         // 进行逆地址解析
-        matchReverse(this.currentPosition.lng,this.currentPosition.lat).then(res=>{
-          if(res.data.length>0){
-            this.form.address= {
-              areaCode: res.data[0].politicalCode.substring(0,6), // 区域ID
-              streetCode: res.data[0].politicalCode.substring(0,9), // 街道ID
-              communityCode: res.data[0].politicalCode, // 社区ID
-              gridId: '', // 网格ID
-              fieldintro: res.data[0].standardAddressName.substring(10) // 事件地址
+        matchReverse(this.currentPosition.lng, this.currentPosition.lat)
+          .then((res) => {
+            if (res.data.length > 0) {
+              this.form.address = {
+                areaCode: res.data[0].politicalCode.substring(0, 6), // 区域ID
+                streetCode: res.data[0].politicalCode.substring(0, 9), // 街道ID
+                communityCode: res.data[0].politicalCode, // 社区ID
+                gridId: "", // 网格ID
+                fieldintro: res.data[0].standardAddressName.substring(10), // 事件地址
+              };
             }
-          }
-        }).catch(()=>{
-          console.log('逆地址解析失败')
-        })
-
+          })
+          .catch(() => {
+            console.log("逆地址解析失败");
+          });
       }
-      this.showMap = false
-      this.clearMap()
-      console.log(this.form)
+      this.showMap = false;
+      this.clearMap();
+      console.log(this.form);
     },
     // 清除地图
     clearMap() {
-      this.currentPosition.lng = '0'
-      this.currentPosition.lat = '0'
-      this.$refs.mapComp.clearMap()
+      this.currentPosition.lng = "0";
+      this.currentPosition.lat = "0";
+      this.$refs.mapComp.clearMap();
     },
     // 返回到事件详情
     backToForm() {
       if (this.showMap) {
-        this.showMap = false
-        this.clearMap()
+        this.showMap = false;
+        this.clearMap();
       }
-    }
-  }
-}
+    },
+  },
+};
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-  $rightwidth: 300px;
-  .case-container{
-    width: 100%;
-    display: flex;
-    display: -webkit-flex; /* Safari */
-    justify-content:space-between;
+$rightwidth: 300px;
+.case-container {
+  width: 100%;
+  display: flex;
+  display: -webkit-flex; /* Safari */
+  justify-content: space-between;
+}
+.form-div {
+  width: calc(100%- 300px);
+  /*height: 50vh;*/
+  .checkbox {
+    display: inline-block;
+    line-height: 32px; // 设置行高
+    margin-right: 20px;
   }
-  .form-div{
-    width: calc( 100%- 300px);
-    /*height: 50vh;*/
-    .checkbox{
-      display: inline-block;
-      line-height: 32px; // 设置行高
-      margin-right: 20px;
-    }
-    padding-right:10px;
-  }
-  .knowledge-div{
-    width: $rightwidth;
-  }
+  padding-right: 10px;
+}
+.knowledge-div {
+  width: $rightwidth;
+}
 
-  #map {
-    width: 100%;
-    height: 50vh;
-  }
-
+#map {
+  width: 100%;
+  height: 50vh;
+}
 </style>
diff --git a/src/views/caseManage/waitForCreate.vue b/src/views/caseManage/waitForCreate.vue
index 6252460..519c57a 100644
--- a/src/views/caseManage/waitForCreate.vue
+++ b/src/views/caseManage/waitForCreate.vue
@@ -22,6 +22,9 @@
           start-placeholder="来电开始时间"
           end-placeholder="来电结束时间"/>
       </search-item>
+        <search-item>
+        <el-input v-model.trim="listQuery.phoneNumber" :size="size" placeholder="分机号码" clearable/>
+      </search-item>
     </search-area>
     <normal-table :data="list" :head="tableOption.head" :size="size" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" :options="tableOption.options" :tools-option="tableOption.toolsOption" @change="changePage">
       <template slot="columns">
@@ -40,7 +43,7 @@
       :close-on-click-modal="false"
       :close-on-press-escape="false"
       title="新建事件"
-      width="1200px"
+      width="1250px"
       custom-class="addcase-dialog"
       top="5vh"
       append-to-body
@@ -81,6 +84,7 @@
       isReceiver: isOnlyReceiver(),
       listQuery: {
         callerNumber: '', // 主叫号码
+        phoneNumber: '', // 分机号码
         agentUser: '', // 受理人
         status: '', // 受理状态
         startTime: '', // 创建开始时间
@@ -108,6 +112,11 @@
           width: 100
         },
         {
+          text: '分机号码', // 新增分机号码
+          value: 'phonenumber',
+          align: 'center',
+        },
+        {
           text: '来电时间',
           value: 'startStamp',
           align: 'center',
@@ -141,7 +150,7 @@
           refresh: false // 是否需要刷新按钮
         }
       }, // 表格属性
-      showAddCase: false,
+      showAddCase: true,
       sound: {
         url: '',
         controlList: 'noDownload noSpeed onlyOnePlaying'