From c9117f02167ba64b44cd2b6e2123a1f6f06ccb48 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E9=B9=8F=E9=A3=9E?= <lipengfei@outlook.com>
Date: Tue, 10 Mar 2020 09:46:39 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BB=8F=E5=85=B8=E6=A1=88=E4=BE=8B=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD=E5=A2=9E=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/modules/case/issue-detail.vue       | 368 ++++++++++++
 src/views/modules/case/item-detail.vue        | 436 ++++++++++++++
 src/views/modules/case/topic-detail.vue       | 211 +++++++
 .../case/typicalcase-add-or-update.vue        | 551 ++++++++++++++++++
 .../modules/case/typicalcase-connect-list.vue | 263 +++++++++
 src/views/modules/case/typicalcase-detail.vue | 120 ++++
 src/views/modules/case/typicalcase-list.vue   | 162 +++++
 src/views/modules/case/typicalcase.vue        |  31 +
 8 files changed, 2142 insertions(+)
 create mode 100644 src/views/modules/case/issue-detail.vue
 create mode 100644 src/views/modules/case/item-detail.vue
 create mode 100644 src/views/modules/case/topic-detail.vue
 create mode 100644 src/views/modules/case/typicalcase-add-or-update.vue
 create mode 100644 src/views/modules/case/typicalcase-connect-list.vue
 create mode 100644 src/views/modules/case/typicalcase-detail.vue
 create mode 100644 src/views/modules/case/typicalcase-list.vue
 create mode 100644 src/views/modules/case/typicalcase.vue

diff --git a/src/views/modules/case/issue-detail.vue b/src/views/modules/case/issue-detail.vue
new file mode 100644
index 00000000..97ef5404
--- /dev/null
+++ b/src/views/modules/case/issue-detail.vue
@@ -0,0 +1,368 @@
+<template>
+    <el-dialog :visible.sync="visible" :title="$t('verifyLabel')" :append-to-body="true"
+               :modal-append-to-body="false"
+               :close-on-click-modal="false"
+               :close-on-press-escape="false"
+               width="80%">
+        <el-form :model="dataForm" ref="dataForm" style="width: 100%; height: 100%;">
+            <div class="project-handle">
+                <div class="project-detail">
+                    <div class="project-detail-tip">议题详情</div>
+                    <el-form label-position="right" label-width="120px">
+                        <el-form-item label="议题内容:">
+                            <div>{{dataForm.issueContent}}</div>
+                            <el-image v-for="url in dataForm.images"
+                                      style="width: 100px; height: 100px; margin-right: 10px"
+                                      :key="url"
+                                      :src="url"
+                                      :preview-src-list="previewImgList"
+                                      @click="clickImg(url)">
+                            </el-image>
+                        </el-form-item>
+                        <el-form-item label="所属网格:" prop="ownGrid">
+                            <div>{{dataForm.allDeptNames}}</div>
+                        </el-form-item>
+                        <el-form-item v-if="dataForm.groupName && dataForm.groupName.length > 0" label="议题来源:" prop="ownGrid">
+                            <div>{{dataForm.groupName}}</div>
+                        </el-form-item>
+                        <el-form-item v-if="!dataForm.groupName || dataForm.groupName.length == 0" label="议题来源:" prop="ownGrid">
+                            <div>党群议事</div>
+                        </el-form-item>
+                        <el-form-item label="上报时间:">
+                            <div>{{dataForm.distributeTime}}</div>
+                        </el-form-item>
+                        <el-form-item label="上报人:">
+                            <div>{{dataForm.nickName}}</div>
+                        </el-form-item>
+                        <el-form-item label="电话:" prop="mobile">
+                            <div>{{dataForm.mobile}}</div>
+                        </el-form-item>
+                        <el-form-item label="所属类别:" prop="categoryName">
+                            <div>{{dataForm.categoryName}}</div>
+                        </el-form-item>
+                        <el-form-item label="议题态度:">
+                            <span>表达态度 {{dataForm.approveNum + dataForm.opposeNum + dataForm.commentNum}}</span>&nbsp;&nbsp;
+                            <span>评论 {{dataForm.commentNum}}</span>&nbsp;&nbsp;
+                            <span>支持 {{dataForm.approveNum}}</span>&nbsp;&nbsp;
+                            <span>不支持 {{dataForm.opposeNum}}</span>
+                        </el-form-item>
+                    </el-form>
+                    <div class="container">
+                        <div class="location"><span style="font-weight: bold;color: #606266">上报位置:</span> {{dataForm.address}}</div>
+                        <div id="map"></div>
+                    </div>
+                </div>
+                <div class="project-progress">
+                    <div class="project-progress-tip">处理进展</div>
+                    <el-timeline>
+                        <el-timeline-item
+                                v-for="(item, index) in timeLineList"
+                                :key="item.id"
+                                :color="item.type === 'init' ? 'red' : item.type === 'project' ? '#009688' : '#ffa546'">
+                            <div :id="`content${index}`" style="line-height:25px; ">
+                                <div
+                                        :style="{ marginBottom: '10px', width: '35px', height: '20px', fontSize: '12px', borderRadius: '4px', background: item.type === 'project' ? '#009688': item.type === 'issue' || item.type === 'issue-project' ? '#ffa546' : '', color: '#fff', textAlign: 'center', lineHeight: '20px'}"
+                                        v-if="item.type !== 'init'">
+                                    {{item.type === 'project' ? '项目': item.type === 'issue' || item.type === 'issue-project' ? '议题' : ''}}
+                                </div>
+                                <div><span style="font-weight: bold; color: rgb(96, 98, 102);">[{{item | formatState}}]</span> {{item.createdTime}}</div>
+                                <div v-if="item.state === 3">
+                                    <div><span style="font-weight: bold; color: rgb(96, 98, 102);">来源社群：</span>{{item.groupName}}</div>
+                                    <div><span style="font-weight: bold; color: rgb(96, 98, 102);">处理人：</span>{{item.handlerDept}}</div>
+                                    <div><span style="font-weight: bold; color: rgb(96, 98, 102);">处理人电话：</span>{{item.mobile}}</div>
+                                </div>
+                                <div v-if="item.state !== 3">
+                                    <div><span style="font-weight: bold; color: rgb(96, 98, 102);">处理部门：</span>{{item.handlerDept}}</div>
+                                </div>
+                                <div v-if="item.itemDeptDTOS && item.itemDeptDTOS.length > 0" style="width: 100%; display: flex;">
+                                    <div><span style="font-weight: bold; color: rgb(96, 98, 102);">吹哨部门：</span> </div>
+                                    <div>
+                              <span v-for="(csDept, index1) in item.itemDeptDTOS" :key="index1">
+                              {{ csDept.deptName }}<br/>
+                            </span>
+                                    </div>
+                                </div>
+                                <div><span style="font-weight: bold; color: rgb(96, 98, 102);">处理意见：</span>  {{item.advice}}</div>
+                                <div style="display: flex;">
+                                    <el-image v-for="url in item.images"
+                                              style="width: 60px; height: 60px; object-fit: cover; margin-right: 8px; border-radius: 2px;"
+                                              :key="url"
+                                              :src="url"
+                                              :preview-src-list="previewImgList"
+                                              alt="处理图片"
+                                              @click="clickImg(url)">
+                                    </el-image>
+                                </div>
+                            </div>
+
+                        </el-timeline-item>
+                    </el-timeline>
+                </div>
+                <div style="width: 100%; text-align:center; float:left;">
+                    <el-button size="medium" style="width: 95px" type="primary" @click="back">返回</el-button>
+                </div>
+            </div>
+        </el-form>
+    </el-dialog>
+</template>
+
+<script>
+import BMap from 'BMap'
+import 'element-ui/lib/theme-chalk/timeline.css'
+import 'element-ui/lib/theme-chalk/timeline-item.css'
+import 'element-ui/lib/theme-chalk/image.css'
+export default {
+    data () {
+        return {
+            map: '',
+            visible: false,
+            dataForm: {
+                id: '',
+                nickName: '',
+                distributeTime: '',
+                issueContent: '',
+                handleProgressResultDTOS: [],
+                issueProgressResultDTOS: [],
+                images: []
+            },
+            previewImgList: [],
+            order: '',
+            orderField: '',
+            pageIndex: 1,
+            limitVal: 10,
+            total: 0,
+            commentsDTOs: [],
+            timeLineList: []
+        }
+    },
+    filters: {
+        formatState (item) {
+            if (item.type === 'project') {
+                if (item.state === 0 && item.itemDeptDTOS && item.itemDeptDTOS.length > 0) {
+                    return '吹哨'
+                } else if (item.state === 0 && item.itemDeptDTOS && item.itemDeptDTOS.length === 0) {
+                    return '回应'
+                } else if (item.state === 5) {
+                    return '关闭'
+                } else if (item.state === 10) {
+                    return '结案'
+                } else if (item.state === 15) {
+                    return '上报网格化平台'
+                } else if (item.state === 20) {
+                    return '网格化平台-受理'
+                } else if (item.state === 25) {
+                    return '网格化平台-立案'
+                } else if (item.state === 30) {
+                    return '网格化平台-派遣'
+                } else if (item.state === 35) {
+                    return '网格化平台-中间再派'
+                } else if (item.state === 40) {
+                    return '网格化平台-接单'
+                } else if (item.state === 45) {
+                    return '网格化平台-处理'
+                } else if (item.state === 50) {
+                    return '网格化平台-中间督办'
+                } else if (item.state === 55) {
+                    return '网格化平台-催办'
+                } else if (item.state === 60) {
+                    return '网格化平台-结案'
+                }
+            } else if (item.type === 'issue' || item.type === 'init') {
+                if (item.state === 0) {
+                    return '审核通过'
+                } else if (item.state === 1) {
+                    return '回应'
+                } else if (item.state === 2) {
+                    return '关闭'
+                } else if (item.state === 3) {
+                    return '转议题'
+                }
+            } else if (item.type === 'issue-project') {
+                return '转项目'
+            }
+        }
+    },
+    methods: {
+        back () {
+            this.visible = false
+        },
+        initBmap (latitude, longitude) {
+            this.map = new BMap.Map('map')
+            const point = new BMap.Point(longitude, latitude)
+            var marker = new BMap.Marker(point)
+            this.map.addOverlay(marker)
+            this.map.centerAndZoom(point, 13)
+            this.map.enableScrollWheelZoom(true)
+        },
+        init (id) {
+            this.visible = true
+            this.dataForm.id = id
+            this.$nextTick(() => {
+                this.$refs['dataForm'].resetFields()
+                if (this.dataForm.id) {
+                    this.getInfo()
+                }
+            })
+        },
+        clickImg (url) {
+            this.previewImgList = []
+            this.previewImgList.push(url)
+        },
+        getInfo () {
+            this.$http.get(`/events/issue/issueContentDetail/${this.dataForm.id}`).then(({ data: res }) => {
+                if (res.code !== 0) {
+                    return this.$message.error(res.msg)
+                }
+                this.dataForm = {
+                    ...this.dataForm,
+                    ...res.data
+                }
+                this.dataForm.handleProgressResultDTOS.forEach((item, index, arr) => {
+                    if (index === arr.length - 1) {
+                        item.type = 'issue-project'
+                    } else {
+                        item.type = 'project'
+                    }
+                })
+                this.dataForm.issueProgressResultDTOS.forEach((item, index, arr) => {
+                    if (index === arr.length - 1) {
+                        item.type = 'init'
+                    } else {
+                        item.type = 'issue'
+                    }
+                })
+                this.timeLineList = [...this.dataForm.handleProgressResultDTOS, ...this.dataForm.issueProgressResultDTOS]
+                this.$nextTick(() => {
+                    this.timeLineList.forEach((item, index) => {
+                        const oDiv = document.getElementById(`content${index}`)
+                        const oBorder = oDiv.parentNode.parentNode.parentNode.firstChild
+                        if (item.type === 'issue' || item.type === 'issue-project') {
+                            oBorder.style.borderLeft = '1px solid #ffa546'
+                        } else if (item.type === 'project') {
+                            oBorder.style.borderLeft = '1px solid #009688'
+                        }
+                    })
+                })
+                this.initBmap(this.dataForm.issueLatitude, this.dataForm.issueLongitude)
+            }).catch(() => {})
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+    .project-handle {
+        .el-timeline {
+            padding-left: 9px;
+            font-size: 13px;
+        }
+    }
+    .el-form-item__label {
+        font-weight: bold;
+    }
+</style>
+
+<style lang="scss" scoped>
+    .project-handle {
+        width: 100%;
+        height: calc(100vh - 120px);
+        background: #ffffff;
+        box-sizing: border-box;
+        padding: 10px;
+        .project-detail {
+            width: 79%;
+            height: 80%;
+            border: 2px solid #ccc;
+            box-sizing: border-box;
+            padding: 10px;
+            padding-top: 20px;
+            float:left;
+            margin-bottom: 1%;
+            position:relative;
+            .project-detail-tip {
+                position: absolute;
+                top: 0;
+                left:0;
+                width: 80px;
+                height: 30px;
+                line-height: 30px;
+                color: #ffffff;
+                background: #4ac38b;
+                text-align:center;
+            }
+            .el-form {
+                width: 58%;
+                height: 100%;
+                float:left;
+                overflow-y:auto;
+                &::-webkit-scrollbar {
+                    width: 5px;
+                    height: 1px;
+                }
+                &::-webkit-scrollbar-thumb {
+                    border-radius: 5px;
+                    background: #fff;
+                }
+                &::-webkit-scrollbar-track {
+                    border-radius: 10px;
+                    background: #fff;
+                }
+            }
+            .container {
+                width: 40%;
+                height: 100%;
+                float: right;
+                .location {
+                    height: 30px;
+                    line-height: 30px;
+                }
+                #map {
+                    width: 100%;
+                    height: calc(100% - 30px);
+                }
+            }
+        }
+        .project-progress {
+            width: 20%;
+            height: 80%;
+            float: right;
+            border: 2px solid #ccc;
+            box-sizing: border-box;
+            margin-left: 1%;
+            padding-top: 20px;
+            overflow-y:auto;
+            position: relative;
+            padding-top: 40px;
+            .project-progress-tip {
+                position: absolute;
+                top: 0;
+                left:0;
+                width: 80px;
+                height: 30px;
+                line-height: 30px;
+                color: #ffffff;
+                background: #0098ff;
+                text-align:center;
+            }
+            &::-webkit-scrollbar {
+                width: 5px;
+                height: 1px;
+            }
+            &::-webkit-scrollbar-thumb {
+                border-radius: 5px;
+                background: #aaa;
+            }
+            &::-webkit-scrollbar-track {
+                border-radius: 10px;
+                background: #ccc;
+            }
+        }
+        .handle-operation {
+            width: 79%;
+            height: 49%;
+            box-sizing: border-box;
+            border: 2px solid #ccc;
+            float:left;
+        }
+    }
+</style>
diff --git a/src/views/modules/case/item-detail.vue b/src/views/modules/case/item-detail.vue
new file mode 100644
index 00000000..b97c5d89
--- /dev/null
+++ b/src/views/modules/case/item-detail.vue
@@ -0,0 +1,436 @@
+<template>
+  <el-dialog :visible.sync="visible" :title="$t('verifyLabel')" :append-to-body="true"
+             :modal-append-to-body="false"
+             :close-on-click-modal="false"
+             :close-on-press-escape="false"
+             width="80%">
+    <el-form :model="dataForm" ref="dataForm" style="width: 100%; height: 100%;">
+      <div class="project-handle">
+        <div class="project-detail">
+          <div class="project-detail-tip">议题详情</div>
+          <el-form label-position="right" label-width="120px">
+            <el-form-item label="议题内容:"
+                          prop="eventContent">
+              <div>{{dataForm.itemContent}}</div>
+              <el-image v-for="url in dataForm.images"
+                        style="width: 100px; height: 100px; margin-right: 10px"
+                        :key="url"
+                        :src="url"
+                        :preview-src-list="previewImgList"
+                        @click="clickImg(url)">
+              </el-image>
+            </el-form-item>
+            <el-form-item v-if="dataForm.groupName && dataForm.groupName.length > 0"
+                          label="项目来源:"
+                          prop="ownGrid">
+              <div>{{dataForm.groupName}}</div>
+            </el-form-item>
+            <el-form-item label="上报时间:"
+                          prop="distributeTime">
+              <div>{{dataForm.distributeTime}}</div>
+            </el-form-item>
+            <el-form-item label="上报人:"
+                          prop="nickName">
+              <div>{{dataForm.nickName}}</div>
+            </el-form-item>
+            <el-form-item label="电话:"
+                          prop="mobile">
+              <div>{{dataForm.mobile}}</div>
+            </el-form-item>
+            <el-form-item label="所属类别:"
+                          prop="categoryName">
+              <div>{{dataForm.categoryName}}</div>
+            </el-form-item>
+            <el-form-item label="项目态度:">
+              <span>表达态度 {{dataForm.approveNum + dataForm.opposeNum + dataForm.commentNum}}</span>&nbsp;&nbsp;
+              <span>评论 {{dataForm.commentNum}}</span>&nbsp;&nbsp;
+              <span>支持 {{dataForm.approveNum}}</span>&nbsp;&nbsp;
+              <span>不支持 {{dataForm.opposeNum}}</span>
+            </el-form-item>
+          </el-form>
+          <div class="container">
+            <div class="location"><span style="font-weight: bold;color: #606266">上报位置:</span> {{dataForm.issueAddress}}</div>
+            <div id="map"></div>
+          </div>
+        </div>
+        <div class="project-progress">
+          <div class="project-progress-tip">处理进展</div>
+          <el-timeline>
+            <el-timeline-item v-for="(item, index) in timeLineList"
+                              :key="item.id"
+                              :color="item.type === 'init' ? 'red' : item.type === 'project' ? '#009688' : '#ffa546'">
+              <div :id="`content${index}`"
+                   style="line-height:25px; ">
+                <div :style="{ marginBottom: '10px', width: '35px', height: '20px', fontSize: '12px', borderRadius: '4px', background: item.type === 'project' ? '#009688': item.type === 'issue' || item.type === 'issue-project' ? '#ffa546' : '', color: '#fff', textAlign: 'center', lineHeight: '20px'}"
+                     v-if="item.type !== 'init'">
+                  {{item.type === 'project' ? '项目': item.type === 'issue' || item.type === 'issue-project' ? '议题' : ''}}
+                </div>
+                <div><span style="font-weight: bold; color: rgb(96, 98, 102);">[{{item | formatState}}]</span> {{item.createdTime}}</div>
+                <div v-if="item.state === 3">
+                  <div><span style="font-weight: bold; color: rgb(96, 98, 102);">来源社群：</span>{{item.groupName}}</div>
+                  <div><span style="font-weight: bold; color: rgb(96, 98, 102);">处理人：</span>{{item.handlerDept}}</div>
+                  <div><span style="font-weight: bold; color: rgb(96, 98, 102);">处理人电话：</span>{{item.mobile}}</div>
+                </div>
+                <div v-if="item.state !== 3">
+                  <div><span style="font-weight: bold; color: rgb(96, 98, 102);">处理部门：</span>{{item.handlerDept}}</div>
+                </div>
+                <div v-if="item.itemDeptDTOS && item.itemDeptDTOS.length > 0"
+                     style="width: 100%; display: flex;">
+                  <div><span style="font-weight: bold; color: rgb(96, 98, 102);">被吹哨部门：</span> </div>
+                  <div>
+                  <span v-for="(csDept, index1) in item.itemDeptDTOS"
+                        :key="index1">
+                    {{ csDept.deptName }}<br />
+                  </span>
+                  </div>
+                </div>
+                <div><span style="font-weight: bold; color: rgb(96, 98, 102);">处理意见：</span> {{item.advice}}</div>
+                <div style="display: flex;">
+                  <el-image v-for="url in item.images"
+                            style="width: 60px; height: 60px; object-fit: cover; margin-right: 8px; border-radius: 2px;"
+                            :key="url"
+                            :src="url"
+                            :preview-src-list="previewImgList"
+                            alt="处理图片"
+                            @click="clickImg(url)">
+                  </el-image>
+                </div>
+              </div>
+            </el-timeline-item>
+          </el-timeline>
+        </div>
+        <div style="width: 100%; text-align:center; float:left;">
+          <el-button size="medium" style="width: 95px" type="primary" @click="back">返回</el-button>
+        </div>
+      </div>
+    </el-form>
+  </el-dialog>
+</template>
+
+<script>
+import BMap from 'BMap'
+import 'element-ui/lib/theme-chalk/timeline.css'
+import 'element-ui/lib/theme-chalk/timeline-item.css'
+import 'element-ui/lib/theme-chalk/image.css'
+import debounce from 'lodash/debounce'
+export default {
+  data () {
+    return {
+      map: '',
+      visible: false,
+      dataForm: {
+        id: '',
+        nickName: '',
+        distributeTime: '',
+        itemContent: '',
+        images: [],
+        issueAddress: '',
+        handleProgressResultDTOS: [],
+        issueProgressResultDTOS: [],
+        handleResultDTOS: [],
+        deptResultDTOS: [],
+        evaluateDeptDTOS: [],
+        handleAdvice: '',
+        outHandleAdvice: '',
+        handleCategory: '',
+        issueLatitude: '',
+        issueLongitude: ''
+      },
+      isAble: false,
+      previewImgList: [],
+      deptResult: [],
+      commentsDTOs: [],
+      pageIndex: 0,
+      limitVal: 10,
+      total: null,
+      postDataForm: {
+        id: '',
+        handleAdvice: '',
+        outHandleAdvice: '',
+        handleCategory: '',
+        deptResultDTOS: [],
+        evaluateDeptDTOS: []
+      },
+      deptResultDTOSVisible: false,
+      evaluateDeptDTOSVisible: false,
+      timeLineList: []
+    }
+  },
+  filters: {
+    formatState (item) {
+      if (item.type === 'project') {
+        if (item.state === 0 && item.itemDeptDTOS && item.itemDeptDTOS.length > 0) {
+          return '吹哨'
+        } else if (item.state === 0 && item.itemDeptDTOS && item.itemDeptDTOS.length === 0) {
+          return '回应'
+        } else if (item.state === 5) {
+          return '关闭'
+        } else if (item.state === 10) {
+          return '结案'
+        } else if (item.state === 15) {
+          return '上报网格化平台'
+        } else if (item.state === 20) {
+          return '网格化平台-受理'
+        } else if (item.state === 25) {
+          return '网格化平台-立案'
+        } else if (item.state === 30) {
+          return '网格化平台-派遣'
+        } else if (item.state === 35) {
+          return '网格化平台-中间再派'
+        } else if (item.state === 40) {
+          return '网格化平台-接单'
+        } else if (item.state === 45) {
+          return '网格化平台-处理'
+        } else if (item.state === 50) {
+          return '网格化平台-中间督办'
+        } else if (item.state === 55) {
+          return '网格化平台-催办'
+        } else if (item.state === 60) {
+          return '网格化平台-结案'
+        }
+      } else if (item.type === 'issue' || item.type === 'init') {
+        if (item.state === 0) {
+          return '审核通过'
+        } else if (item.state === 1) {
+          return '回应'
+        } else if (item.state === 2) {
+          return '关闭'
+        } else if (item.state === 3) {
+          return '转议题'
+        }
+      } else if (item.type === 'issue-project') {
+        return '转项目'
+      }
+    }
+  },
+  computed: {
+    dataRule () {
+      return {
+      }
+    }
+  },
+  watch: {
+    'postDataForm.handleAdvice': function (val) {
+      this.dataForm.handleAdvice = val
+    },
+    'postDataForm.outHandleAdvice': function (val) {
+      this.dataForm.outHandleAdvice = val
+    },
+    'postDataForm.handleCategory': function (val) {
+      if (val === 1) {
+        this.deptResultDTOSVisible = true
+        this.evaluateDeptDTOSVisible = false
+        for (let index = 0; index < this.dataForm.deptResultDTOS.length; index++) {
+          const deptResultDTO = this.dataForm.deptResultDTOS[index]
+          if (deptResultDTO.selected === true) {
+            // this.postDataForm.deptResultDTOS.push(deptResultDTO)
+          }
+        }
+      } else if (val === 10) {
+        if (this.dataForm.evaluateDeptDTOS.length === 0) {
+          return
+        }
+        this.evaluateDeptDTOSVisible = true
+        this.deptResultDTOSVisible = false
+      } else {
+        this.evaluateDeptDTOSVisible = false
+        this.deptResultDTOSVisible = false
+      }
+    }
+  },
+  methods: {
+    back () {
+      this.visible = false
+    },
+    initBmap (latitude, longitude) {
+      this.map = new BMap.Map('map')
+      const point = new BMap.Point(longitude, latitude)
+      var marker = new BMap.Marker(point)
+      this.map.addOverlay(marker)
+      this.map.centerAndZoom(point, 13)
+      this.map.enableScrollWheelZoom(true)
+    },
+    init (id) {
+      this.visible = true
+      this.dataForm.id = id
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        if (this.dataForm.id) {
+          this.postDataForm.handleAdvice = ''
+          this.postDataForm.outHandleAdvice = ''
+          this.postDataForm.handleCategory = ''
+          this.postDataForm.deptResultDTOS = []
+          this.postDataForm.evaluateDeptDTOS = []
+          this.getInfo()
+        }
+      })
+    },
+    clickImg (url) {
+      this.previewImgList = []
+      this.previewImgList.push(url)
+    },
+    // 获取信息
+    getInfo () {
+      this.$http.get(`/events/item/${this.dataForm.id}`).then(({ data: res }) => {
+        if (res.code !== 0) {
+          return this.$message.error(res.msg)
+        }
+        this.dataForm = {
+          ...this.dataForm,
+          ...res.data
+        }
+        this.dataForm.handleProgressResultDTOS.forEach((item, index, arr) => {
+          if (index === arr.length - 1) {
+            item.type = 'issue-project'
+          } else {
+            item.type = 'project'
+          }
+        })
+        this.dataForm.issueProgressResultDTOS.forEach((item, index, arr) => {
+          if (index === arr.length - 1) {
+            item.type = 'init'
+          } else {
+            item.type = 'issue'
+          }
+        })
+        this.timeLineList = [...this.dataForm.handleProgressResultDTOS, ...this.dataForm.issueProgressResultDTOS]
+        this.$nextTick(() => {
+          this.timeLineList.forEach((item, index) => {
+            const oDiv = document.getElementById(`content${index}`)
+            const oBorder = oDiv.parentNode.parentNode.parentNode.firstChild
+            if (item.type === 'issue' || item.type === 'issue-project') {
+              oBorder.style.borderLeft = '1px solid #ffa546'
+            } else if (item.type === 'project') {
+              oBorder.style.borderLeft = '1px solid #009688'
+            }
+          })
+        })
+        this.initBmap(this.dataForm.issueLatitude, this.dataForm.issueLongitude)
+        for (let index = 0; index < res.data.handleResultDTOS.length; index++) {
+          const handleResultDTO = res.data.handleResultDTOS[index]
+          if (handleResultDTO.select === true) {
+            this.dataForm.handleCategory = handleResultDTO.processResult
+          }
+        }
+      }).catch(() => { })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+  .project-handle {
+    .el-timeline {
+      padding-left: 9px;
+      font-size: 13px;
+    }
+  }
+  .el-form-item__label {
+    font-weight: bold;
+  }
+</style>
+
+<style lang="scss" scoped>
+  .project-handle {
+    width: 100%;
+    height: calc(100vh - 120px);
+    background: #ffffff;
+    box-sizing: border-box;
+    padding: 10px;
+    .project-detail {
+      width: 79%;
+      height: 80%;
+      border: 2px solid #ccc;
+      box-sizing: border-box;
+      padding: 10px;
+      padding-top: 20px;
+      float:left;
+      margin-bottom: 1%;
+      position:relative;
+      .project-detail-tip {
+        position: absolute;
+        top: 0;
+        left:0;
+        width: 80px;
+        height: 30px;
+        line-height: 30px;
+        color: #ffffff;
+        background: #4ac38b;
+        text-align:center;
+      }
+      .el-form {
+        width: 58%;
+        height: 100%;
+        float:left;
+        overflow-y:auto;
+        &::-webkit-scrollbar {
+          width: 5px;
+          height: 1px;
+        }
+        &::-webkit-scrollbar-thumb {
+          border-radius: 5px;
+          background: #fff;
+        }
+        &::-webkit-scrollbar-track {
+          border-radius: 10px;
+          background: #fff;
+        }
+      }
+      .container {
+        width: 40%;
+        height: 100%;
+        float: right;
+        .location {
+          height: 30px;
+          line-height: 30px;
+        }
+        #map {
+          width: 100%;
+          height: calc(100% - 30px);
+        }
+      }
+    }
+    .project-progress {
+      width: 20%;
+      height: 80%;
+      float: right;
+      border: 2px solid #ccc;
+      box-sizing: border-box;
+      margin-left: 1%;
+      padding-top: 20px;
+      overflow-y:auto;
+      position: relative;
+      padding-top: 40px;
+      .project-progress-tip {
+        position: absolute;
+        top: 0;
+        left:0;
+        width: 80px;
+        height: 30px;
+        line-height: 30px;
+        color: #ffffff;
+        background: #0098ff;
+        text-align:center;
+      }
+      &::-webkit-scrollbar {
+        width: 5px;
+        height: 1px;
+      }
+      &::-webkit-scrollbar-thumb {
+        border-radius: 5px;
+        background: #aaa;
+      }
+      &::-webkit-scrollbar-track {
+        border-radius: 10px;
+        background: #ccc;
+      }
+    }
+    .handle-operation {
+      width: 79%;
+      height: 49%;
+      box-sizing: border-box;
+      border: 2px solid #ccc;
+      float:left;
+    }
+  }
+</style>
diff --git a/src/views/modules/case/topic-detail.vue b/src/views/modules/case/topic-detail.vue
new file mode 100644
index 00000000..57ac42d3
--- /dev/null
+++ b/src/views/modules/case/topic-detail.vue
@@ -0,0 +1,211 @@
+<template>
+    <el-dialog :visible.sync="visible" :title="$t('verifyLabel')" :append-to-body="true"
+               :modal-append-to-body="false"
+               :close-on-click-modal="false"
+               :close-on-press-escape="false"
+               width="80%">
+        <div class="project-handle">
+            <div class="project-detail">
+                <div class="project-detail-tip">话题详情</div>
+                <el-form :model="dataForm" ref="dataForm" style="width: 50%; height: 100%;">
+                    <el-form-item label="话题内容:" prop="eventContent">
+                        <div>{{dataForm.topicContent}}</div>
+                        <el-image v-for="url in dataForm.images"
+                                  style="width: 100px; height: 100px; margin-right: 10px"
+                                  :key="url"
+                                  :src="url"
+                                  :preview-src-list="previewImgList"
+                                  @click="clickImg(url)">
+                        </el-image>
+                    </el-form-item>
+                    <el-form-item label="所属网格:" prop="allDeptNames">
+                        <div>{{dataForm.allDeptNames}}</div>
+                    </el-form-item>
+                    <el-form-item label="话题来源:" prop="groupName">
+                        <div>{{dataForm.groupName}}</div>
+                    </el-form-item>
+                    <el-form-item label="发言人:" prop="nickName">
+                        <div>{{dataForm.nickname}}</div>
+                    </el-form-item>
+                </el-form>
+                <div class="container">
+                    <div class="location"><span style="font-weight: bold;color: #606266">上报位置:</span> {{dataForm.topicAddress}}</div>
+                    <div id="map"></div>
+                </div>
+            </div>
+            <div style="width: 100%; text-align:center; float:left;">
+                <el-button size="medium" style="width: 95px" type="primary" @click="back">返回</el-button>
+            </div>
+        </div>
+    </el-dialog>
+
+</template>
+
+<script>
+import BMap from 'BMap'
+import 'element-ui/lib/theme-chalk/timeline.css'
+import 'element-ui/lib/theme-chalk/timeline-item.css'
+import 'element-ui/lib/theme-chalk/image.css'
+export default {
+  data () {
+    return {
+      visible: false,
+      innerVisible: false,
+      dataForm: {
+        id: ''
+      },
+      previewImgList: [],
+      order: '',
+      orderField: '',
+      pageIndex: 1,
+      limitVal: 10,
+      total: 0,
+      commentsDTOs: []
+    }
+  },
+  methods: {
+    back () {
+      this.visible = false
+    },
+    initBmap (latitude, longitude) {
+      this.map = new BMap.Map('map')
+      const point = new BMap.Point(longitude, latitude)
+      var marker = new BMap.Marker(point)
+      this.map.addOverlay(marker)
+      this.map.centerAndZoom(point, 13)
+      this.map.enableScrollWheelZoom(true)
+    },
+    clickImg (url) {
+      this.previewImgList = []
+      this.previewImgList.push(url)
+    },
+    init (id) {
+      this.visible = true
+      this.dataForm.id = id
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        if (this.dataForm.id) {
+          this.getInfo()
+        }
+      })
+    },
+    // 获取信息
+    getInfo () {
+      this.$http.get(`/group/topic/detail/${this.dataForm.id}`).then(({ data: res }) => {
+        if (res.code !== 0) {
+          return this.$message.error(res.msg)
+        }
+        this.dataForm = {
+          ...this.dataForm,
+          ...res.data
+        }
+        this.initBmap(this.dataForm.topicLatitude, this.dataForm.topicLongitude)
+      }).catch(() => {})
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+    .project-handle {
+        .el-timeline {
+            padding-left: 9px;
+            font-size: 13px;
+        }
+    }
+    .el-form-item__label {
+        font-weight: bold;
+    }
+</style>
+
+<style lang="scss" scoped>
+    .project-handle {
+        width: 100%;
+        height: calc(100vh - 120px);
+        background: #ffffff;
+        box-sizing: border-box;
+        padding: 10px;
+        .project-detail {
+          width: 100%;
+          height: 80%;
+          border: 2px solid #ccc;
+          box-sizing: border-box;
+          padding: 10px;
+          padding-top: 20px;
+          float:left;
+          margin-bottom: 1%;
+          position:relative;
+          .project-detail-tip {
+            position: absolute;
+            top: 0;
+            left:0;
+            width: 80px;
+            height: 30px;
+            line-height: 30px;
+            color: #ffffff;
+            background: #4ac38b;
+            text-align:center;
+          }
+            .el-form {
+                width: 58%;
+                height: 100%;
+                float:left;
+                overflow-y:auto;
+                &::-webkit-scrollbar {
+                    width: 5px;
+                    height: 1px;
+                }
+                &::-webkit-scrollbar-thumb {
+                    border-radius: 5px;
+                    background: #fff;
+                }
+                &::-webkit-scrollbar-track {
+                    border-radius: 10px;
+                    background: #fff;
+                }
+            }
+            .container {
+                width: 40%;
+                height: 100%;
+                float: right;
+                .location {
+                    height: 30px;
+                    line-height: 30px;
+                }
+                #map {
+                    width: 100%;
+                    height: calc(100% - 30px);
+                }
+            }
+        }
+        .project-progress {
+            width: 20%;
+            height: 100%;
+            float: right;
+            border: 2px solid #ccc;
+            box-sizing: border-box;
+            margin-left: 1%;
+            padding-top: 20px;
+            overflow-y:auto;
+            &::-webkit-scrollbar {
+                width: 5px;
+                height: 1px;
+            }
+            &::-webkit-scrollbar-thumb {
+                border-radius: 5px;
+                background: #aaa;
+            }
+            &::-webkit-scrollbar-track {
+                border-radius: 10px;
+                background: #ccc;
+            }
+        }
+        .handle-operation {
+            width: 79%;
+            height: 49%;
+            box-sizing: border-box;
+            border: 2px solid #ccc;
+            float:left;
+        }
+    }
+</style>
diff --git a/src/views/modules/case/typicalcase-add-or-update.vue b/src/views/modules/case/typicalcase-add-or-update.vue
new file mode 100644
index 00000000..1b1b9c46
--- /dev/null
+++ b/src/views/modules/case/typicalcase-add-or-update.vue
@@ -0,0 +1,551 @@
+<template>
+    <el-card shadow="never" class="aui-card--fill">
+        <div class="mod-news__typicalcase}">
+            <el-form :inline="true"
+                     :model="dataForm"
+                     :rules="dataRule"
+                     ref="dataForm"
+                     :label-width="$i18n.locale === 'en-US' ? '120px' : '120px'">
+                <el-row>
+                    <el-form-item label="banner：" v-loading="loading" prop="mainPicture">
+                        <el-upload class="avatar-uploader"
+                                   :action="uploadUrl"
+                                   :show-file-list="false"
+                                   :on-success="handleAvatarActSuccess"
+                                   :on-error="handelError"
+                                   :before-upload="beforeAvatarUpload">
+                            <img v-if="dataForm.mainPicture"
+                                 :src="dataForm.mainPicture"
+                                 class="avatar">
+                            <i v-else
+                               class="el-icon-plus avatar-uploader-icon"></i>
+                            <div slot="tip"
+                                 class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
+                        </el-upload>
+                    </el-form-item>
+                </el-row>
+                <el-row>
+                    <el-form-item label="案例标题：" prop="caseTitle">
+                        <el-input v-model="dataForm.caseTitle" type="text"
+                                  maxlength="40"
+                                  show-word-limit
+                                  placeholder="请输入标题，40字以内"
+                                  clearable
+                                  style="width:500px"></el-input>
+                    </el-form-item>
+                </el-row>
+                <el-row>
+                    <el-form-item label="摘要：" prop="typicalAbstract">
+                        <el-input  v-model="dataForm.typicalAbstract" placeholder="文本输入框，限制200字内" type="textarea"
+                                   style="width:500px"
+                                   maxlength="200"
+                                   clearable></el-input>
+                    </el-form-item>
+                </el-row>
+                <el-row>
+                    <div v-for="(item, index) in dataForm.dynamicItem" :key="index">
+                        <div style="text-align: left">{{"案例"+(index+1)}}</div>
+                        <el-row>
+                            <el-form-item label="案例来源："
+                                          prop="caseSource">
+                                <el-input v-model="item.caseSource"
+                                          :disabled="true"
+                                          type="text"
+                                          clearable
+                                          style="width: 40rem;">
+                                </el-input>&emsp;
+                                &emsp;
+                                <el-button @click="addConnect(index)">{{"选择案例"}}</el-button>
+                            </el-form-item>
+                        </el-row>
+                        <el-row>
+                            <el-form-item label="案例类型："prop="associatedType">
+                                <el-select v-model="item.associatedType" :disabled="true">
+                                    <el-option label="议题" value="0"></el-option>
+                                    <el-option label="项目" value="1"></el-option>
+                                    <el-option label="话题" value="2"></el-option>
+                                </el-select>
+                            </el-form-item>
+                        </el-row>
+                        <el-row>
+                            <el-form-item label="内容描述：" prop="contentDescription">
+                                <el-upload ref="upload"
+                                        :action="uploadUrl"
+                                           :show-file-list="false"
+                                           :before-upload="uploadBeforeUploadHandle"
+                                           :on-success="uploadSuccessHandle"
+                                           style="display: none;">
+                                    <el-button ref="uploadBtn"
+                                               type="primary"
+                                               id="uploadBtn"
+                                               size="small">{{ $t('upload.button') }}</el-button>
+                                </el-upload>
+                                <quill-editor ref="myQuillEditor" v-model="item.contentDescription" :options="editorOption"></quill-editor>
+                            </el-form-item>
+                        </el-row>
+                    </div>
+                </el-row>
+                <el-form-item>
+                    <el-button :disabled="isAble" @click="addItem">{{"添加案例"}}</el-button>
+                </el-form-item>
+            </el-form>
+            <el-form>
+                <el-button type="primary" :disabled="isAble" @click="dataFormSubmitHandle()">{{"发布案例"}}</el-button>
+                <el-button size="small" :disabled="isAble" style="width: 95px" @click="back">返回</el-button>
+            </el-form>
+            <el-form>
+                <el-row>
+
+                </el-row>
+            </el-form>
+            <typicalcase-connect-list v-if="connectListVisible"  ref="connectList" @refreshDataList="getDataList"  v-on:connectResponse="connectResponse"></typicalcase-connect-list>
+        </div>
+    </el-card>
+</template>
+
+<script>
+import debounce from 'lodash/debounce'
+import TypicalcaseConnectList from './typicalcase-connect-list'
+import { quillEditor } from 'vue-quill-editor'
+import CaseInfoList from './typicalcase-list'
+import Quill from 'quill'
+import Cookies from 'js-cookie'
+import 'quill/dist/quill.core.css'
+import 'quill/dist/quill.snow.css'
+import 'quill/dist/quill.bubble.css'
+import mixinViewModule from '@/mixins/view-module'
+export default {
+  mixins: [mixinViewModule],
+  created () {
+    this.addItem()
+    this.addItem()
+    this.$nextTick(() => {
+      // 富文本
+      this.hideUpload = false
+      this.uploadUrl = `${window.SITE_CONFIG['apiURL']}/oss/file/upload?token=${Cookies.get('token')}`
+      // if (this.quillEditor) {
+      //   this.quillEditor.deleteText(0, this.quillEditor.getLength())
+      // } else {
+      //   this.quillEditorHandle()
+      // }
+      // 富文本end
+    })
+  },
+  components: {
+    quillEditor,
+    TypicalcaseConnectList,
+    CaseInfoList
+  },
+  data () {
+    return {
+      fileList: [],
+      connectListVisible: false,
+      content: '',
+      loading: false,
+      isAble: false,
+      editorOption: {
+          placeholder: 'Please enter it here...',
+          modules:{
+              toolbar:{
+                  container: [
+                      ['bold', 'italic', 'underline', 'strike'],// 加粗，斜体，下划线，删除线
+                      ['blockquote'],// 引用
+                      [{ 'header': 1 }, { 'header': 2 }],// 标题，键值对的形式；1、2表示字体大小
+                      [{ 'list': 'ordered'}, { 'list': 'bullet' }],//列表
+                      [{ 'indent': '-1'}, { 'indent': '+1' }],// 缩进
+                      [{ 'direction': 'rtl' }],// 文本方向
+                      [{ 'size': ['small', false, 'large', 'huge'] }],// 字体大小
+                      [{ 'header': [1, 2, 3, 4, 5, 6, false] }],//几级标题
+                      [{ 'color': [] }, { 'background': [] }],// 字体颜色，字体背景颜色
+                      [{ 'font': [] }],//字体
+                      [{ 'align': [] }],//对齐方式
+                      ['clean'],//清除字体样式
+                      ['image']//上传图片、上传视频
+                  ]
+              }
+          }
+      },
+        // 富文本
+        quillEditor: null,
+        quillEditorToolbarOptions: [
+            ['bold', 'italic', 'underline', 'strike'],
+            ['blockquote', 'code-block', 'image'],
+            [{ 'header': 1 }, { 'header': 2 }],
+            [{ 'list': 'ordered' }, { 'list': 'bullet' }],
+            [{ 'script': 'sub' }, { 'script': 'super' }],
+            [{ 'indent': '-1' }, { 'indent': '+1' }],
+            [{ 'direction': 'rtl' }],
+            [{ 'size': ['small', false, 'large', 'huge'] }],
+            [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
+            [{ 'color': [] }, { 'background': [] }],
+            [{ 'font': [] }],
+            [{ 'align': [] }],
+            ['clean']
+        ],
+        uploadUrl: '',
+      dataForm: {
+        caseTitle: '',
+        caseNumber: 0,
+        mainPicture: '',
+        typicalAbstract: '',
+        dynamicItem: []
+      },
+        requiredFlag: false
+    }
+  },
+  computed: {
+    dataRule () {
+      return {
+        caseTitle: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        mainPicture: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        typicalAbstract: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+          associatedId: [
+            { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    handleChange (file) {
+      this.beforeAvatarUpload(file)
+    },
+    back () {
+        this.$parent.selectComponent = 'CaseInfoList'
+        this.$router.push({ path: '/case-typicalcase'})
+    },
+    connectResponse (connectResponse) {
+        // 部门名称
+        this.dataForm.dynamicItem[connectResponse.caseIndex].caseSource = connectResponse.allDeptNames
+        // 案例类别
+        this.dataForm.dynamicItem[connectResponse.caseIndex].associatedType = connectResponse.associatedType
+        // 内容描述
+        if (connectResponse.associatedType == 0) {
+            this.dataForm.dynamicItem[connectResponse.caseIndex].contentDescription = connectResponse.issueContent
+        } else if (connectResponse.associatedType == 1) {
+            this.dataForm.dynamicItem[connectResponse.caseIndex].contentDescription = connectResponse.itemContent
+        } else if (connectResponse.associatedType == 2) {
+            this.dataForm.dynamicItem[connectResponse.caseIndex].contentDescription = connectResponse.topicContent
+        }
+        // 类别
+        this.dataForm.dynamicItem[connectResponse.caseIndex].category = connectResponse.categoryName
+        // 案例ID
+        this.dataForm.dynamicItem[connectResponse.caseIndex].associatedId = connectResponse.id
+        // 网格Id
+        this.dataForm.dynamicItem[connectResponse.caseIndex].sourceGridId = connectResponse.gridId
+        //发布人姓名
+        if (connectResponse.associatedType == 0) {
+            this.dataForm.dynamicItem[connectResponse.caseIndex].publisherName = connectResponse.nickName
+        } else if (connectResponse.associatedType == 1) {
+            this.dataForm.dynamicItem[connectResponse.caseIndex].publisherName = connectResponse.nickName
+        } else if (connectResponse.associatedType == 2) {
+            this.dataForm.dynamicItem[connectResponse.caseIndex].publisherName = connectResponse.nickname
+        }
+        // 头像
+        this.dataForm.dynamicItem[connectResponse.caseIndex].publisherHeader = connectResponse.userFace
+        // 内容
+        if (connectResponse.associatedType == 0) {
+            this.dataForm.dynamicItem[connectResponse.caseIndex].content = connectResponse.issueContent
+        } else if (connectResponse.associatedType == 1) {
+            this.dataForm.dynamicItem[connectResponse.caseIndex].content = connectResponse.itemContent
+        } else if (connectResponse.associatedType == 2) {
+            this.dataForm.dynamicItem[connectResponse.caseIndex].content = connectResponse.topicContent
+        }
+        if (connectResponse.associatedType == 0) {
+            this.dataForm.dynamicItem[connectResponse.caseIndex].releaseTime = connectResponse.distributeTime
+        } else if (connectResponse.associatedType == 1) {
+            this.dataForm.dynamicItem[connectResponse.caseIndex].releaseTime = connectResponse.distributeTime
+        } else if (connectResponse.associatedType == 2) {
+            this.dataForm.dynamicItem[connectResponse.caseIndex].releaseTime = connectResponse.createdTime
+        }
+        this.dataForm.dynamicItem[connectResponse.caseIndex].expressingAttitude = connectResponse.participantsNum
+
+        this.requiredFlag = true
+    },
+    addConnect(index){
+        this.connectListVisible = true
+        this.$nextTick(() => {
+            this.$refs.connectList.init(index)
+        })
+    },
+    // 动态添加
+    addItem () {
+      this.dataForm.dynamicItem.push({
+          caseSource: '',
+          associatedType: '',
+          contentDescription: '',
+          category: '',
+          associatedId: '',
+          sourceGridId: '',
+          publisherName: '',
+          publisherHeader: '',
+          releaseTime: '',
+          content: '',
+          expressingAttitude: ''
+
+      })
+    },
+
+    // 富文本编辑器
+    quillEditorHandle () {
+      this.quillEditor = new Quill('#J_quillEditor', {
+        modules: {
+          toolbar: this.quillEditorToolbarOptions
+        },
+        theme: 'snow'
+      })
+      this.quillEditor.container.style.height = `${300}px`
+      // // 自定义上传图片功能 (使用element upload组件)
+      this.quillEditor.getModule('toolbar').addHandler('image', () => {
+        this.$refs.uploadBtn.$el.click()
+      })
+      // 监听内容变化，动态赋值
+      this.quillEditor.on('text-change', () => {
+        this.dataForm.actContent = this.quillEditor.root.innerHTML
+        if ((this.dataForm.actContent).length > 10000) {
+          return this.$message.error('您输入的的内容已超过字数')
+        }
+      })
+    },
+    // 上传图片之前 (富文本)
+    uploadBeforeUploadHandle (file) {
+      if (file.type !== 'image/jpg' && file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {
+        this.$message.error(this.$t('upload.tip', { 'format': 'jpg、png、gif' }))
+        return false
+      }
+    },
+
+    // 上传图片成功 (富文本)
+    uploadSuccessHandle (res) {
+        let quill = this.$refs.myQuillEditor[0].quill;
+      if (res.code !== 0) {
+        return this.$message.error(res.msg)
+      }
+      this.quill.insertEmbed(this.quill.getSelection().index, 'image', res.data.url)
+    },
+    // 上传图片ends
+    init () {
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+      })
+    },
+    // 表单提交
+    dataFormSubmitHandle: debounce(function () {
+      this.$refs['dataForm'].validate((valid) => {
+        if (!valid) {
+          return false
+        }
+        if(!this.requiredFlag){
+            alert("请关联案例！")
+            return false
+        }
+          for(let item of this.dataForm.dynamicItem) {
+              if(item.associatedId != '') {
+                  this.dataForm.caseNumber = this.dataForm.caseNumber + 1
+              }
+          }
+        this.isAble = true;
+        this.$http[!this.dataForm.id ? 'post' : 'put']('/cloudAnalysis/typicalcase', this.dataForm).then(({ data: res }) => {
+          if (res.code !== 0) {
+            this.isAble = false;
+            return this.$message.error(res.msg)
+          }
+          this.$message({
+            message: this.$t('prompt.success'),
+            type: 'success',
+            duration: 500,
+            onClose: () => {
+                this.isAble = false;
+                this.back()
+            }
+          })
+        }).catch(() => {})
+      })
+    }, 1000, { 'leading': true, 'trailing': false }),
+      handleAvatarActSuccess (res, file) {
+          this.loading = false
+          this.dataForm.mainPicture = res.data.url
+      },
+      beforeAvatarUpload (file) {
+          this.loading = true
+      },
+      handelError () {
+          this.loading = false
+      },
+  }
+}
+</script>
+<style>
+    .avatar-uploader .el-upload {
+        border: 1px dashed #d9d9d9;
+        border-radius: 6px;
+        cursor: pointer;
+        position: relative;
+        overflow: hidden;
+    }
+    .avatar-uploader .el-upload:hover {
+        border-color: #409eff;
+    }
+    .avatar-uploader-icon {
+        font-size: 28px;
+        color: #8c939d;
+        width: 178px;
+        height: 178px;
+        line-height: 178px;
+        text-align: center;
+    }
+    .avatar {
+        width: 178px;
+        height: 178px;
+        display: block;
+    }
+</style>
+<style lang="scss">
+    .project-handle {
+        .el-timeline {
+            padding-left: 9px;
+            font-size: 13px;
+        }
+        .el-textarea {
+            width: 600px !important;
+        }
+        .el-input {
+            width: 600px !important;
+        }
+    }
+    .el-form-item__label {
+        font-weight: bold;
+    }
+    .quill-editor {
+        width:60rem;
+        height: 400px;
+        .ql-container {
+            height: 350px;
+        }
+    }
+</style>
+
+<style lang="scss" scoped>
+    .project-handle {
+        width: 100%;
+        height: calc(100vh - 120px);
+        background: #ffffff;
+        box-sizing: border-box;
+        padding: 10px;
+        .project-detail {
+            width: 100%;
+            height: 49%;
+            border: 2px solid #ccc;
+            box-sizing: border-box;
+            padding: 10px;
+            padding-top: 20px;
+            float:left;
+            margin-bottom: 1%;
+            position:relative;
+            .project-detail-tip {
+                position: absolute;
+                top: 0;
+                left:0;
+                width: 80px;
+                height: 30px;
+                line-height: 30px;
+                color: #ffffff;
+                background: #4ac38b;
+                text-align:center;
+            }
+            .el-form {
+                width: 58%;
+                height: 100%;
+                float:left;
+                overflow-y:auto;
+                &::-webkit-scrollbar {
+                    width: 5px;
+                    height: 1px;
+                }
+                &::-webkit-scrollbar-thumb {
+                    border-radius: 5px;
+                    background: #ccc;
+                }
+                &::-webkit-scrollbar-track {
+                    border-radius: 10px;
+                    background: #fff;
+                }
+            }
+            .container {
+                width: 40%;
+                height: 100%;
+                float: right;
+                .location {
+                    height: 30px;
+                    line-height: 30px;
+                }
+                #map {
+                    width: 100%;
+                    height: calc(100% - 30px);
+                }
+            }
+        }
+        .project-progress {
+            width: 20%;
+            height: 100%;
+            float: right;
+            border: 2px solid #ccc;
+            box-sizing: border-box;
+            margin-left: 1%;
+            padding-top: 20px;
+            overflow-y:auto;
+            &::-webkit-scrollbar {
+                width: 5px;
+                height: 1px;
+            }
+            &::-webkit-scrollbar-thumb {
+                border-radius: 5px;
+                background: #aaa;
+            }
+            &::-webkit-scrollbar-track {
+                border-radius: 10px;
+                background: #ccc;
+            }
+        }
+        .handle-operation {
+            padding-top: 30px;
+            box-sizing: border-box;
+            width: 100%;
+            height: 49%;
+            box-sizing: border-box;
+            border: 2px solid #ccc;
+            float:left;
+            position: relative;
+            overflow-y:auto;
+            &::-webkit-scrollbar {
+                width: 5px;
+                height: 1px;
+            }
+            &::-webkit-scrollbar-thumb {
+                border-radius: 5px;
+                background: #aaa;
+            }
+            &::-webkit-scrollbar-track {
+                border-radius: 10px;
+                background: #ccc;
+            }
+            .handle-operation-tip {
+                position: absolute;
+                top: 0;
+                left:0;
+                width: 80px;
+                height: 30px;
+                line-height: 30px;
+                color: #ffffff;
+                background: #ff7600;
+                text-align:center;
+            }
+        }
+    }
+</style>
diff --git a/src/views/modules/case/typicalcase-connect-list.vue b/src/views/modules/case/typicalcase-connect-list.vue
new file mode 100644
index 00000000..1a556a29
--- /dev/null
+++ b/src/views/modules/case/typicalcase-connect-list.vue
@@ -0,0 +1,263 @@
+<template>
+  <el-dialog :visible.sync="visible"
+             :close-on-click-modal="false"
+             :close-on-press-escape="false"
+             width="80%"
+             height="80%">
+    <el-card shadow="never" class="aui-card--fill">
+        <div class="mod-news__typicalcase}">
+    <el-form :model="dataForm"  ref="dataForm" @keyup.enter.native="getDataList" :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'">
+        <el-form-item label="所属机构">
+            <el-cascader v-model="ids"
+                         :options="options"
+                         :props="{ checkStrictly: true }"
+                         clearable>
+            </el-cascader>
+        </el-form-item>
+        <el-form-item label="案例类型">
+            <el-select v-model="dataForm.associatedType" @change="getDataList">
+                <el-option label="议题" value="0"></el-option>
+                <el-option label="项目" value="1"></el-option>
+                <el-option label="话题" value="2"></el-option>
+            </el-select>
+        </el-form-item>
+        <el-form-item label="内容检索">
+            <el-input v-model="dataForm.keyword" property="请输入内容" style="width: 20rem;"></el-input>
+            &nbsp;
+            <el-button @click="getDataList()">{{ $t('query') }}</el-button>
+        </el-form-item>
+    </el-form>
+      <el-table v-loading="dataListLoading" :data="dataList" max-height="250"
+                style="width: 100%;">
+          <el-table-column label="单选" width="70">
+              <template slot-scope="scope">
+                  <el-radio v-model="radio" :label="scope.$index+1"
+                            @change.native= selectAction(scope.row)></el-radio>
+              </template>
+          </el-table-column>
+          <el-table-column v-if="this.dataForm.associatedType == 0" prop="issueContent" label="内容" header-align="center" align="center" style="width: 10%"></el-table-column>
+          <el-table-column v-if="this.dataForm.associatedType == 1" prop="itemContent" label="内容" header-align="center" align="center" style="width: 10%"></el-table-column>
+          <el-table-column v-if="this.dataForm.associatedType == 2" prop="topicContent" label="内容" header-align="center" align="center" style="width: 10%"></el-table-column>
+          <el-table-column v-if="this.dataForm.associatedType == 0" prop="nickName" label="发布人姓名" header-align="center" align="center" style="width: 10%"></el-table-column>
+          <el-table-column v-if="this.dataForm.associatedType == 1" prop="nickName" label="发布人姓名" header-align="center" align="center" style="width: 10%"></el-table-column>
+          <el-table-column v-if="this.dataForm.associatedType == 2" prop="nickname" label="发布人姓名" header-align="center" align="center" style="width: 10%"></el-table-column>
+          <el-table-column prop="createdTime" label="发布时间" header-align="center" align="center" 问题内容style="width: 10%"></el-table-column>
+          <el-table-column prop="participantsNum" label="表达态度总数" header-align="center" align="center" style="width: 10%"></el-table-column>
+          <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
+              <template slot-scope="scope">
+                  <el-button type="text" size="small" @click="detailHandle(scope.row.id)">{{"查看详细"}}</el-button>
+              </template>
+          </el-table-column>
+      </el-table>
+       <el-pagination
+               :current-page="page"
+               :page-sizes="[10, 20, 50, 100]"
+               :page-size="limit"
+               :total="total"
+               layout="total, sizes, prev, pager, next, jumper"
+               @size-change="pageSizeChangeHandle"
+               @current-change="pageCurrentChangeHandle">
+       </el-pagination>
+
+    <el-form>
+            <el-button type="primary" @click="getInfo()">{{"确定案例"}}</el-button>
+     </el-form>
+        </div>
+    </el-card>
+      <issue-detail v-if="issueDetailVisible" ref="issueDetails" @refreshDataList="getDataList"></issue-detail>
+      <item-detail v-if="itemDetailVisible" ref="itemDetails" @refreshDataList="getDataList"></item-detail>
+      <topic-detail v-if="topicDetailVisible" ref="topicDetails" @refreshDataList="getDataList"></topic-detail>
+  </el-dialog>
+</template>
+
+<script>
+
+import debounce from 'lodash/debounce'
+import mixinViewModule from '@/mixins/view-module'
+import IssueDetail from './issue-detail'
+import ItemDetail from './item-detail'
+import TopicDetail from './topic-detail'
+export default {
+    mixins: [mixinViewModule],
+    data () {
+        return {
+            mixinViewModuleOptions: {
+                getDataListURL: '/events/issue/page',
+                getDataListIsPage: true
+            },
+            visible: false,
+            radio: 0,
+            issueDetailVisible: false,
+            itemDetailVisible: false,
+            topicDetailVisible: false,
+            dataForm: {
+                streetId: '',
+                communityId: '',
+                gridId: '',
+                caseIndex: '',
+                associatedType: '0',
+                keyword: '',
+                selectedType: '0',
+                selectId: '',
+                participantsNum: 0
+            },
+            options: [],
+            responseData: []
+        }
+    },
+    created: function () {
+        this.getOptions()
+    },
+    watch: {
+        'ids': function (val) {
+            if (val.length === 0) {
+                this.dataForm.streetId = ''
+                this.dataForm.communityId = ''
+                this.dataForm.gridId = ''
+            }
+            if (val.length === 1) {
+                this.dataForm.streetId = this.ids[0]
+            }
+            if (val.length === 2) {
+                this.dataForm.streetId = this.ids[0]
+                this.dataForm.communityId = this.ids[1]
+            }
+            if (val.length === 3) {
+                this.dataForm.streetId = this.ids[0]
+                this.dataForm.communityId = this.ids[1]
+                this.dataForm.gridId = this.ids[2]
+            }
+        }
+    },
+    methods: {
+        selectAction (item) {
+            this.dataForm.selectId = item.id
+            this.dataForm.participantsNum = item.participantsNum
+        },
+        getOptions () {
+            this.$http
+                .get(`/sys/user/deptOptions/getByLoginUser`)
+                .then(({ data: res }) => {
+                    if (res.code !== 0) {
+                        return this.$message.error(res.msg)
+                    }
+                    this.options = res.data.options
+                })
+                .catch(() => {})
+        },
+        // 获取数据列表
+        init (index) {
+            this.visible = true
+            this.dataForm.caseIndex = index
+            this.$nextTick(() => {
+                this.getDataList()
+            })
+        },
+        detailHandle (id) {
+            // 议题
+            if (this.dataForm.selectedType == 0) {
+                this.issueDetailVisible = true
+                this.$nextTick(() => {
+                    this.$refs.issueDetails.init(id)
+                })
+                // 项目
+            } else if (this.dataForm.selectedType == 1) {
+                this.itemDetailVisible = true
+                this.$nextTick(() => {
+                    this.$refs.itemDetails.init(id)
+                })
+                // 话题
+            } else if (this.dataForm.selectedType == 2) {
+                this.topicDetailVisible = true
+                this.$nextTick(() => {
+                    this.$refs.topicDetails.init(id)
+                })
+            } else {
+                console.log('未选择类型')
+            }
+        },
+        getDataList () {
+            this.dataListLoading = true
+            if (this.dataForm.associatedType == 0) {
+                // 议题
+                this.dataForm.state = 4
+                this.mixinViewModuleOptions.getDataListURL = '/events/issue/page'
+            } else if (this.dataForm.associatedType == 1) {
+                // 项目
+                this.dataForm.state = ''
+                this.mixinViewModuleOptions.getDataListURL = '/events/item/page'
+            } else if (this.dataForm.associatedType == 2) {
+                this.dataForm.state = ''
+                this.dataForm.orderType = ''
+                // 话题
+                this.mixinViewModuleOptions.getDataListURL = '/group/topic/page'
+            } else {
+                console.log('先选择类型')
+            }
+            this.$http.get(
+                this.mixinViewModuleOptions.getDataListURL,
+                {
+                    params: {
+                        order: this.order,
+                        orderField: this.orderField,
+                        page: this.mixinViewModuleOptions.getDataListIsPage ? this.page : null,
+                        limit: this.mixinViewModuleOptions.getDataListIsPage ? this.limit : null,
+                        ...this.dataForm
+                    }
+                }
+            ).then(({ data: res }) => {
+                this.dataListLoading = false
+                this.radio = 0
+                if (res.code !== 0) {
+                    this.dataList = []
+                    this.total = 0
+                    return this.$message.error(res.msg)
+                }
+                this.dataList = res.data.list
+                this.total = this.mixinViewModuleOptions.getDataListIsPage ? res.data.total : 0
+                this.dataForm.selectedType = this.dataForm.associatedType
+
+            }).catch(() => {
+                this.dataListLoading = false
+            })
+        },
+        getInfo () {
+            if (!this.dataForm.selectId) {
+                alert("未选择！")
+                return
+            }
+            var url = ''
+            if (this.dataForm.selectedType == 0) {
+                url = '/events/issue/issueContentDetail/' + this.dataForm.selectId
+            } else if (this.dataForm.selectedType == 1) {
+                url = '/events/item/' + this.dataForm.selectId
+            } else if (this.dataForm.selectedType == 2) {
+                url = '/group/topic/detail/' + this.dataForm.selectId
+            } else {
+                console.log('未选择类型')
+                return
+            }
+            this.$http.get(url).then(({ data: res }) => {
+                if (res.code !== 0) {
+                    return this.$message.error(res.msg)
+                }
+                this.responseData = {
+                    ...this.responseData,
+                    ...res.data
+                }
+                this.responseData.id = this.dataForm.selectId
+                this.responseData.associatedType = this.dataForm.selectedType
+                this.responseData.caseIndex = this.dataForm.caseIndex
+                this.responseData.participantsNum = this.dataForm.participantsNum
+                this.$emit('connectResponse', this.responseData)
+                this.visible = false
+            }).catch(() => {})
+        }
+    },
+    components: {
+        IssueDetail,
+        ItemDetail,
+        TopicDetail
+    }
+}
+</script>
diff --git a/src/views/modules/case/typicalcase-detail.vue b/src/views/modules/case/typicalcase-detail.vue
new file mode 100644
index 00000000..9b48f872
--- /dev/null
+++ b/src/views/modules/case/typicalcase-detail.vue
@@ -0,0 +1,120 @@
+<template>
+    <el-card shadow="never" class="aui-card--fill">
+        <div class="mod-news__typicalcase}">
+            <el-form :inline="true"
+                     :model="dataForm"
+                     :rules="dataRule"
+                     ref="dataForm"
+                     :label-width="$i18n.locale === 'en-US' ? '120px' : '120px'">
+                <el-row>
+                    <el-form-item label="banner：" v-loading="loading" prop="headPic">
+                        <img v-if="dataForm.mainPicture"
+                             :src="dataForm.mainPicture"
+                             class="avatar">
+                    </el-form-item>
+                </el-row>
+                <el-row>
+                    <el-form-item label="案例标题："
+                                  prop="caseTitle">
+                        {{dataForm.caseTitle}}
+                    </el-form-item>
+                </el-row>
+                <el-row>
+                    <el-form-item label="摘要："
+                                  prop="typicalAbstract">
+                        {{dataForm.typicalAbstract}}
+                    </el-form-item>
+                </el-row>
+                <el-row>
+                    <div v-for="(item, index) in dataForm.dynamicItem" :key="index">
+                        <div style="text-align: left">{{"案例"+(index+1)}}</div>
+                        <el-row>
+                            <el-form-item label="案例来源："
+                                          prop="caseSource">
+                                {{item.caseSource}}
+                            </el-form-item>
+                        </el-row>
+                        <el-row>
+                            <el-form-item label="案例类型："prop="associatedType">
+                                <el-select v-model="item.associatedType" disabled="true">
+                                    <el-option label="议题" value="0"></el-option>
+                                    <el-option label="项目" value="1"></el-option>
+                                    <el-option label="话题" value="2"></el-option>
+                                </el-select>
+                            </el-form-item>
+                        </el-row>
+                        <el-row>
+                            <el-form-item prop="contentDescription"
+                                          label="内容描述：">
+                                <p v-html="item.contentDescription"></p>
+                            </el-form-item>
+                        </el-row>
+                    </div>
+                </el-row>
+            </el-form>
+            <el-form>
+                <el-button size="small" style="width: 95px" @click="back">返回</el-button>
+            </el-form>
+        </div>
+    </el-card>
+</template>
+
+<script>
+import debounce from 'lodash/debounce'
+import mixinViewModule from '@/mixins/view-module'
+import { quillEditor } from 'vue-quill-editor'
+import 'quill/dist/quill.core.css'
+import 'quill/dist/quill.snow.css'
+import 'quill/dist/quill.bubble.css'
+export default {
+  mixins: [mixinViewModule],
+  components: {
+    quillEditor
+  },
+  data () {
+    return {
+      mixinViewModuleOptions: {
+        getDataListURL: '/cloudAnalysis/typicalcase/detail' + '/' + this.$route.query.id
+      },
+      dataForm: {
+          id: '',
+          caseTitle: '',
+          caseNumber: 0,
+          mainPicture: '',
+          typicalAbstract: '',
+          dynamicItem: []
+      }
+    }
+  },
+  mounted () {
+      this.dataForm.id = this.$route.query.id
+      this.init()
+  },
+  methods: {
+    back () {
+      this.$parent.selectComponent = 'CaseInfoList'
+      this.$router.push({ path: '/case-typicalcase' })
+    },
+    init () {
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        if (this.dataForm.id) {
+          this.getInfo()
+        }
+      })
+    },
+    // 获取信息
+    getInfo () {
+      this.$http.get(`/cloudAnalysis/typicalcase/${this.dataForm.id}`).then(({ data: res }) => {
+        if (res.code !== 0) {
+          return this.$message.error(res.msg)
+        }
+        this.dataForm = {
+          ...this.dataForm,
+          ...res.data
+        }
+      }).catch(() => {})
+    }
+  }
+}
+</script>
diff --git a/src/views/modules/case/typicalcase-list.vue b/src/views/modules/case/typicalcase-list.vue
new file mode 100644
index 00000000..87e0dade
--- /dev/null
+++ b/src/views/modules/case/typicalcase-list.vue
@@ -0,0 +1,162 @@
+<template>
+  <el-card shadow="never" class="aui-card--fill">
+    <div class="mod-news__typicalcase}">
+      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+        <el-form-item label="案例标题">
+          <el-input v-model="dataForm.caseTitle" placeholder="请输入" clearable></el-input>
+        </el-form-item>
+          <el-form-item label="时间"
+                        prop="startTime">
+              <el-date-picker v-model="dataForm.startTime"
+                              type="date"
+                              :picker-options="pickerBeginDateBefore"
+                              value-format="yyyy-MM-dd"
+                              format="yyyy-MM-dd"
+                              placeholder="选择日期时间">
+              </el-date-picker>
+          </el-form-item>
+          <el-form-item label="至"
+                        label-width="25px"
+                        prop="endTime">
+              <el-date-picker v-model="dataForm.endTime"
+                              type="date"
+                              :picker-options="pickerBeginDateAfter"
+                              value-format="yyyy-MM-dd"
+                              format="yyyy-MM-dd"
+                              placeholder="选择日期时间">
+              </el-date-picker>
+          </el-form-item>
+        <!--查询按钮-->
+        <el-form-item>
+          <el-button @click="getDataList()">{{ $t('query') }}</el-button>
+        </el-form-item>
+      </el-form>
+      <el-form>
+        <!--添加按钮-->
+        <el-form-item>
+          <el-button type="primary" @click="addHandle()">{{"新增典型案例"}}</el-button>
+        </el-form-item>
+      </el-form>
+      <!-- 列表-->
+      <el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle" style="width: 100%;">
+        <el-table-column label="序号" type="index"  header-align="center" align="center" width="150"></el-table-column>
+        <el-table-column prop="caseTitle" label="优秀案例标题" header-align="center" align="center"></el-table-column>
+        <el-table-column prop="state" label="状态" :formatter="formatState" header-align="center" align="center"></el-table-column>
+        <el-table-column prop="caseNumber" label="优秀案例数" header-align="center" align="center"></el-table-column>
+        <el-table-column prop="createdTime" label="创建时间" header-align="center" align="center"></el-table-column>
+        <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
+          <template slot-scope="scope">
+            <el-button v-if="$hasPermission('case:actbanner:grounding')" type="text" size="small" @click="changeGroundingHandle(scope.row)">{{ changeGroundingText(scope.row.state) }}</el-button>
+            <el-button type="text" size="small" @click="detailHandle(scope.row.id)">{{"查看详细"}}</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <!--分页-->
+      <div style="text-align:center">
+      <el-pagination
+        :current-page="page"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="limit"
+        :total="total"
+        layout="total, sizes, prev, pager, next, jumper"
+        @size-change="pageSizeChangeHandle"
+        @current-change="pageCurrentChangeHandle">
+      </el-pagination>
+      </div>
+    </div>
+  </el-card>
+</template>
+
+<script>
+import mixinViewModule from '@/mixins/view-module'
+import AddOrUpdate from './typicalcase-add-or-update'
+import CaseInfoDetailView from './typicalcase-detail'
+import {debounce} from 'lodash'
+export default {
+  mixins: [mixinViewModule],
+  name: 'CaseInfoList',
+  data () {
+    return {
+      mixinViewModuleOptions: {
+        getDataListURL: '/cloudAnalysis/typicalcase/page',
+        getDataListIsPage: true
+      },
+      dataForm: {
+        caseTitle: '',
+        startTime: '',
+        endTime: ''
+      },
+        pickerBeginDateBefore: {
+            disabledDate: (time) => {
+                let beginDateVal = this.dataForm.startTime
+                if (beginDateVal) {
+                    return time.getTime() > new Date(beginDateVal).getTime()
+                }
+            }
+        },
+        pickerBeginDateAfter: {
+            disabledDate: (time) => {
+                let EndDateVal = this.dataForm.endTime
+                if (EndDateVal) {
+                    return time.getTime() < new Date(EndDateVal).getTime()
+                }
+            }
+        }
+    }
+  },
+  components: {
+    AddOrUpdate,
+    CaseInfoDetailView
+  },
+  created: function () {
+    this.getDataList()
+  },
+  methods: {
+    detailHandle (id) {
+      this.$parent.selectComponent = 'CaseInfoDetailView'
+      this.$router.push({ path: '/case-typicalcase', query: { id: id } })
+    },
+    formatState: function (row, column) {
+      let state = row.state
+      if (state == 1) {
+        return '上架'
+      } else if (state == 0) {
+        return '下架'
+      }
+    },
+    changeGroundingText(state){
+      let status = state
+      if (status == 1) {
+        return '下架'
+      } else if (status == 0) {
+        return '上架'
+      }
+    },
+    addHandle () {
+      this.$parent.selectComponent = 'CaseInfoAdd'
+      this.$router.push({ path: '/case-typicalcase' })
+    },
+    changeGroundingHandle: debounce(function (row) {
+        this.$confirm(this.$t('prompt.info', { 'handle': this.changeGroundingText(row.state) }), this.$t('prompt.title'), {
+            confirmButtonText: this.$t('confirm'),
+            cancelButtonText: this.$t('cancel'),
+            type: 'warning'
+        }).then(() => {
+            this.$http.get(`/cloudAnalysis/typicalcase/updateState/${row.id}`).then(({ data: res }) => {
+                if (res.code !== 0) {
+                    return this.$message.error(res.msg)
+                }
+                this.$message({
+                    message: this.$t('prompt.success'),
+                    type: 'success',
+                    duration: 500,
+                    onClose: () => {
+                        this.getDataList()
+                    }
+                })
+            }).catch(() => {})
+        }).catch(() => {})
+    }, 1000, { 'leading': true, 'trailing': false })
+  }
+}
+</script>
diff --git a/src/views/modules/case/typicalcase.vue b/src/views/modules/case/typicalcase.vue
new file mode 100644
index 00000000..bd08c9b5
--- /dev/null
+++ b/src/views/modules/case/typicalcase.vue
@@ -0,0 +1,31 @@
+<template>
+  <keep-alive include="caseInfoList">
+    <component :is="selectComponent"></component>
+  </keep-alive>
+</template>
+<script>
+import CaseInfoList from './typicalcase-list'
+import CaseInfoDetailView from './typicalcase-detail'
+import CaseInfoAdd from './typicalcase-add-or-update'
+export default {
+  data () {
+    return {
+      selectComponent: CaseInfoList
+    }
+  },
+  components: {
+    CaseInfoList,
+    CaseInfoDetailView,
+    CaseInfoAdd
+  },
+  methods: {
+    init () {
+      this.selectComponent = CaseInfoList
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>