diff --git a/src/views/modules/case/caseinfo.vue b/src/views/modules/case/caseinfo.vue
new file mode 100644
index 00000000..b38e16a0
--- /dev/null
+++ b/src/views/modules/case/caseinfo.vue
@@ -0,0 +1,31 @@
+<template>
+    <keep-alive include="caseInfoList">
+        <component :is="selectComponent"></component>
+    </keep-alive>
+</template>
+<script>
+import CaseInfoList from './typicalcase'
+import CaseInfoDetailView from './typicalcasedetail'
+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>
diff --git a/src/views/modules/case/typicalcasedetail.vue b/src/views/modules/case/typicalcasedetail.vue
new file mode 100644
index 00000000..131bc408
--- /dev/null
+++ b/src/views/modules/case/typicalcasedetail.vue
@@ -0,0 +1,238 @@
+<template>
+    <el-card shadow="never" class="aui-card--fill">
+        <div class="mod-news__typicalcase}">
+    <el-form :model="dataList" :rules="dataRule" ref="dataForm" @keyup.enter.native="getDataList()" :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'">
+        <el-form-item label="" prop="mainPicture">
+            <el-upload disabled
+                    :limit="1"
+                    ref="upload1"
+                    class="upload-demo"
+                    :on-change="handleChange"
+                    action="werwer"
+                    :name="'file'"
+                    :auto-upload="false"
+                    :before-upload="beforeAvatarUpload"
+                    :before-remove="beforeRemove"
+                    list-type="picture-card">
+                <el-button disabled>{{"上传文件"}}</el-button>
+                <div slot="tip" class="" style="width: 272px;font-size: 13px">{{"支持：.jpg/png"}}</div>
+            </el-upload>
+        </el-form-item>
+        <el-form-item label="案例标题" prop="caseTitle" style="width: 40rem;">
+          <el-input disabled v-model="dataList.caseTitle" placeholder="" maxlength="40"></el-input>
+        </el-form-item>
+        <el-form-item label="摘要" prop="typicalAbstract" style="width: 40rem;">
+            <el-input disabled v-model="dataList.typicalAbstract" placeholder="" maxlength="200"
+                      type="textarea" :rows="5"></el-input>
+        </el-form-item>
+        <el-form-item label="时间" prop="createdTime" style="width: 40rem;">
+            <el-input disabled v-model="dataList.createdTime" placeholder="" maxlength="200"></el-input>
+        </el-form-item>
+    </el-form>
+<!--            实际案例-->
+ <div v-for="(item, index) in dataList.caseData" :key="index">
+     <div style="text-align: left">{{"案例"+(index+1)}}</div>
+    <el-form :model="dataForm1" :rules="dataRule" ref="dataForm1" @keyup.enter.native="dataFormSubmitHandle()" :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'">
+        <el-form-item label="案例来源" style="width: 40rem;">
+            <el-input v-model="item.caseSource" disabled></el-input>
+        </el-form-item>
+        <el-form-item label="关联案例" style="width: 40rem;">
+            <el-input v-model="item.associatedType" placeholder="" disabled></el-input>
+        </el-form-item>
+        <el-form-item label="内容描述" style="width: 40rem;">
+            <quill-editor ref="text" v-model="item.contentDescription" class="myQuillEditor" :options="editorOption" disabled=""></quill-editor>
+        </el-form-item>
+    </el-form>
+    </div>
+            <el-form>
+                <el-form-item label-width="200px">
+                    <el-button size="small" style="width: 95px" @click="backToList">返回</el-button>
+                </el-form-item>
+            </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
+      },
+      fileList: [],
+      visible: false,
+      content: '',
+      editorOption: {},
+      dataForm: {
+        id: '',
+        caseTitle: '',
+        caseNumber: '',
+        state: '',
+        mainPicture: '',
+        typicalAbstract: '',
+        revision: '',
+        delFlag: '',
+        createdBy: '',
+        createdTime: '',
+        updatedBy: '',
+        updatedTime: ''
+      },
+      dataForm1: {
+        number: 0,
+        ids: '',
+        caseid: '',
+        content: '',
+        dynamicItem: []
+      }
+    }
+  },
+  computed: {
+    // dataRule () {
+    //   return {
+    //     caseTitle: [
+    //       { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+    //     ],
+    //     caseNumber: [
+    //       { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+    //     ],
+    //     state: [
+    //       { 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' }
+    //     ],
+    //     revision: [
+    //       { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+    //     ],
+    //     delFlag: [
+    //       { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+    //     ],
+    //     createdBy: [
+    //       { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+    //     ],
+    //     createdTime: [
+    //       { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+    //     ],
+    //     updatedBy: [
+    //       { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+    //     ],
+    //     updatedTime: [
+    //       { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+    //     ]
+    //   }
+    // }
+  },
+  methods: {
+    backToList () {
+      this.$parent.selectComponent = 'CaseInfoList'
+      this.$router.push({ path: '/case-typicalcase'})
+    },
+    // handleChange (file) {
+    //   this.beforeAvatarUpload(file)
+    // },
+    //
+    // beforeRemove (file, fileList) {
+    //   console.log(file)
+    //   file = null
+    //   this.file1 = file
+    //   this.dataForm.mainPicture = null
+    //   console.log(file)
+    //   // this.canUpload = false;
+    // },
+    // // 限制上传类型和大小
+    // beforeAvatarUpload (file) {
+    //   var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
+    //   // alert(testmsg)
+    //   const extension = testmsg === 'png'
+    //   const extension2 = testmsg === 'jpg'
+    //   if (!extension && !extension2) {
+    //     this.$message.error('请上传jpg或png格式图片')
+    //     this.$refs.upload1.clearFiles()
+    //     file = null
+    //     this.dataForm.mainPicture = null
+    //   } else {
+    //     this.dataForm.mainPicture = file.name
+    //     this.canUpload = true
+    //   }
+    //   this.file1 = file
+    // },
+    // 动态添加
+    addItem () {
+      this.dataForm1.number++
+      this.dataForm1.dynamicItem.push({
+        number: this.dataForm1.number,
+        ids: '',
+        caseid: '',
+        content: ''
+      })
+    },
+
+    init () {
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        if (this.dataForm.id) {
+          this.getInfo()
+        }
+      })
+    },
+    // 获取信息
+    getInfo () {
+      this.$http.get(`/case/typicalcase/${this.dataForm.id}`).then(({ data: res }) => {
+        if (res.code !== 0) {
+          return this.$message.error(res.msg)
+        }
+        this.dataForm = {
+          ...this.dataForm,
+          ...res.data
+        }
+        // this.dataForm1.domains = []
+        // for (var j = 0; j < res.data.caseData.length; j++) {
+        //   var obj = {}
+        //   obj.label = res.data.data[j].label
+        //   obj.prop = res.data.data[j].prop
+        //   obj.value = res.data.data[j].value
+        //   obj.editable = res.data.data[j].editable
+        //   this.dynamicValidateForm.domains.push(obj)
+        // }
+      }).catch(() => {})
+    },
+    // 表单提交
+    dataFormSubmitHandle: debounce(function () {
+      this.$refs['dataForm'].validate((valid) => {
+        if (!valid) {
+          return false
+        }
+        this.$http[!this.dataForm.id ? 'post' : 'put']('/typicalcase/addcase', this.dataForm).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.visible = false
+              this.$emit('refreshDataList')
+            }
+          })
+        }).catch(() => {})
+      })
+    }, 1000, { 'leading': true, 'trailing': false })
+  }
+}
+</script>