diff --git a/frontend/src/business/components/common/components/MsPieChart.vue b/frontend/src/business/components/common/components/MsPieChart.vue
new file mode 100644
index 0000000000..9ba804afe2
--- /dev/null
+++ b/frontend/src/business/components/common/components/MsPieChart.vue
@@ -0,0 +1,110 @@
+<template>
+
+  <div>
+  <chart :options="options">
+  </chart>
+  </div>
+
+</template>
+
+<script>
+
+  export default {
+    name: "MsPieChart",
+    components: {},
+    mounted() {
+      this.getDataNamesByData();
+    },
+    watch: {
+      data() {
+        this.getDataNamesByData();
+      }
+    },
+    data() {
+      return {
+        options: {
+          title: {
+            text: this.text,
+            subtext: this.subtext,
+            left: 'center'
+          },
+          tooltip: {
+            trigger: 'item',
+            formatter: '{a} <br/>{b} : {c} ({d}%)'
+          },
+          legend: {
+            orient: 'vertical',
+            left: 20,
+            data: this.dataNames
+          },
+          series : [
+            {
+              name: this.name,
+              type: 'pie',
+              radius: '55%',
+              roseType: 'angle',
+              data: this.data
+            }
+          ]
+        },
+        dataNames: ['示例1','示例2','示例3']
+      }
+    },
+    props: {
+      text: {
+        type: String,
+        default: '图表名称'
+      },
+      name: {
+        type: String,
+        default: '数据名称'
+      },
+      subtext: {
+        type: String,
+        default: ''
+      },
+      data: {
+        type: Array,
+        default() {
+          return [
+            {
+              value:235, name:'示例1',
+              itemStyle: {
+                color: '#67C23A'
+              }
+            },
+            {
+              value:274, name:'示例2',
+              itemStyle: {
+                color: '#E6A23C'
+              }
+            },
+            {
+              value:274, name:'示例3',
+              itemStyle: {
+                color: '#F56C6C'
+              }
+            }
+          ];
+        }
+      }
+    },
+    methods: {
+      getDataNamesByData() {
+        let itemNames = [];
+        this.data.forEach(item => {
+          itemNames.push(item.name);
+        });
+        this.dataNames = itemNames;
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+  .echarts {
+    margin: 0 auto;
+  }
+
+</style>
diff --git a/frontend/src/business/components/settings/workspace/components/BaseInfoComponent.vue b/frontend/src/business/components/settings/workspace/components/BaseInfoComponent.vue
new file mode 100644
index 0000000000..819330b168
--- /dev/null
+++ b/frontend/src/business/components/settings/workspace/components/BaseInfoComponent.vue
@@ -0,0 +1,81 @@
+<template>
+
+
+  <common-component :title="'基础信息'">
+
+    <el-row type="flex" justify="space-between">
+      <el-col :span="12">
+        <span>所属项目：</span>
+        <span class="item-value">{{reportInfo.project}}</span>
+      </el-col>
+      <el-col :span="12">
+        <span>测试负责人：</span>
+        <span class="item-value">{{reportInfo.principal}}</span>
+      </el-col>
+    </el-row>
+
+    <el-row type="flex" justify="space-between">
+      <el-col :span="12">
+        <span>开始时间：</span>
+        <span class="item-value">{{reportInfo.startTime}}</span>
+      </el-col>
+      <el-col :span="12">
+        <span>结束时间：</span>
+        <span class="item-value">{{reportInfo.endTime}}</span>
+      </el-col>
+    </el-row>
+
+    <el-row type="flex" justify="space-between">
+      <el-col :span="12">
+        <span>测试执行人：</span>
+        <span v-for="item in reportInfo.executors" :key="item">{{item}}</span>
+      </el-col>
+    </el-row>
+
+  </common-component>
+
+</template>
+
+<script>
+    import CommonComponent from "./CommonComponent";
+    export default {
+      name: "BaseInfoComponent",
+      components: {CommonComponent},
+      data() {
+        return {
+        }
+      },
+      props: {
+        reportInfo: {
+          type: Object,
+          default() {
+            return {
+              project: '项目名称',
+              principal: '由丽媛',
+              executors: ['由丽媛','王振','陈建星'],
+              startTime: '2020-6-18',
+              endTime: '2020-6-18'
+            }
+          }
+        }
+      }
+    }
+</script>
+
+<style scoped>
+
+  span {
+    margin-right: 5px;
+    display: inline-block;
+  }
+
+  .el-col span:first-child {
+    font-weight: bold;
+    width: 100px;
+  }
+
+  .el-row {
+    height: 60px;
+  }
+
+</style>
diff --git a/frontend/src/business/components/settings/workspace/components/CommonComponent.vue b/frontend/src/business/components/settings/workspace/components/CommonComponent.vue
new file mode 100644
index 0000000000..6bd02f0789
--- /dev/null
+++ b/frontend/src/business/components/settings/workspace/components/CommonComponent.vue
@@ -0,0 +1,43 @@
+<template>
+  <el-card class="template-component">
+
+    <template v-slot:header>
+      <slot name="header">
+        <span class="title">{{title}}</span>
+      </slot>
+    </template>
+
+    <el-main>
+
+      <slot></slot>
+
+    </el-main>
+
+  </el-card>
+
+</template>
+
+<script>
+    export default {
+      name: "CommonComponent",
+      data() {
+        return {
+
+        }
+      },
+      props: {
+        title: {
+          type: String,
+          default: '标题'
+        }
+      }
+    }
+</script>
+
+<style scoped>
+
+  .el-main {
+    min-height: 200px;
+  }
+
+</style>
diff --git a/frontend/src/business/components/settings/workspace/components/TestCaseReportTemplateEdit.vue b/frontend/src/business/components/settings/workspace/components/TestCaseReportTemplateEdit.vue
index c7d32cefff..99a47d2784 100644
--- a/frontend/src/business/components/settings/workspace/components/TestCaseReportTemplateEdit.vue
+++ b/frontend/src/business/components/settings/workspace/components/TestCaseReportTemplateEdit.vue
@@ -67,6 +67,11 @@
                     :list="previews"
                     group="people"
                     @change="log">
+
+                    <base-info-component/>
+                    <test-result-component/>
+                    <test-result-chart-component/>
+
                     <el-card class="template-component" v-for="item in previews" :key="item.id">
 
                       <template v-slot:header>
@@ -99,11 +104,17 @@
 
   import draggable from 'vuedraggable';
   import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
+  import BaseInfoComponent from "./BaseInfoComponent";
+  import TestResultComponent from "./TestResultComponent";
+  import TestResultChartComponent from "./TestResultChartComponent";
 
   let idGlobal = 8;
     export default {
       name: "TestCaseReportTemplateEdit",
       components: {
+        TestResultChartComponent,
+        TestResultComponent,
+        BaseInfoComponent,
         draggable
       },
       data() {
@@ -114,10 +125,10 @@
           name: '',
           type: 'edit',
           components: [
-            { name: "dog 1", id: 1 , type: 'system'},
-            { name: "dog 2", id: 2 , type: 'custom'},
-            { name: "dog 3", id: 3 ,type: 'system'},
-            { name: "dog 4", id: 4 ,type: 'system'}
+            { name: "基础信息", id: 1 , type: 'system'},
+            { name: "测试结果", id: 2 , type: 'system'},
+            { name: "测试结果分布", id: 3 ,type: 'system'},
+            { name: "自定义模块", id: 4 ,type: 'custom'}
           ],
           previews: [
             { name: "cat 5", id: 5 },
@@ -252,5 +263,8 @@
     height: 100%;
   }
 
+  .template-component {
+    font-size: 16px;
+  }
 
 </style>
diff --git a/frontend/src/business/components/settings/workspace/components/TestResultChartComponent.vue b/frontend/src/business/components/settings/workspace/components/TestResultChartComponent.vue
new file mode 100644
index 0000000000..07b8667a9f
--- /dev/null
+++ b/frontend/src/business/components/settings/workspace/components/TestResultChartComponent.vue
@@ -0,0 +1,67 @@
+<template>
+
+  <common-component :title="'测试结果统计'">
+
+    <template>
+
+      <ms-pie-chart :text="'测试结果统计图'" :name="'测试结果'" :data="charData"/>
+
+    </template>
+
+  </common-component>
+
+</template>
+
+<script>
+    import CommonComponent from "./CommonComponent";
+    import MsPieChart from "../../../common/components/MsPieChart";
+
+    export default {
+      name: "TestResultChartComponent",
+      components: {MsPieChart, CommonComponent},
+      data() {
+        return {
+          charData: [
+            {
+              value:235, name:'通过',
+              itemStyle: {
+                color: '#67C23A'
+              }
+            },
+            {
+              value:274, name:'阻塞',
+              itemStyle: {
+                color: '#E6A23C'
+              }
+            },
+            {
+              value:310, name:'失败',
+              itemStyle: {
+                color: '#F56C6C'
+              }
+            },
+            {
+              value:335, name:'跳过',
+              itemStyle: {
+                color: '#909399'
+              }
+            },
+            {
+              value:400, name:'未完成',
+              itemStyle: {
+                color: 'lightskyblue'
+              }
+            }
+          ]
+        }
+      }
+    }
+</script>
+
+<style scoped>
+
+  .echarts {
+    margin: 0 auto;
+  }
+
+</style>
diff --git a/frontend/src/business/components/settings/workspace/components/TestResultComponent.vue b/frontend/src/business/components/settings/workspace/components/TestResultComponent.vue
new file mode 100644
index 0000000000..c64ea50889
--- /dev/null
+++ b/frontend/src/business/components/settings/workspace/components/TestResultComponent.vue
@@ -0,0 +1,76 @@
+<template>
+
+  <common-component :title="'测试结果'">
+
+    <template>
+      <el-table
+        :data="testResults"
+        stripe
+        style="width: 100%">
+        <el-table-column
+          prop="module"
+          :label="'模块'"
+          width="180">
+        </el-table-column>
+        <el-table-column
+          prop="caseCount"
+          :label="'用例数'"
+          width="180">
+        </el-table-column>
+        <el-table-column
+          prop="passRate"
+          :label="'通过率'">
+        </el-table-column>
+        <el-table-column
+          prop="flawCount"
+          :label="'缺陷数'">
+        </el-table-column>
+      </el-table>
+    </template>
+
+  </common-component>
+
+</template>
+
+<script>
+    import CommonComponent from "./CommonComponent";
+    export default {
+      name: "TestResultComponent",
+      components: {CommonComponent},
+      data() {
+        return {
+        }
+      },
+      props: {
+        testResults: {
+          type: Array,
+          default() {
+            return [
+              {
+                module: '模块1',
+                caseCount: '14',
+                passRate: 10.8,
+                flawCount: 3
+              },
+              {
+                module: '模块2',
+                caseCount: '24',
+                passRate: 40,
+                flawCount: 6
+              },
+              {
+                module: '模块3',
+                caseCount: '50',
+                passRate: 76.9,
+                flawCount: 8
+              }
+            ]
+          }
+        }
+      }
+    }
+</script>
+
+<style scoped>
+
+</style>