未完成

src/api/qualityCenter.js

@@ -20,19 +20,19 @@ export function getDepartment(data) {
 }
 
 // 上线数据
-export function getOnlineInfo(data) {
+export function getOnlineInfo(params) {
   return request({
     url: qualityUrl + '/api/online-process/data-info',
     method: 'get',
-    data
+    params
   })
 }
 
 // 大盘数据
-export function getOnlineAllCount(data) {
+export function getOnlineAllCount(params) {
   return request({
     url: qualityUrl + '/api/online-process/data-all-count',
     method: 'get',
-    data
+    params
   })
 }

src/router/index.js

@@ -408,13 +408,6 @@ export const constantRoutes = [
     // hidden: true,
     meta: { title: '质量度量', icon: 'rule' },
     children: [
-      {
-        path: 'qualityMarket',
-        name: '质量大盘',
-        // hidden: true,
-        component: () => import('@/views/quality/qualityMarket.vue'),
-        meta: { title: '质量大盘' }
-      },
       {
         path: 'qualityMarket',
         name: '质量大盘',

src/views/quality/qualityMarket.vue

@@ -1,11 +1,10 @@
-
 <template>
   <div id="init-window" style="position:relative">
     <router-view />
     <div style="position: absolute;width: 100%;">
-      <el-container class="set-background">
+      <el-container v-loading="loadingOnlineProcess" 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 :default-active="activeIndex" 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>
@@ -19,70 +18,69 @@
         </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-tree :data="businessData" highlight-current :props="defaultProps" icon-class="el-icon-lollipop" 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 :default-active="activeIndexSecondary" active-text-color="#409EFF" mode="horizontal" @select="handleSelectSecondary">
               <el-menu-item index="3">质量大盘</el-menu-item>
             </el-menu>
             <!-- 上线过程 -->
             <h4>1.上线过程</h4>
             <el-table
-              :data="tableData"
+              :data="[onlineProcess]"
               border
               style="width: 100%"
             >
               <el-table-column
-                prop="date"
+                prop="totalOnlineNum"
                 label="上线次数"
                 style="width:50%;"
                 align="center"
               />
               <el-table-column
-                prop="name"
+                prop="noTestNum"
                 label="免提测上线数"
                 style="width:50%;"
                 align="center"
               />
             </el-table>
             <el-table
-              :data="tableData"
+              :data="[onlineProcess]"
               border
               style="width: 100%"
               class="move-border-top"
             >
               <el-table-column
-                prop="date"
                 label="回滚数据"
                 style="width:100%;"
                 align="center"
               >
                 <el-table-column
-                  prop="date"
+                  prop="rollbackNum"
                   label="回滚次数"
                   style="width:20%;"
                   align="center"
                 />
                 <el-table-column
-                  prop="date"
+                  prop="name"
                   label="免提测回滚数"
                   style="width:20%;"
                   align="center"
                 />
                 <el-table-column
-                  prop="date"
+                  prop="preRollbackNum"
                   label="预发回滚数"
                   style="width:20%;"
                   align="center"
                 />
                 <el-table-column
-                  prop="date"
+                  prop="preLess5Min"
                   label="小流量回滚数"
                   style="width:20%;"
                   align="center"
                 />
                 <el-table-column
-                  prop="date"
+                  prop="allRollbackNum"
                   label="全量回滚数"
                   style="width:20%;"
                   align="center"
@@ -90,13 +88,13 @@
               </el-table-column>
             </el-table>
             <el-table
-              :data="tableData"
+              :data="[onlineProcess]"
               border
               style="width: 100%"
               class="move-border-top"
             >
               <el-table-column
-                prop="date"
+                prop="name"
                 label="预发具备率"
                 align="center"
                 width="calc(10/9)%"
@@ -114,13 +112,13 @@
                 width="calc(10/9)%"
               />
               <el-table-column
-                prop="name"
+                prop="noTestPercent"
                 label="免提测上线占比"
                 align="center"
                 width="calc(10/9)%"
               />
               <el-table-column
-                prop="name"
+                prop="rollbackPercent"
                 label="回滚率"
                 align="center"
                 width="calc(10/9)%"
@@ -132,20 +130,20 @@
                 width="calc(10/9)%"
               />
               <el-table-column
-                prop="name"
+                prop="preRollbackPercent"
                 label="预发回滚率"
                 align="center"
                 width="calc(10/9)%"
               />
               <el-table-column
-                prop="name"
+                prop="preLess5MinPercent"
                 label="小流量回滚率"
                 align="center"
                 width="calc(10/9)%"
               />
               <el-table-column
-                prop="name"
-                label="全量回滚数"
+                prop="allRollbackPercent"
+                label="全量回滚率"
                 align="center"
                 width="calc(10/9)%"
               />
@@ -157,7 +155,7 @@
               class="move-border-top"
             >
               <el-table-column
-                prop="date"
+                prop="name"
                 label="预发停留<5min占比"
                 style="width:25%;"
                 align="center"
@@ -400,13 +398,15 @@ export default {
         address: '上海市普陀区金沙江路 1518 弄'
       }
       ],
+      onlineProcess: [],
       businessData: [],
       defaultProps: {
         children: 'child',
         label: 'name'
       },
+      loadingOnlineProcess: true,
       activeIndex: '0',
-      activeIndex1: '3',
+      activeIndexSecondary: '3',
       value1: ''
     }
   },
@@ -419,35 +419,58 @@ export default {
   methods: {
     _initWindow() {
       if (!document.getElementById('window-judge')) {
-        document.getElementById('init-window').parentNode.style.overflow = ''
+        document.getElementById('init-window').parentNode.style.overflow = 'visible'
       } else {
         document.getElementById('init-window').parentNode.style.overflow = 'hidden'
       }
     },
+    // 点击头部导航栏显示默认数据
     async _initBusinessTreeAndBeginInfo() {
+      this.loadingOnlineProcess = true
       await getBusiness().then(res => {
-        res.code === 0 ? this.businessData = res.data : ''
+        this.businessData = res.code === 0 ? res.data : ''
       })
-      const pretermitSearch = { id: this.businessData[0].id, type: 0 }
-      console.log(pretermitSearch)
+      const pretermitSearch = this.businessData[0] ? { id: this.businessData[0].id, type: 0 } : { id: '', type: 0 }
       getOnlineAllCount(pretermitSearch).then(res => {
-        console.log(res.data)
+        this.onlineProcess = res.code === 0 ? res.data : ''
+        Object.assign(this.onlineProcess,)
+        this.loadingOnlineProcess = false
       })
     },
-    initDepartmentTree() {
-      getDepartment().then(res => {
-        res.code === 0 ? this.businessData = res.data : ''
+    // 点击头部导航栏显示默认数据
+    async initDepartmentTree() {
+      this.loadingOnlineProcess = true
+      await getDepartment().then(res => {
+        this.businessData = res.code === 0 ? res.data : ''
+      })
+      const pretermitSearch = this.businessData[0] ? { id: this.businessData[0].id, type: 2 } : { id: '', type: 2 }
+      getOnlineAllCount(pretermitSearch).then(res => {
+        if (this.onlineProcess.length === 0) {
+          this.onlineProcess.push(res.code === 0 ? res.data : '')
+        } else {
+          this.onlineProcess.shift()
+          this.onlineProcess.push(res.code === 0 ? res.data : '')
+        }
+        this.loadingOnlineProcess = false
       })
     },
     handleSelect(key) {
       if (key === '0') {
-        this._initBusinessTree()
+        this._initBusinessTreeAndBeginInfo()
       } else if (key === '2') {
         this.initDepartmentTree()
       } else {
         this.errorFun()
       }
     },
+    toPercent(point) {
+      for (let a = 0; a < point.length; a++) {
+        point[a] = Number(point[a] * 100).toFixed(2) + '%'
+      }
+    },
+    handleSelectSecondary(key) {
+      console.log(key)
+    },
     handleNodeClick(data) {
       console.log(data)
     },
@@ -465,22 +488,24 @@ export default {
   .set-background
     background-color #F2F3F6
     .header
-      width 90%
+      width 95%
       background-color white
       border-radius 7px
-      margin 15px auto 25px auto
+      margin 15px auto
       display flex
       justify-content space-between
       align-items center
+    .header >>> .el-menu
+      border-bottom 0px
     .aside
-      width 170px !important
-      margin 0 0 2% 5%
+      width 17.9% !important
+      margin 0 0 2% 2.5%
       background-color white
       border-radius 7px
     .combine-table
       background-color white
       border-radius 7px
-      width 72.7%
+      width 75.7%
       margin 0 0 2% 1.5%
       flex 0 1 auto !important
     .combine-table >>> .el-menu
@@ -493,4 +518,5 @@ export default {
       font-size 10px
     .combine-table >>> .move-border-top
       border-top 0px
+      justify-content space-between
 </style>

src/views/quality/qualityProcess.vue

@@ -156,7 +156,7 @@ export default {
     .block >>> th
       background-color #F0F7FF !important
       font-size 10px
-    .block >>> .cell
+    .block >>> .el-table__body-wrapper  .cell
       font-size 10px
       white-space nowrap
       text-overflow ellipsis