数据大盘

src/views/dataBigManage/components/dataItem/index.vue

@@ -1,16 +1,17 @@
 <template>
-  <div v-if="item" class="dataItem flex-center-start" :style="{ background: item.bgColor, padding: item.padding, alignItems: item.type === 'circle' && 'baseline' }">
-    <div v-if="item.type === 'circle'" class="circle" :style="{ background: item.color }" />
-    <addIcon v-else :inner-color="item.innerColor" :out-color="item.outColor" />
-    <div class="textWord ellipsis">
-      <div>
-        <span :style="{color: item.labelColor ? item.labelColor : '#666'}">{{ item.label }}</span>
-        <span class="title isHove">{{ item.title }}</span>
-        <span>{{ item.titleUnit }}</span>
-        <span v-if="item.remark" class="remark">（{{ item.remark }}）</span>
-      </div>
-      <!-- <div class="ellipsis" v-html="subTitle" /> -->
-      <div class="subTitleName">
+  <div class="dataItem" :style="{ background: item.bgColor, padding: item.padding, alignItems: item.type === 'circle' && 'baseline' }">
+    <div v-if="item" class=" flex-center-start">
+      <div v-if="item.type === 'circle'" class="circle" :style="{ background: item.color }" />
+      <addIcon v-else :inner-color="item.innerColor" :out-color="item.outColor" />
+      <div class="textWord ellipsis">
+        <div>
+          <span :style="{color: item.labelColor ? item.labelColor : '#666'}">{{ item.label }}</span>
+          <span class="title isHove">{{ item.title }}</span>
+          <span>{{ item.titleUnit }}</span>
+          <span v-if="item.remark" class="remark">（{{ item.remark }}）</span>
+        </div>
+        <!-- <div class="ellipsis" v-html="subTitle" /> -->
+        <div class="subTitleName">
         <span v-if="item.subTitleUnit === 'rate'">
           <span>环比：</span>
           <span :class="Number(item.subTitle) > 0 ? 'item-up isHove' : 'item-down isHove'">
@@ -19,10 +20,17 @@
             {{ item.subTitle }}%
           </span>
         </span>
-        <span v-else style="font-weight: 600" v-html="item.subTitle" />
+          <span v-else style="font-weight: 600" v-html="item.subTitle" />
+        </div>
+      </div>
+    </div>
+    <div v-if="item.subCountList" class="subCountList">
+      <div v-for="(subItem, subItemIndex) in item.subCountList" :key="subItemIndex" class="subCountItem" @click.stop="$emit('subCountListClick', subItem)">
+        <div>{{ subItem.label }}:&nbsp;{{ subItem.countStr }}</div>
       </div>
     </div>
   </div>
+
 </template>
 <script>
 import addIcon from '@/components/addIcon'
@@ -79,5 +87,17 @@ export default {
       }
     }
   }
+  .subCountList {
+    font-size: 12px;
+    color: #666;
+    font-weight: 500;
+    margin-top: 10px;
+    .subCountItem {
+      margin-bottom: 1px;
+      &:last-child{
+        margin-bottom: 0;
+      }
+    }
+  }
 }
 </style>

src/views/dataBigManage/components/qualityModule/index.vue

@@ -8,17 +8,35 @@
       <div class="itemBox onlineProblem" style="height: 470px">
         <div class="titleLevel3 mb10">线上问题</div>
         <el-row :gutter="10">
+          <el-col :span="11">
+            <el-row
+              v-for="(item, index) in [...mainData.onlineProblemList || []].filter((item, itemIndex)=> itemIndex !== 2)"
+              :key="index"
+              :span="12"
+              class="mb10"
+            >
+              <div
+                :style="{ cursor: item.label === '新增问题' && 'pointer'}"
+                @click.stop="onDetial('线上问题', item)"
+              >
+                <dataItem :item="item" />
+              </div>
+            </el-row>
+          </el-col>
+          <!-- 20210712日常: http://wiki.intra.xiaojukeji.com/pages/viewpage.action?pageId=629812523 -->
           <el-col
-            v-for="(item, index) in mainData.onlineProblemList"
-            :key="index"
-            :span="12"
+            v-if="mainData.onlineProblemList && mainData.onlineProblemList[2]"
+            :span="13"
             class="mb10"
           >
-            <div
-              :style="{ cursor: item.label == '新增问题' && 'pointer'}"
-              @click.stop="onDetial('线上问题', item)"
-            >
-              <dataItem :item="item" />
+            <div @click.stop="onDetial('线上问题', mainData.onlineProblemList[2])">
+              <dataItem
+                :item="mainData.onlineProblemList[2]"
+                @subCountListClick="(subCountItem) => onDetial('线上问题', {
+                  ...mainData.onlineProblemList[2],
+                  subCountItem
+                })"
+              />
             </div>
           </el-col>
         </el-row>
@@ -297,7 +315,8 @@ export default {
     },
     // 组织线上问题表数据
     getOnlineProblemList() {
-      const { ImprovementsOverRate, depleteUnavailableTime, newOnlineProblems, onlineBreakRate } = this.datas.onlineProblemList
+      const { ImprovementsOverRate, // depleteUnavailableTime,
+        newOnlineProblems, onlineBreakRate } = this.datas.onlineProblemList
       return [
         {
           ...this.redObj,
@@ -308,15 +327,15 @@ export default {
           'subTitle': newOnlineProblems.chainRatio,
           'IdList': newOnlineProblems.idList
         },
-        {
-          ...this.yellowObj,
-          'label': depleteUnavailableTime.label,
-          'title': depleteUnavailableTime.countStr,
-          'titleUnit': '分',
-          'subTitleUnit': 'rate',
-          'subTitle': depleteUnavailableTime.chainRatio,
-          'IdList': depleteUnavailableTime.IdList
-        },
+        // {
+        //   ...this.yellowObj,
+        //   'label': depleteUnavailableTime.label,
+        //   'title': depleteUnavailableTime.countStr,
+        //   'titleUnit': '分',
+        //   'subTitleUnit': 'rate',
+        //   'subTitle': depleteUnavailableTime.chainRatio,
+        //   'IdList': depleteUnavailableTime.IdList
+        // },
         {
           ...this.purpleObj,
           'label': onlineBreakRate.label,
@@ -327,13 +346,14 @@ export default {
           'IdList': onlineBreakRate.IdList
         },
         {
-          ...this.greenObj,
+          ...this.yellowObj,
           'label': ImprovementsOverRate.label,
           'title': ImprovementsOverRate.countStr,
           'titleUnit': '%',
           'subTitleUnit': 'rate',
           'subTitle': ImprovementsOverRate.chainRatio,
-          'IdList': ImprovementsOverRate.IdList
+          'IdList': ImprovementsOverRate.IdList,
+          'subCountList': ImprovementsOverRate.subCountList
         }
       ]
     },