质量大盘页面以及接口配置

src/api/qualityCenter.js

@@ -0,0 +1,38 @@
+import request from '@/utils/request'
+import { qualityUrl } from '@/apiConfig/api'
+
+// 业务线树获取
+export function getBusiness(data) {
+  return request({
+    url: qualityUrl + '/api/business-line/all',
+    method: 'get',
+    data
+  })
+}
+
+// 部门数据树获取
+export function getDepartment(data) {
+  return request({
+    url: qualityUrl + '/api/department/all',
+    method: 'get',
+    data
+  })
+}
+
+// 上线数据
+export function getOnlineInfo(data) {
+  return request({
+    url: qualityUrl + '/api/online-process/data-info',
+    method: 'get',
+    data
+  })
+}
+
+// 大盘数据
+export function getOnlineAllCount(data) {
+  return request({
+    url: qualityUrl + '/api/online-process/data-all-count',
+    method: 'get',
+    data
+  })
+}

src/apiConfig/api.js

@@ -2,4 +2,6 @@
 export const mockUrl = 'http://10.179.24.176:8980' // 线下
 // export const mockUrl = 'http://10.179.24.123:8980' // 线上
 
-// export const mockUrl = 'http://172.23.162.48:8980' // 美双姐本地
+// export const mockUrl = 'http://172.23.162.48:8980' // 美双姐本地
+
+export const qualityUrl = 'http://10.179.209.19:8898' // 质量度量

src/router/index.js

@@ -398,22 +398,38 @@ export const constantRoutes = [
     ]
   },
 
-  { path: '*', redirect: '/404', hidden: true },
+  // { path: '*', redirect: '/404', hidden: true },
 
   {
     path: '/quality',
     component: Layout,
-    redirect: '/quality/qualityMeasurement.vue',
+    redirect: '/quality/qualityMarket',
     name: '质量度量',
     // hidden: true,
     meta: { title: '质量度量', icon: 'rule' },
     children: [
       {
-        path: 'qualityMeasurement',
-        name: '质量度量',
+        path: 'qualityMarket',
+        name: '质量大盘',
         // hidden: true,
-        component: () => import('@/views/quality/qualityMeasurement.vue'),
-        meta: { title: '质量度量', icon: 'rule' }
+        component: () => import('@/views/quality/qualityMarket.vue'),
+        meta: { title: '质量大盘' }
+      },
+      {
+        path: 'qualityMarket',
+        name: '质量大盘',
+        // hidden: true,
+        component: () => import('@/views/quality/qualityMarket.vue'),
+        meta: { title: '质量大盘' },
+        children: [
+          {
+            path: 'qualityProcess',
+            name: '上线过程',
+            hidden: true,
+            component: () => import('@/views/quality/qualityProcess.vue'),
+            meta: { title: '上线过程' }
+          }
+        ]
       }
     ]
   }

src/views/quality/qualityMarket.vue

@@ -0,0 +1,496 @@
+
+<template>
+  <div id="init-window" style="position:relative">
+    <router-view />
+    <div style="position: absolute;width: 100%;">
+      <el-container class="set-background">
+        <el-header class="header">
+          <el-menu :default-active="activeIndex" class="el-menu-demo" active-text-color="#409EFF" mode="horizontal" @select="handleSelect">
+            <el-menu-item index="0">业务线数据</el-menu-item>
+            <el-menu-item index="2">部门数据</el-menu-item>
+          </el-menu>
+          <el-date-picker
+            v-model="value1"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+          />
+        </el-header>
+        <el-container>
+          <el-aside class="aside">
+            <el-tree :data="businessData" :props="defaultProps" icon-class="el-icon-watermelon" style="margin-top:20px" @node-click="handleNodeClick" />
+          </el-aside>
+          <el-main class="combine-table">
+            <el-menu :default-active="activeIndex1" class="el-menu-demo" active-text-color="#409EFF" mode="horizontal" @select="handleSelect">
+              <el-menu-item index="3">质量大盘</el-menu-item>
+            </el-menu>
+            <!-- 上线过程 -->
+            <h4>1.上线过程</h4>
+            <el-table
+              :data="tableData"
+              border
+              style="width: 100%"
+            >
+              <el-table-column
+                prop="date"
+                label="上线次数"
+                style="width:50%;"
+                align="center"
+              />
+              <el-table-column
+                prop="name"
+                label="免提测上线数"
+                style="width:50%;"
+                align="center"
+              />
+            </el-table>
+            <el-table
+              :data="tableData"
+              border
+              style="width: 100%"
+              class="move-border-top"
+            >
+              <el-table-column
+                prop="date"
+                label="回滚数据"
+                style="width:100%;"
+                align="center"
+              >
+                <el-table-column
+                  prop="date"
+                  label="回滚次数"
+                  style="width:20%;"
+                  align="center"
+                />
+                <el-table-column
+                  prop="date"
+                  label="免提测回滚数"
+                  style="width:20%;"
+                  align="center"
+                />
+                <el-table-column
+                  prop="date"
+                  label="预发回滚数"
+                  style="width:20%;"
+                  align="center"
+                />
+                <el-table-column
+                  prop="date"
+                  label="小流量回滚数"
+                  style="width:20%;"
+                  align="center"
+                />
+                <el-table-column
+                  prop="date"
+                  label="全量回滚数"
+                  style="width:20%;"
+                  align="center"
+                />
+              </el-table-column>
+            </el-table>
+            <el-table
+              :data="tableData"
+              border
+              style="width: 100%"
+              class="move-border-top"
+            >
+              <el-table-column
+                prop="date"
+                label="预发具备率"
+                align="center"
+                width="calc(10/9)%"
+              />
+              <el-table-column
+                prop="name"
+                label="有预发不走预发占比"
+                align="center"
+                width="calc(10/9)%"
+              />
+              <el-table-column
+                prop="name"
+                label="被动免提测率"
+                align="center"
+                width="calc(10/9)%"
+              />
+              <el-table-column
+                prop="name"
+                label="免提测上线占比"
+                align="center"
+                width="calc(10/9)%"
+              />
+              <el-table-column
+                prop="name"
+                label="回滚率"
+                align="center"
+                width="calc(10/9)%"
+              />
+              <el-table-column
+                prop="name"
+                label="免提测回滚占比"
+                align="center"
+                width="calc(10/9)%"
+              />
+              <el-table-column
+                prop="name"
+                label="预发回滚率"
+                align="center"
+                width="calc(10/9)%"
+              />
+              <el-table-column
+                prop="name"
+                label="小流量回滚率"
+                align="center"
+                width="calc(10/9)%"
+              />
+              <el-table-column
+                prop="name"
+                label="全量回滚数"
+                align="center"
+                width="calc(10/9)%"
+              />
+            </el-table>
+            <el-table
+              :data="tableData"
+              border
+              style="width: 100%"
+              class="move-border-top"
+            >
+              <el-table-column
+                prop="date"
+                label="预发停留<5min占比"
+                style="width:25%;"
+                align="center"
+              />
+              <el-table-column
+                prop="name"
+                label="小流量停留<5min占比"
+                style="width:25%;"
+                align="center"
+              />
+              <el-table-column
+                prop="name"
+                label="裸奔上线占比"
+                style="width:25%;"
+                align="center"
+              />
+              <el-table-column
+                prop="name"
+                label="紧急上线占比"
+                style="width:25%;"
+                align="center"
+              />
+            </el-table>
+            <!-- 线上问题 -->
+            <h4>2.线上问题</h4>
+            <el-table
+              :data="tableData"
+              border
+              style="width: 100%"
+            >
+              <el-table-column
+                prop="date"
+                label="上线次数"
+                width="170"
+                align="center"
+              />
+              <el-table-column
+                prop="name"
+                label="免提测上线数"
+                align="center"
+              >
+                <el-table-column
+                  prop="date"
+                  label="P0"
+                  width="calc(10/7)%"
+                  align="center"
+                />
+                <el-table-column
+                  prop="date"
+                  label="P1"
+                  width="calc(10/7)%"
+                  align="center"
+                />
+                <el-table-column
+                  prop="date"
+                  label="P2"
+                  width="calc(10/7)%"
+                  align="center"
+                />
+                <el-table-column
+                  prop="date"
+                  label="P3"
+                  width="calc(10/7)%"
+                  align="center"
+                />
+                <el-table-column
+                  prop="date"
+                  label="P4"
+                  width="calc(10/7)%"
+                  align="center"
+                />
+                <el-table-column
+                  prop="date"
+                  label="P5"
+                  width="calc(10/7)%"
+                  align="center"
+                />
+                <el-table-column
+                  prop="date"
+                  label="P6"
+                  width="calc(10/7)%"
+                  align="center"
+                />
+              </el-table-column>
+            </el-table>
+            <el-table
+              :data="tableData"
+              border
+              style="width: 100%"
+              class="move-border-top"
+            >
+              <el-table-column
+                prop="date"
+                label="未定责P5+问题"
+                style="width:25%;"
+                align="center"
+              />
+              <el-table-column
+                prop="date"
+                label="遗留P5+问题定责"
+                style="width:25%;"
+                align="center"
+              />
+              <el-table-column
+                prop="date"
+                label="线上问题处理完成率"
+                style="width:25%;"
+                align="center"
+              />
+              <el-table-column
+                prop="date"
+                label="线上问题平均处理时长(H)"
+                style="width:25%;"
+                align="center"
+              />
+            </el-table>
+            <!-- 线上缺陷 -->
+            <h4>3.线上缺陷</h4>
+            <el-table
+              :data="tableData"
+              border
+              style="width: 100%"
+            >
+              <el-table-column
+                prop="date"
+                label="提报bug数"
+                align="center"
+              />
+              <el-table-column
+                prop="name"
+                label="缺陷分级"
+                align="center"
+              >
+                <el-table-column
+                  prop="date"
+                  label="P0"
+                  width="40"
+                  align="center"
+                />
+                <el-table-column
+                  prop="date"
+                  label="P1"
+                  width="40"
+                  align="center"
+                />
+                <el-table-column
+                  prop="date"
+                  label="P2"
+                  width="40"
+                  align="center"
+                />
+                <el-table-column
+                  prop="date"
+                  label="P3"
+                  width="40"
+                  align="center"
+                />
+                <el-table-column
+                  prop="date"
+                  label="P4"
+                  width="40"
+                  align="center"
+                />
+              </el-table-column>
+              <el-table-column
+                prop="date"
+                label="缺陷阶段"
+                align="center"
+              >
+                <el-table-column
+                  prop="date"
+                  label="准入"
+                  width="49"
+                  align="center"
+                />
+                <el-table-column
+                  prop="date"
+                  label="测试"
+                  width="49"
+                  align="center"
+                />
+                <el-table-column
+                  prop="date"
+                  label="准出"
+                  width="49"
+                  align="center"
+                />
+                <el-table-column
+                  prop="date"
+                  label="预发"
+                  width="49"
+                  align="center"
+                />
+                <el-table-column
+                  prop="date"
+                  label="其他"
+                  width="49"
+                  align="center"
+                />
+                <el-table-column
+                  prop="date"
+                  label="众测"
+                  width="49"
+                  align="center"
+                />
+              </el-table-column>
+              <el-table-column
+                prop="date"
+                label="核心指标"
+                align="center"
+              >
+                <el-table-column
+                  prop="date"
+                  label="人均bug数"
+                  align="center"
+                />
+              </el-table-column>
+              <el-table-column
+                prop="date"
+                label="bug修复率"
+                align="center"
+              />
+            </el-table>
+          </el-main>
+        </el-container>
+      </el-container>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getBusiness, getDepartment, getOnlineInfo, getOnlineAllCount } from '@/api/qualityCenter'
+
+export default {
+  data() {
+    return {
+      tableData: [{
+        date: '20',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }
+      ],
+      businessData: [],
+      defaultProps: {
+        children: 'child',
+        label: 'name'
+      },
+      activeIndex: '0',
+      activeIndex1: '3',
+      value1: ''
+    }
+  },
+  created() {
+    this._initBusinessTreeAndBeginInfo()
+  },
+  mounted() {
+    this._initWindow()
+  },
+  methods: {
+    _initWindow() {
+      if (!document.getElementById('window-judge')) {
+        document.getElementById('init-window').parentNode.style.overflow = ''
+      } else {
+        document.getElementById('init-window').parentNode.style.overflow = 'hidden'
+      }
+    },
+    async _initBusinessTreeAndBeginInfo() {
+      await getBusiness().then(res => {
+        res.code === 0 ? this.businessData = res.data : ''
+      })
+      const pretermitSearch = { id: this.businessData[0].id, type: 0 }
+      console.log(pretermitSearch)
+      getOnlineAllCount(pretermitSearch).then(res => {
+        console.log(res.data)
+      })
+    },
+    initDepartmentTree() {
+      getDepartment().then(res => {
+        res.code === 0 ? this.businessData = res.data : ''
+      })
+    },
+    handleSelect(key) {
+      if (key === '0') {
+        this._initBusinessTree()
+      } else if (key === '2') {
+        this.initDepartmentTree()
+      } else {
+        this.errorFun()
+      }
+    },
+    handleNodeClick(data) {
+      console.log(data)
+    },
+    successFun() {
+      this.$notify({ title: 'Success', message: 'initialization Successfully', type: 'success', duration: 2000 })
+    },
+    errorFun() {
+      this.$notify({ title: 'Failed', message: 'initialization Failed', type: 'error', duration: 2000 })
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+  .set-background
+    background-color #F2F3F6
+    .header
+      width 90%
+      background-color white
+      border-radius 7px
+      margin 15px auto 25px auto
+      display flex
+      justify-content space-between
+      align-items center
+    .aside
+      width 170px !important
+      margin 0 0 2% 5%
+      background-color white
+      border-radius 7px
+    .combine-table
+      background-color white
+      border-radius 7px
+      width 72.7%
+      margin 0 0 2% 1.5%
+      flex 0 1 auto !important
+    .combine-table >>> .el-menu
+      border-bottom 0px
+      margin -20px 0 15px 0
+    .combine-table >>> .is-active
+      font-weight bold
+    .combine-table >>> th
+      background-color #F0F7FF !important
+      font-size 10px
+    .combine-table >>> .move-border-top
+      border-top 0px
+</style>

src/views/quality/qualityMeasurement.vue

@@ -1,7 +1,7 @@
 
 <template>
   <!-- 质量度量 -->
-  <el-container>
+  <!-- <el-container>
     <el-aside width="14%" style="margin:1%; height:100%; box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
       <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" />
     </el-aside>
@@ -222,97 +222,265 @@
         </el-tab-pane>
       </el-tabs>
     </el-main>
-  </el-container>
+  </el-container> -->
+  <div>
+    <div class="combine-table">
+      <el-table
+        :data="tableData"
+        border
+        style="width: 80%"
+      >
+        <el-table-column
+          prop="date"
+          label="上线次数"
+          style="width:50%;"
+          align="center"
+        />
+        <el-table-column
+          prop="name"
+          label="免提测上线数"
+          style="width:50%;"
+          align="center"
+        />
+      </el-table>
+      <el-table
+        :data="tableData"
+        border
+        style="width: 80%"
+        class="move-border-top"
+      >
+        <el-table-column
+          prop="date"
+          label="回滚数据"
+          style="width:100%;"
+          align="center"
+        >
+          <el-table-column
+            prop="date"
+            label="回滚次数"
+            style="width:20%;"
+            align="center"
+          />
+          <el-table-column
+            prop="date"
+            label="免提测回滚数"
+            style="width:20%;"
+            align="center"
+          />
+          <el-table-column
+            prop="date"
+            label="预发回滚数"
+            style="width:20%;"
+            align="center"
+          />
+          <el-table-column
+            prop="date"
+            label="小流量回滚数"
+            style="width:20%;"
+            align="center"
+          />
+          <el-table-column
+            prop="date"
+            label="全量回滚数"
+            style="width:20%;"
+            align="center"
+          />
+        </el-table-column>
+      </el-table>
+      <el-table
+        :data="tableData"
+        border
+        style="width: 80%"
+        class="move-border-top"
+      >
+        <el-table-column
+          prop="date"
+          label="预发具备率"
+          align="center"
+        />
+        <el-table-column
+          prop="name"
+          label="有预发不走预发占比"
+          align="center"
+          width="150"
+        />
+        <el-table-column
+          prop="name"
+          label="被动免提测率"
+          align="center"
+        />
+        <el-table-column
+          prop="name"
+          label="免提测上线占比"
+          align="center"
+          width="120"
+        />
+        <el-table-column
+          prop="name"
+          label="回滚率"
+          align="center"
+        />
+        <el-table-column
+          prop="name"
+          label="免提测回滚占比"
+          align="center"
+          width="120"
+        />
+        <el-table-column
+          prop="name"
+          label="预发回滚率"
+          align="center"
+        />
+        <el-table-column
+          prop="name"
+          label="小流量回滚率"
+          align="center"
+        />
+        <el-table-column
+          prop="name"
+          label="全量回滚数"
+          align="center"
+        />
+      </el-table>
+      <el-table
+        :data="tableData"
+        border
+        style="width: 80%"
+        class="move-border-top"
+      >
+        <el-table-column
+          prop="date"
+          label="预发停留<5min占比"
+          style="width:25%;"
+          align="center"
+        />
+        <el-table-column
+          prop="name"
+          label="小流量停留<5min占比"
+          style="width:25%;"
+          align="center"
+        />
+        <el-table-column
+          prop="name"
+          label="裸奔上线占比"
+          style="width:25%;"
+          align="center"
+        />
+        <el-table-column
+          prop="name"
+          label="紧急上线占比"
+          style="width:25%;"
+          align="center"
+        />
+      </el-table>
+    </div>
+  </div>
 </template>
 
 <script>
 // import { apiBusinessLineAll } from '@/api/qualityMeasurement.js'
 // import Json from '@/api/home.json'
 export default {
-  name: 'QualityMeasurement',
   data() {
     return {
-      bizName: '业务线',
-      bizData: '海马',
-      inputLabel: '100px',
-      statusOptionss: [],
       tableData: [{
         date: '2016-05-02',
         name: '王小虎',
-        address: '上海市普陀区金沙'
-      }],
-      formInline: {
-        user: '',
-        region: ''
-      },
-      data: [{
-        label: '一级 1',
-        children: [{
-          label: '二级 1-1',
-          children: [{
-            label: '三级 1-1-1'
-          }]
-        }]
-      }, {
-        label: '一级 2',
-        children: [{
-          label: '二级 2-1',
-          children: [{
-            label: '三级 2-1-1'
-          }]
-        }, {
-          label: '二级 2-2',
-          children: [{
-            label: '三级 2-2-1'
-          }]
-        }]
-      }, {
-        label: '一级 3',
-        children: [{
-          label: '二级 3-1',
-          children: [{
-            label: '三级 3-1-1'
-          }]
-        }, {
-          label: '二级 3-2',
-          children: [{
-            label: '三级 3-2-1'
-          }]
-        }]
-      }],
-      defaultProps: {
-        children: 'children',
-        label: 'label'
+        address: '上海市普陀区金沙江路 1518 弄'
       }
+      ]
     }
-  },
-  created() {
-    this.getNav()
-  },
-  methods: {
+  }
+  // name: 'QualityMeasurement',
+  // data() {
+  //   return {
+  //     bizName: '业务线',
+  //     bizData: '海马',
+  //     inputLabel: '100px',
+  //     statusOptionss: [],
+  //     tableData: [{
+  //       date: '2016-05-02',
+  //       name: '王小虎',
+  //       address: '上海市普陀区金沙'
+  //     }],
+  //     formInline: {
+  //       user: '',
+  //       region: ''
+  //     },
+  //     data: [{
+  //       label: '一级 1',
+  //       children: [{
+  //         label: '二级 1-1',
+  //         children: [{
+  //           label: '三级 1-1-1'
+  //         }]
+  //       }]
+  //     }, {
+  //       label: '一级 2',
+  //       children: [{
+  //         label: '二级 2-1',
+  //         children: [{
+  //           label: '三级 2-1-1'
+  //         }]
+  //       }, {
+  //         label: '二级 2-2',
+  //         children: [{
+  //           label: '三级 2-2-1'
+  //         }]
+  //       }]
+  //     }, {
+  //       label: '一级 3',
+  //       children: [{
+  //         label: '二级 3-1',
+  //         children: [{
+  //           label: '三级 3-1-1'
+  //         }]
+  //       }, {
+  //         label: '二级 3-2',
+  //         children: [{
+  //           label: '三级 3-2-1'
+  //         }]
+  //       }]
+  //     }],
+  //     defaultProps: {
+  //       children: 'children',
+  //       label: 'label'
+  //     }
+  //   }
+  // },
+  // created() {
+  //   this.getNav()
+  // },
+  // methods: {
 
-    getNav() {
-      // console.log(Json)
-      // this.$http.get('../../../static/home.json').then(function(res) { console.log(res) })
-    }
+  //   getNav() {
+  //     // console.log(Json)
+  //     // this.$http.get('../../../static/home.json').then(function(res) { console.log(res) })
+  //   }
 
-  },
-  handleNodeClick(data) {
-    console.log(data)
-  },
-  handleClick(tab, event) {
-    console.log(tab, event)
-  },
-  onSubmit() {
-    console.log('submit!')
-  }
+  // },
+  // handleNodeClick(data) {
+  //   console.log(data)
+  // },
+  // handleClick(tab, event) {
+  //   console.log(tab, event)
+  // },
+  // onSubmit() {
+  //   console.log('submit!')
+  // }
 }
 </script>
 
-<style scoped>
-.selectWidth {
+<style lang="stylus" scoped>
+/* .selectWidth {
   width: 59%;
  margin-left: -8%;
-}
+} */
+  .combine-table
+    margin 20px
+  .combine-table >>> th
+    background-color #F0F7FF !important
+    font-size 10px
+  .combine-table >>> .move-border-top
+    border-top 0px
 </style>
-

src/views/quality/qualityProcess.vue

@@ -0,0 +1,164 @@
+
+<template>
+  <div id="window-judge" class="set-background">
+    <div class="block">
+      <div style="text-align:right;">
+        <el-link type="primary">指标计算指南</el-link>
+      </div>
+      <div class="title-search-output">
+        <div>上线过程</div>
+        <div class="search-output">
+          <el-input v-model="input" style="margin-right:5px" />
+          <el-button plain type="info" style="margin-right:35px">搜索</el-button>
+          <el-button type="primary">导出</el-button>
+        </div>
+      </div>
+      <el-table
+        :data="tableData"
+        border
+        style="width: 100%"
+      >
+        <el-table-column
+          prop="date"
+          label="模块"
+          align="center"
+          width="50"
+        />
+        <el-table-column
+          prop="name"
+          label="上线单号"
+          align="center"
+          width="70"
+        />
+        <el-table-column
+          prop="name"
+          label="项目名称"
+          align="center"
+          width="70"
+        />
+        <el-table-column
+          prop="name"
+          label="上线人"
+          align="center"
+          width="60"
+        />
+        <el-table-column
+          prop="name"
+          label="是否免提测"
+          align="center"
+        />
+        <el-table-column
+          prop="name"
+          label="有预发环境/走预发环境"
+          align="center"
+        />
+        <el-table-column
+          prop="name"
+          label="上线时间"
+          align="center"
+          width="70"
+        />
+        <el-table-column
+          prop="name"
+          label="上线阶段"
+          align="center"
+          width="70"
+        />
+        <el-table-column
+          prop="name"
+          label="预发停留时长"
+          align="center"
+          width="60"
+        />
+        <el-table-column
+          prop="name"
+          label="小流量停留时长"
+          align="center"
+          width="70"
+        />
+        <el-table-column
+          prop="name"
+          label="状态"
+          align="center"
+          width="50"
+        />
+        <el-table-column
+          prop="name"
+          label="状态信息"
+          align="center"
+          width="70"
+        />
+        <el-table-column
+          prop="name"
+          label="标志信息"
+          align="center"
+          width="70"
+        />
+      </el-table>
+      <el-pagination style="margin-top:30px;" align="center" :current-page="curIndex" :page-sizes="[5, 10, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
+    </div>
+  </div>
+</template>
+
+<script>
+// import { apiBusinessLineAll } from '@/api/qualityMeasurement.js'
+// import Json from '@/api/home.json'
+export default {
+  data() {
+    return {
+      tableData: [{
+        date: '20',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }
+      ],
+      input: '',
+      curIndex: 0,
+      pageSize: 5,
+      total: 0
+    }
+  },
+  methods: {
+    handleSizeChange(size) {
+      this.pageSize = size
+      // this.getList()
+    },
+    handleCurrentChange(curIndex) {
+      this.curIndex = curIndex
+      // this.getList()
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+  .set-background
+    background-color #F2F3F6
+    display flex
+    justify-content center
+    .block
+      background-color rgba(255,255,255,1)
+      box-shadow 0px 0px 11px 0px rgba(238,240,245,1)
+      border-radius 7px
+      width 95%
+      min-height calc(100vh - 100px)
+      margin-top 25px
+      padding 29px 50px
+      margin-bottom 22px
+      .title-search-output
+        display flex
+        align-items center
+        justify-content space-between
+        margin 15px 0
+        .search-output
+          display flex
+          justify-content space-around
+    .block >>> th
+      background-color #F0F7FF !important
+      font-size 10px
+    .block >>> .cell
+      font-size 10px
+      white-space nowrap
+      text-overflow ellipsis
+      overflow hidden
+</style>