月报：增加表格列：端；部分区域添加数据拉取

src/api/qualityMonthlyReport/edit.js

@@ -140,3 +140,11 @@ export function pullDataAgain(data) {
     data
   })
 }
+
+// 获取整体概览数据
+export function getOverallOverview(reportId) {
+  return request({
+    url: projectManagementUrl + '/monthlyReport/getOverallOverview?reportId=' + reportId,
+    method: 'get'
+  })
+}

src/store/modules/monthlyReport/edit/index.js

@@ -64,7 +64,8 @@ export default {
     roleCode: 50, // 默认为用户
     reportList: [], // 默认为用户
     pageType: 'edit', // edit:(月报编辑和新建); readAll:(查看月报详情)
-    loading: false
+    loading: false,
+    clientTypeList: []
   },
   mutations: {
     // 页面基础数据赋值
@@ -87,6 +88,9 @@ export default {
       // 设置部门数据
       state.selectEnum = [...params.dependence.deptArch.children]
       setDeptArch(state.selectEnum)
+      // 设置端数据
+      state.clientTypeList = [...params.dependence.clientType]
+      setDeptArch(state.clientTypeList)
       if (subReports.length) {
         state.tabsList = []
         subReports.forEach((elm, index) => {
@@ -156,7 +160,7 @@ export default {
       const newTabsActive = setTabActive('tab_', tabsActive)
       // tabPageData => 后台源数据结构
       const oldTabPageData = reportDataBack({ ...state.tabPageData })
-      console.log(oldTabPageData)
+      // console.log(oldTabPageData)
       let newTabPageData = {}
       const reportData = state.reportData.map((elm) => {
         // 找出新页面的数据    && newTabsActive !== oldTabPageData.id
@@ -173,7 +177,7 @@ export default {
         return elm
       })
       state.reportData = [...reportData]
-      console.log(state.reportData)
+      // console.log(state.reportData)
       // 对新数据进行转换
       const { newObj, domKeys } = setReportData(
         newTabPageData.reportCatalog,
@@ -505,8 +509,13 @@ export default {
     // 设置 页面区域 下标
     SET_INDEX_TITLE(state) {
       state.tabPageData = setIndexTitle(state.tabPageData)
-    }
+    },
     // 设置拉取之后的页面数据 tabPageData
+    // 设置`端数据`
+    SET_CLIENT_TYPE_LIST(state, list) {
+      state.clientTypeList = list
+      setDeptArch(state.clientTypeList)
+    }
   },
   actions: {
     // 月报数据获取
@@ -573,6 +582,7 @@ export default {
       if (res.code === 200) {
         // 单个月报与完整月报数据梳理
         if (pageType === 'read' || pageType === 'edit') {
+          commit('SET_CLIENT_TYPE_LIST', res.data.dependence.clientType)
           commit('SET_SELECT_ENUM', res.data.dependence.deptArch.children)
           commit('SET_PAGE_DATA', res.data)
         }
@@ -724,7 +734,7 @@ export default {
       { domKey, title, subReportId, callback }
     ) {
       const tabPageData = _.cloneDeep(state.tabPageData)
-      console.log('refreshReport', domKey, title)
+      // console.log('refreshReport', domKey, title)
       const [tabKey, subTabKey] = state.subTabsActive
       const tabDataObj = {
         tabKey: '',
@@ -768,13 +778,13 @@ export default {
         }
       }
       if (state.pageType.search(/All/) > -1) {
-        console.log(state, setTabActive('tab_', state.tabsActive))
+        // console.log(state, setTabActive('tab_', state.tabsActive))
         params.subReportId = setTabActive('tab_', state.tabsActive)
       }
       if (state.pageType === 'edit') {
         params.subReportId = subReportId
       }
-      console.log(params)
+      // console.log(params)
       /**
        * 线上问题、
        */
@@ -782,12 +792,18 @@ export default {
       if (title !== '上月问题跟进' && title !== '线下缺陷') {
         if (res.data.type.search(/Table|TableAndRichText/) > -1) {
           setTableHeader(res.data.tableHeaders)
-          res.data.tableRows = arrToObj(res.data.tableRows, res.data.tableHeaders)
+          res.data.tableRows = arrToObj(
+            res.data.tableRows,
+            res.data.tableHeaders
+          )
         }
       }
       if (title.search(/上月问题跟进|发布&回滚/) > -1) {
         setTableHeader(res.data.content[0].tableHeaders)
-        res.data.content[0].tableRows = arrToObj(res.data.content[0].tableRows, res.data.content[0].tableHeaders)
+        res.data.content[0].tableRows = arrToObj(
+          res.data.content[0].tableRows,
+          res.data.content[0].tableHeaders
+        )
       }
       const setDomData = (arr) => {
         arr &&
@@ -820,7 +836,7 @@ export default {
       }
       setDomData(tabPageData.children)
       state.tabPageData = tabPageData
-      console.log(res.data, tabPageData)
+      // console.log(res.data, tabPageData)
       if (res.code === 200) {
         callback && callback()
       }

src/store/modules/monthlyReport/edit/utils.js

@@ -98,7 +98,6 @@ export function reportDataBack(obj) {
     //     }
     //   })
     // })
-    console.log(newObj)
     return newObj
   }
   return []
@@ -123,7 +122,7 @@ export function arrToObj(arr, headerList) {
       if (item) {
         obj[headerKey] = item.value
         if (displayType && obj[headerKey]) {
-          if (displayType === 'Cascader') {
+          if (displayType.search(/Cascader|CascaderSingle/) > -1) {
             obj[headerKey] = strToArr(obj[headerKey])
           }
           if (selectType && selectType === 'MultiplePeople') {
@@ -172,7 +171,7 @@ export function objToArr(obj, tableHeaders) {
           value: elm[item.headerKey] || ''
         }
         if (param.value) {
-          if (item.displayType && item.displayType === 'Cascader') {
+          if (item.displayType && item.displayType.search(/Cascader|CascaderSingle/) > -1) {
             // param.value = arrToStr(param.value)
             param.value = JSON.stringify(param.value)
           }

src/views/monthlyReport/childrenPage/editReport/components/CascaderSingle.vue

@@ -0,0 +1,98 @@
+<template>
+  <el-cascader
+    v-model="selectValue"
+    :options="selectEnum"
+    @change="changeCascader" />
+</template>
+
+<script>
+export default {
+  name: 'CascaderSingle',
+  props: {
+    value: {
+      type: [Array, String],
+      required: false,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      selectValue: this.value,
+      options: []
+    }
+  },
+  computed: {
+    selectEnum() {
+      return this.$store.state.monthlyReportEdit.clientTypeList
+    }
+  },
+  // watch: {
+  //   value() {
+  //     this.init()
+  //   }
+  // },
+  mounted() {
+    // this.selectValue = this.value
+    // this.init()
+    // console.log(this.selectEnum)
+  },
+  methods: {
+    init() {
+      if (this.value && this.value.length) {
+        this.options = []
+        this.selectValue = this.value.map((elm) => {
+          this.find(elm, 'value')
+          return `${elm}`
+        })
+        this.$forceUpdate()
+      }
+    },
+    find(id, key = 'value') {
+      const run = (arr) => {
+        for (let i = 0; i < arr.length; i++) {
+          const elm = arr[i]
+          if (key === 'value' && `${elm[key]}` === `${id}`) {
+            if (this.isHave(`${id}`) < 0) {
+              this.$set(this.options, this.options.length, elm)
+            }
+          }
+          const reg = new RegExp(id, 'i')
+          if (key === 'label' && reg.test(`${elm[key]}`)) {
+            if (this.isHave(`${id}`) < 0 && elm.valid) {
+              this.$set(this.options, this.options.length, elm)
+            }
+          }
+          if (elm.children) {
+            run(elm.children)
+          }
+        }
+      }
+      run(this.selectEnum)
+    },
+    isHave(id) {
+      // console.log(id)
+      let itemIndex = -1
+      for (let index = 0; index < this.options.length; index++) {
+        const element = this.options[index]
+        // console.log(element)
+        if (`${element.value}` === `${id}`) {
+          itemIndex = index
+        }
+      }
+      return itemIndex
+    },
+    async remoteMethod(query) {
+      // 获取部门option
+      if (query !== '') {
+        this.options = []
+        this.find(query, 'label')
+      }
+    },
+    changeCascader(value) {
+      this.$emit('input', value)
+    }
+  }
+}
+</script>
+
+<style scoped lang="less"></style>

src/views/monthlyReport/childrenPage/editReport/components/CascaderSingleInfo.vue

@@ -0,0 +1,21 @@
+<template>
+  <span v-if="teamData">
+    <span v-for="(item, index) in teamData" :key="item">
+      {{ item }}
+      <span>{{ !(index >= teamData.length - 1) ? '/' : '' }}</span>
+    </span>
+  </span>
+</template>
+
+<script type="text/javascript">
+export default {
+  name: 'CascaderSingleInfo',
+  props: {
+    teamData: {
+      type: [Array, String],
+      required: false,
+      default: null
+    }
+  }
+}
+</script>

src/views/monthlyReport/childrenPage/editReport/components/MrTable.vue

@@ -73,7 +73,7 @@
               v-else
               class="edit-wrapper"
               :style="{
-                cursor: pageDate.status < 20 ? 'pointer' : 'auto'
+                cursor: pageDate && pageDate.status < 20 ? 'pointer' : 'auto'
               }"
             >
               <!--  <div v-if="editKeys.indexOf(`${scope.row.rowKey}_${index}`) > -1">  -->
@@ -90,17 +90,11 @@
                     />
                   </div>
                   <div
-                    v-else-if="
-                      item.selectType && item.selectType === 'SinglePeople'
-                    "
-                  >
+                    v-else-if="item.selectType && item.selectType === 'SinglePeople'">
                     <searchPeople :value.sync="scope.row[item.headerKey]" />
                   </div>
                   <div
-                    v-else-if="
-                      item.selectType && item.selectType === 'MultiplePeople'
-                    "
-                  >
+                    v-else-if="item.selectType && item.selectType === 'MultiplePeople'">
                     <searchPeople
                       :value.sync="scope.row[item.headerKey]"
                       :multiple="true"
@@ -130,7 +124,6 @@
                     </el-option>
                   </el-select>
                 </div>
-
                 <el-input
                   v-else-if="item.displayType === 'Texterea'"
                   v-model="scope.row[item.headerKey]"
@@ -143,6 +136,9 @@
                   }"
                   show-word-limit
                 />
+                <div v-else-if="item.displayType === 'CascaderSingle'">
+                  <CascaderSingle v-model="scope.row[item.headerKey]" />
+                </div>
                 <div v-else-if="item.displayType === 'Cascader'">
                   <Cascader v-model="scope.row[item.headerKey]" />
                 </div>
@@ -162,6 +158,9 @@
                 <div v-if="item.displayType === 'Cascader'">
                   <CascaderInfo :team-data="scope.row[item.headerKey]" />
                 </div>
+                <div v-else-if="item.displayType === 'CascaderSingle'">
+                  <CascaderSingleInfo :team-data="scope.row[item.headerKey]" />
+                </div>
                 <div v-else-if="item.displayType === 'Select'">
                   <!-- 单个人员选择 -->
                   <div v-if="item.selectType && item.selectType === 'SinglePeople'">
@@ -228,6 +227,8 @@ import TextInfo from './TextInfo'
 import MultiplePeopleInfo from './MultiplePeopleInfo'
 import TableExpandRow from './TableExpandRow'
 import markingIssues from './markingIssues'
+import CascaderSingle from './CascaderSingle'
+import CascaderSingleInfo from './CascaderSingleInfo'
 import searchPeople from '@/components/select/searchPeople' // 人员select
 import { updateAnalyticFeedback } from '@/api/qualityMonthlyReport/edit'
 import { reportDataBack } from '@/store/modules/monthlyReport/edit/utils.js'
@@ -243,7 +244,9 @@ export default {
     MultiplePeopleInfo,
     TableExpandRow,
     markingIssues,
-    TextInfo
+    TextInfo,
+    CascaderSingle,
+    CascaderSingleInfo
   },
   props: {
     plusTableDataBottom: {
@@ -283,7 +286,7 @@ export default {
     return {
       analyticFeedback: '',
       expandRowKeys: [],
-      feedbackIndex: 'none',
+      feedbackIndex: null,
       username: localStorage.getItem('username')
     }
   },
@@ -469,6 +472,10 @@ export default {
         let obj = null
         const run = (arr) => {
           arr.forEach((elm) => {
+            if (elm.domKey === this.domKey) {
+              console.log(elm)
+              obj = _.cloneDeep(elm)
+            }
             if (elm.content.length) {
               elm.content.forEach((item) => {
                 if (item.domKey === this.domKey) {
@@ -477,6 +484,9 @@ export default {
                 }
               })
             }
+            if (elm.children.length) {
+              run(elm.children)
+            }
           })
         }
         run(tabPageData.children)
@@ -486,7 +496,7 @@ export default {
           feedbackIndex: this.feedbackIndex,
           reportCatalog: obj
         }
-        if (this.$route.query.pageType === 'readAll') {
+        if (this.$route.query.pageType === 'readAll' && obj) {
           params.subReportName = `${obj.title}`
         }
         // console.log(params)

src/views/monthlyReport/childrenPage/editReport/components/OverallOverviewOfTheClient/box.vue

@@ -0,0 +1,81 @@
+<template>
+  <el-card shadow="always" class="sub-box">
+    <div class="report-title">
+      <svg-icon class="report-icon-title" icon-class="icon-red" />
+      <span class="report-title-text">{{ title }}</span>
+    </div>
+    <div>
+      <el-tabs :value="tabsActive" @tab-click="tabClick">
+        <el-tab-pane
+          v-for="item in tabsList"
+          :key="item"
+          :label="item"
+          :name="item"
+        />
+      </el-tabs>
+      <slot />
+    </div>
+  </el-card>
+</template>
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      required: false,
+      default: '线上问题'
+    }
+  },
+  data() {
+    return {
+      tabsActive: 'APP',
+      tabsList: ['APP', '小程序', 'Webapp', 'H5']
+    }
+  },
+  methods: {
+    tabClick(tab, event) {
+      this.$emit('change', tab.name)
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.report-title {
+  position: relative;
+  padding-bottom: 20px;
+  line-height: 20px;
+  color: #333;
+
+  &::before {
+    position: absolute;
+    bottom: 0;
+    left: -20px;
+    content: '';
+    width: calc(100% + 40px);
+    border-bottom: 1px solid #e2e2e2;
+  }
+
+  .report-title-text {
+    position: relative;
+    top: -5px;
+  }
+
+  .report-icon-title {
+    color: #333333;
+    font-size: 30px;
+    margin-right: 10px;
+  }
+}
+
+/deep/ .el-tabs__active-bar {
+  display: none;
+}
+
+/deep/ .el-tabs__nav-wrap::after {
+  display: none;
+}
+/deep/.el-tabs__item{
+  padding: 0 5px;
+}
+</style>

src/views/monthlyReport/childrenPage/editReport/components/OverallOverviewOfTheClient/index.vue

@@ -0,0 +1,86 @@
+<template>
+  <div>
+    <headTitle
+      style="margin-top: 40px; margin-bottom: 10px;"
+      :title="title"
+    />
+    <div class="OverallOverviewOfTheClient">
+      <onlineQuestion />
+      <qualityProcess />
+    </div>
+  </div>
+</template>
+<script>
+import headTitle from '@/components/headTitle'
+import onlineQuestion from './onlineQuestion'
+import qualityProcess from './qualityProcess'
+
+export default {
+  components: {
+    headTitle,
+    onlineQuestion,
+    qualityProcess
+  },
+  props: {
+    title: {
+      type: String,
+      required: false,
+      default: '整体概览'
+    }
+  },
+  data() {
+    return {
+      tabsActive: 'APP',
+      tabsList: ['APP', '小程序', 'Webapp', 'H5']
+    }
+  },
+  methods: {
+    tabClick(tab, event) {
+      this.$emit('change', tab.name)
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.OverallOverviewOfTheClient {
+  display: flex;
+  > * {
+    flex: 1;
+    &:nth-child(1) {
+      margin-right: 5px;
+    }
+    &:nth-child(2) {
+      margin-left: 5px;
+    }
+  }
+  .report-title {
+    position: relative;
+    padding-bottom: 20px;
+    line-height: 20px;
+    color: #333;
+    &::before {
+      position: absolute;
+      bottom: 0;
+      left: -20px;
+      content: '';
+      width: calc(100% + 40px);
+      border-bottom: 1px solid #e2e2e2;
+    }
+    .report-title-text {
+      position: relative;
+      top: -5px;
+    }
+    .report-icon-title {
+      color: #333333;
+      font-size: 30px;
+      margin-right: 10px;
+    }
+  }
+}
+/deep/.el-tabs__active-bar{
+  display: none;
+}
+/deep/.el-tabs__nav-wrap::after{
+  display: none;
+}
+</style>

src/views/monthlyReport/childrenPage/editReport/components/OverallOverviewOfTheClient/onlineQuestion.vue

@@ -0,0 +1,26 @@
+<template>
+	<div>
+		<boxCom title="线上问题" @change="tabChange">
+			<div>线上问题：{{ active }}</div>
+		</boxCom>
+	</div>
+</template>
+<script type="text/javascript">
+import boxCom from './box'
+export default {
+  name: 'OnlineQuestion',
+  components: {
+    boxCom
+  },
+  data() {
+    return {
+      active: 'APP'
+    }
+  },
+  methods: {
+    tabChange(value) {
+      this.active = value
+    }
+  }
+}
+</script>

src/views/monthlyReport/childrenPage/editReport/components/OverallOverviewOfTheClient/qualityProcess.vue

@@ -0,0 +1,26 @@
+<template>
+	<div>
+		<boxCom title="质量流程&研发效率" @change="tabChange">
+			<div>质量流程&研发效率：{{ active }}</div>
+		</boxCom>
+	</div>
+</template>
+<script type="text/javascript">
+import boxCom from './box'
+export default {
+  name: 'OnlineQuestion',
+  components: {
+    boxCom
+  },
+  data() {
+    return {
+      active: 'APP'
+    }
+  },
+  methods: {
+    tabChange(value) {
+      this.active = value
+    }
+  }
+}
+</script>

src/views/monthlyReport/childrenPage/editReport/components/OverallOverviewOfTheServer.vue

@@ -0,0 +1,185 @@
+<template>
+  <div class="OverallOverviewOfTheServer">
+    <div>
+      <headTitle style="margin-top: 40px; margin-bottom: 10px;" title="整体概览" />
+    </div>
+    <table>
+      <tr>
+        <td class="first" colspan="1" rowspan="2">
+          <canvas
+            ref="myCanvas"
+            style="border:0px solid #d3d3d3;height: max-content;width:inherit; display: block;"
+          />
+          <span class="title1">指标</span>
+          <span class="title2">业务线</span>
+        </td>
+        <td colspan="3" class="color_1">线上质量</td>
+        <td colspan="5" class="color_2">发布</td>
+        <td colspan="6" class="color_3">线下质量及研究效率</td>
+      </tr>
+      <tr>
+        <td class="col color_1_sub">P5+</td>
+        <td class="col color_1_sub">P6</td>
+        <td class="col color_1_sub">非定级</td>
+        <td class="col color_2_sub">全量回滚数</td>
+        <td class="col color_2_sub">小流量回滚数</td>
+        <td class="col color_2_sub">裸奔上线数</td>
+        <td class="col color_2_sub">免测上线数</td>
+        <td class="col color_2_sub">上线数</td>
+        <td class="col color_3_sub">P0问题</td>
+        <td class="col color_3_sub">P1问题</td>
+        <td class="col color_3_sub">P0&P1平均修复时长</td>
+        <td class="col color_3_sub">Reopen次数</td>
+        <td class="col color_3_sub">提测延期</td>
+        <td class="col color_3_sub">发布延期</td>
+      </tr>
+      <tr v-for="(item, index) in tableList" :key="index">
+        <td>{{ item.name }}</td>
+        <td
+          v-for="(elm, elmIndex) in item.tableRow"
+          :key="elmIndex"
+          :class="{ col_red: isShowColor(elmIndex, elm) }"
+        >
+          {{ elm }}
+        </td>
+      </tr>
+    </table>
+  </div>
+</template>
+<script>
+import { getOverallOverview } from '@/api/qualityMonthlyReport/edit'
+import headTitle from '@/components/headTitle'
+
+export default {
+  name: 'OverallOverviewOfTheServer',
+  components: {
+    headTitle
+  },
+  data() {
+    return {
+      tableList: null
+    }
+  },
+  mounted() {
+    this.init()
+    this.setCanvas()
+  },
+  methods: {
+    async init() {
+      // this.$route.query.reportId
+      const res = await getOverallOverview(this.$route.query.reportId)
+      // const res = await getOverallOverview(4)
+      // console.log(res.data)
+      this.tableList = res.data
+    },
+    setCanvas() {
+      var c = this.$refs.myCanvas
+      var ctx = c.getContext('2d')
+      ctx.fillStyle = '#e9e9e9'
+      ctx.lineWidth = 2
+      ctx.strokeStyle = '#e9e9e9'
+      ctx.moveTo(0, 0)
+      ctx.lineTo(c.clientHeight * 3 + 20, c.clientWidth * 3)
+      ctx.stroke()
+    },
+    isShowColor(index, value) {
+      if (index === 0 || index === 1 || index === 3 || index === 9 || index === 12) {
+        return value > 0
+      }
+      return false
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.OverallOverviewOfTheServer {
+  margin-top: 30px;
+  table {
+    border-collapse: collapse;
+    width: 100%;
+  }
+
+  table,
+  tr,
+  td {
+    border: 1px solid #e9e9e9;
+  }
+
+  td {
+    text-align: center;
+    height: 50px; /*这里需要自己调整，根据自己的需求调整高度*/
+    position: relative;
+  }
+  td[class='first'] {
+    width: 80px;
+    min-width: 80px;
+    color: #333333;
+    background-color: rgba(214, 214, 214, 0.12);
+    font-weight: 500;
+  }
+  // td[class='first']:before {
+  //   content: '';
+  //   position: absolute;
+  //   width: 1px;
+  //   height: 104px;
+  //   top: 0;
+  //   left: 0;
+  //   background-color: #000;
+  //   display: block;
+  //   transform: rotate(-75deg);
+  //   transform-origin: top;
+  //   -ms-transform: rotate(-75deg);
+  //   -ms-transform-origin: top;
+  // }
+  // td[class='first']:after {
+  //   content: '';
+  //   position: absolute;
+  //   width: 1px;
+  //   height: 140px;
+  //   top: 0;
+  //   left: 0;
+  //   background-color: #e9e9e9;
+  //   display: block;
+  //   transform: rotate(-34deg);
+  //   transform-origin: top;
+  //   -ms-transform: rotate(-34deg);
+  //   -ms-transform-origin: top;
+  // }
+  td.col {
+    min-width: 60px;
+    // height: 67px;
+    padding: 10px;
+  }
+  .title1 {
+    position: absolute;
+    top: 12px;
+    right: 12px;
+  }
+  .title2 {
+    position: absolute;
+    bottom: 12px;
+    left: 12px;
+  }
+  .color_1 {
+    background: rgba(250, 173, 20, 0.15);
+  }
+  .color_1_sub {
+    background: rgba(250, 173, 20, 0.08);
+  }
+  .color_2 {
+    background: rgba(250, 126, 20, 0.15);
+  }
+  .color_2_sub {
+    background: rgba(250, 126, 20, 0.08);
+  }
+  .color_3 {
+    background: rgba(98, 217, 170, 0.15);
+  }
+  .color_3_sub {
+    background: rgba(98, 217, 170, 0.08);
+  }
+  .col_red {
+    color: #f5222d;
+  }
+}
+</style>

src/views/monthlyReport/childrenPage/editReport/index.vue

@@ -58,6 +58,8 @@
       </el-tabs>
       <div class="body-wrapper">
         <div class="left-wrapper">
+          <OverallOverviewOfTheServer v-if="pageType === 'hhhhh' && pageType.search(/readAll/) > -1 && tabsActive.search(/服务端/) > -1" />
+          <OverallOverviewOfTheClient v-if="pageType === 'hhhhh' && pageType.search(/readAll/) > -1 && tabsActive.search(/客户端/) > -1" />
           <div v-if="tabPageShow">
             <Core v-for="(item, index) in tabPageData.children" :key="item.domKey" :dom-index="index" :base-data="item" />
           </div>
@@ -112,6 +114,8 @@ import Affix from '@/components/affix/affix'
 import Anchor from './components/anchor'
 import Menu from './components/menu'
 import Core from './components/core'
+import OverallOverviewOfTheServer from './components/OverallOverviewOfTheServer'
+import OverallOverviewOfTheClient from './components/OverallOverviewOfTheClient/index'
 import Clickoutside from 'element-ui/src/utils/clickoutside'
 import normalDialog from '@/components/dialog/normalDialog'
 
@@ -123,6 +127,8 @@ export default {
     Anchor,
     Menu,
     Core,
+    OverallOverviewOfTheServer,
+    OverallOverviewOfTheClient,
     normalDialog
   },
   directives: { Clickoutside },