Merge branch 'dev-optimization-1223' into 'release'

code reviewer:  张平：修复几个UI bug等

code reviewer:  张平：修复几个UI bug等

See merge request !1

components/bussiness/charts/chart-pie-cert.vue

@@ -18,9 +18,9 @@ export default {
     pieData: {
       type: Array,
       default: () => [
-        { value: 335, name: "优秀证书" },
-        { value: 310, name: "及格证书" },
-        { value: 234, name: "未获证" }
+        { value: 0, name: "优秀证书" },
+        { value: 0, name: "及格证书" },
+        { value: 0, name: "未获证" }
       ]
     }
   },
@@ -28,6 +28,7 @@ export default {
     return {
       pieId: 'certPieId',
       chartHeight: "1000px",
+      legendDataNotSelected: {},
       handledData: {},
       legendData: [],
       seriesData: {}
@@ -48,18 +49,30 @@ export default {
   },
   methods: {
     handlePieData(pieData) {
-      this.legendData = pieData.map( item => {
-        return item.certName
-      })
-      this.seriesData = pieData.map( item => {
-        return { name: item.certName, value: item.doneCount}
+      let legendDataNotSelected = {}, legendData = [], seriesData = [];
+      pieData.forEach( (item, i) => {
+        if(!pieData[i].doneCount) {
+          legendDataNotSelected[pieData[i].certName] = false
+        }
+        legendData.push(item.certName);
+        seriesData.push({ name: item.certName, value: item.doneCount});
       })
+      this.legendDataNotSelected = legendDataNotSelected;
+      this.legendData = legendData;
+      this.seriesData = seriesData;
+
+      // this.legendData = pieData.map( item => {
+      //   return item.certName
+      // })
+      // this.seriesData = pieData.map( item => {
+      //   return { name: item.certName, value: item.doneCount}
+      // })
     },
     // 绘制图表
     drawPie() {
       let chartPie = vm.$echarts.init(document.getElementById(vm.pieId));
       let options = {
-        color: echartColors,
+        // color: echartColors,
         tooltip: {
           trigger: "item",
           formatter: "{a} <br/>{b} : {c} ({d}%)"
@@ -71,6 +84,7 @@ export default {
           top: '30%',
           left: '60%',
           bottom: 20,
+          selected: this.legendDataNotSelected,
           data: vm.legendData, // ["优秀证书", "及格证书", "未获证"],
           textStyle: {
             fontSize: 12,
@@ -112,7 +126,7 @@ export default {
       let item = this.pieData.find(item => {
         return item.certName === name;
       });
-      return (item && item.doneCount) || "";
+      return (item && item.doneCount) || 0;
     }
   }
 };

components/bussiness/charts/chart-pie-edu.vue

@@ -19,9 +19,9 @@ export default {
     dataList: {
       type: Array,
       default: () => [
-        { value: 335, name: "优秀证书" },
-        { value: 310, name: "及格证书" },
-        { value: 234, name: "未获证" }
+        { value: 0, name: "优秀证书" },
+        { value: 0, name: "及格证书" },
+        { value: 0, name: "未获证" }
       ]
     },
     
@@ -31,6 +31,7 @@ export default {
       chartWidth: '320px',
       pieId: 'eduPieId',
       chartHeight: "1000px",
+      legendDataNotSelected: {},
       handledData: {},
       legendData: [],
       seriesData: {},
@@ -68,23 +69,37 @@ export default {
   mounted() {},
   methods: {
     handlePieData(pieData) {
-      this.legendData = pieData.map( item => {
-        return item.name
-      })
-      this.seriesData = pieData.map( item => {
-        return { name: item.name, value: item.value}
-      })
-      let count = 0
-      pieData.forEach( item => {
+      let count = 0, legendDataNotSelected = {}, legendData = [], seriesData = [];
+      pieData.forEach( (item, i) => {
+        if(!pieData[i].value) {
+          legendDataNotSelected[pieData[i].name] = false
+        }
+        legendData.push(item.name);
+        seriesData.push({ name: item.name, value: item.value});
         count += item.value;
       })
+      this.legendDataNotSelected = legendDataNotSelected;
+      this.legendData = legendData;
+      this.seriesData = seriesData;
       this.count = count;
+
+      // this.legendData = pieData.map( item => {
+      //   return item.name
+      // })
+      // this.seriesData = pieData.map( item => {
+      //   return { name: item.name, value: item.value}
+      // })
+      // let count = 0
+      // pieData.forEach( item => {
+      //   count += item.value;
+      // })
+      // this.count = count;
     },
     // 绘制图表
     drawPie() {
       let chartPie = vm.$echarts.init(document.getElementById(vm.pieId));
       let options = {
-        color: echartColors,
+        // color: echartColors,
         title: {
           text: "总人数: " + vm.count,
           top: '10%',
@@ -111,6 +126,7 @@ export default {
           top: '20%',
           left: '60%',
           bottom: 20,
+          selected: this.legendDataNotSelected,
           data: vm.legendData, // ["优秀证书", "及格证书", "未获证"],
           textStyle: {
             fontSize: 12,
@@ -152,7 +168,7 @@ export default {
       let item = this.dataList.find(item => {
         return item.name === name;
       });
-      return (item && item.value) || "";
+      return (item && item.value) || 0;
     }
   }
 };

components/bussiness/charts/chart-pie-title.vue

@@ -19,17 +19,17 @@ export default {
     pieData: {
       type: Array,
       default: () => [
-        { value: 335, name: "优秀证书" },
-        { value: 310, name: "及格证书" },
-        { value: 234, name: "未获证" }
+        { value: 0, name: "优秀证书" },
+        { value: 0, name: "及格证书" },
+        { value: 0, name: "未获证" }
       ]
     },
     dataList: {
       type: Array,
       default: () => [
-        { value: 335, name: "优秀证书" },
-        { value: 310, name: "及格证书" },
-        { value: 234, name: "未获证" }
+        { value: 0, name: "优秀证书" },
+        { value: 0, name: "及格证书" },
+        { value: 0, name: "未获证" }
       ]
     },
   },
@@ -38,6 +38,7 @@ export default {
       chartWidth: '320px',
       pieId: "titlePieId",
       chartHeight: "1000px",
+      legendDataNotSelected: {},
       handledData: {},
       legendData: [],
       seriesData: {},
@@ -74,23 +75,37 @@ export default {
   mounted() {},
   methods: {
     handlePieData(pieData) {
-      this.legendData = pieData.map(item => {
-        return item.name;
-      });
-      this.seriesData = pieData.map(item => {
-        return { name: item.name, value: item.value };
-      });
-      let count = 0
-      pieData.forEach( item => {
+      let count = 0, legendDataNotSelected = {}, legendData = [], seriesData = [];
+      pieData.forEach( (item, i) => {
+        if(!pieData[i].value) {
+          legendDataNotSelected[pieData[i].name] = false
+        }
+        legendData.push(item.name);
+        seriesData.push({ name: item.name, value: item.value});
         count += item.value;
       })
+      this.legendDataNotSelected = legendDataNotSelected;
+      this.legendData = legendData;
+      this.seriesData = seriesData;
       this.count = count;
+
+      // this.legendData = pieData.map(item => {
+      //   return item.name;
+      // });
+      // this.seriesData = pieData.map(item => {
+      //   return { name: item.name, value: item.value };
+      // });
+      // let count = 0
+      // pieData.forEach( item => {
+      //   count += item.value;
+      // })
+      // this.count = count;
     },
     // 绘制图表
     drawPie() {
       let chartPie = vm.$echarts.init(document.getElementById(vm.pieId));
       let options = {
-        color: echartColors,
+        // color: echartColors,
         title: {
           text: "总人数: " + vm.count,
           top: '10%',
@@ -118,6 +133,7 @@ export default {
           top: '20%',
           left: "60%",
           bottom: 20,
+          selected: this.legendDataNotSelected,
           data: vm.legendData, // ["优秀证书", "及格证书", "未获证"],
           textStyle: {
             fontSize: 12,
@@ -159,7 +175,7 @@ export default {
       let item = this.dataList.find(item => {
         return item.name === name;
       });
-      return (item && item.value) || "";
+      return (item && item.value) || 0;
     }
   }
 };

components/bussiness/charts/chart-pie.vue

@@ -45,6 +45,7 @@ export default {
     return {
       chartHeight: "1000px",
       handledData: {},
+      legendDataNotSelected: {},
       legendData: [],
       seriesData: {},
       isShow: true
@@ -78,12 +79,23 @@ export default {
   },
   methods: {
     handlePieData(pieData) {
-      this.legendData = pieData.map( item => {
-        return item.certName
-      })
-      this.seriesData = pieData.map( item => {
-        return { name: item.certName, value: item.doneCount}
+      let legendDataNotSelected = {}, legendData = [], seriesData = [];
+      pieData.forEach( (item, i) => {
+        if(!pieData[i].doneCount) {
+          legendDataNotSelected[pieData[i].certName] = false
+        }
+        legendData.push(item.certName);
+        seriesData.push({ name: item.certName, value: item.doneCount});
       })
+      this.legendDataNotSelected = legendDataNotSelected;
+      this.legendData = legendData;
+      this.seriesData = seriesData;
+      // this.legendData = pieData.map( item => {
+      //   return item.certName
+      // })
+      // this.seriesData = pieData.map( item => {
+      //   return { name: item.certName, value: item.doneCount}
+      // })
     },
     // 绘制图表
     drawPie() {
@@ -91,7 +103,7 @@ export default {
         chartPie = vm.$echarts.init(document.getElementById(vm.id));
       }
       options = {
-        color: echartColors,
+        // color: echartColors,
         tooltip: {
           trigger: "item",
           // formatter: "{a} <br/>{b} : {c} ({d}%)"
@@ -102,9 +114,10 @@ export default {
           type: "scroll",
           orient: "vertical",
           // orient:'horizontal',
-          top: '30%',
+          top: '25%',
           left: '60%',
           bottom: 20,
+          selected: this.legendDataNotSelected,
           data: vm.legendData, // ["优秀证书", "及格证书", "未获证"],
           textStyle: {
             fontSize: 12,
@@ -145,7 +158,7 @@ export default {
       let item = this.pieData.find(item => {
         return item.certName === name;
       });
-      return (item && item.doneCount) || "";
+      return (item && item.doneCount) || 0;
     }
   }
 };

components/bussiness/course-times-list.vue

@@ -6,17 +6,22 @@
       <li>课程时长</li>
       <li>人均学习时长</li>
     </ul>
-    <ul class="list">
+    <ul v-if="dataList.length" class="list">
       <li v-for="(item, index) in dataList" :key="index">
         <span>{{item.courseName | shortName}}</span>
         <span>{{item.courseTime | convert}}</span>
         <span>{{item.averageTime | convert}}</span>
       </li>
     </ul>
+    <NoContent v-show="!dataList.length"></NoContent>
   </div>
 </template>
 <script>
+import NoContent from "@/components/bussiness/no-content";
 export default {
+  components: {
+    NoContent
+  },
   props: {
     dataList: {
       type: Array,

components/bussiness/exam-list.vue

@@ -5,16 +5,21 @@
       <li>考试名</li>
       <li>参与通过率</li>
     </ul>
-    <ul class="list">
+    <ul v-if="dataList.length" class="list">
       <li v-for="(item, index) in dataList" :key="index">
         <span>{{item.examName | shortName}}</span>
         <span>{{(item.joinRate * 100).toFixed(1)}}%</span>
       </li>
     </ul>
+    <NoContent v-show="!dataList.length"></NoContent>
   </div>
 </template>
 <script>
+import NoContent from "@/components/bussiness/no-content";
 export default {
+  components: {
+    NoContent
+  },
   props: {
     dataList: {
       type: Array,

components/bussiness/exam-score-list.vue

@@ -6,19 +6,22 @@
       <li>考试分数(分)</li>
       <li>考试人数(个)</li>
     </ul>
-    <ul class="list">
+    <ul v-if="dataList.length" class="list">
       <li v-for="(item, index) in dataList" :key="index">
         <span>{{item.timesStr}}</span>
         <span>{{item.count}}</span>
       </li>
     </ul>
+    <NoContent v-show="!dataList.length"></NoContent>
   </div>
 </template>
 <script>
 import TipsInfo from '@/components/bussiness/tips-info'
+import NoContent from "@/components/bussiness/no-content";
 export default {
   components: {
-    TipsInfo
+    TipsInfo,
+    NoContent
   },
   props: {
     dataList: {

components/bussiness/exam-times-list.vue

@@ -6,19 +6,22 @@
       <li>考试次数(次)</li>
       <li>考试人数(个)</li>
     </ul>
-    <ul class="list">
+    <ul v-if="dataList.length" class="list">
       <li v-for="(item, index) in dataList" :key="index">
         <span>{{item.times}}</span>
         <span>{{item.count}}</span>
       </li>
     </ul>
+    <NoContent v-show="!dataList.length"></NoContent>
   </div>
 </template>
 <script>
 import TipsInfo from '@/components/bussiness/tips-info'
+import NoContent from "@/components/bussiness/no-content";
 export default {
   components: {
-    TipsInfo
+    TipsInfo,
+    NoContent
   },
   props: {
     dataList: {

components/bussiness/ranking-item-days.vue

 <!-- 完成天数排名组件 -->
 <template>
-  <ul class="rank-item-days">
-    <li v-for="(item, index) in rankList" :key="index">
-      <div class="order">
-        <img v-if="index === 0 || index === 1 || index === 2" :src="getRankImgUrl(index)" alt="">
-        <span v-else>{{index + 1}}</span>
-      </div>
-      <div class="content">
-        <p class="desc-3">{{item.subName | shortName}}</p>
-        <!-- <p class="desc-2">完成人数 8860 | 参与人数 101</p> -->
-      </div>
-      <div class="ratio">
-        <p class="desc-1">{{(item.costTime || 0).toFixed(1) }}天</p>
-        <p class="desc-2">完成天数</p>
-      </div>
-    </li>
-  </ul>
+  <div>
+    <ul v-if="rankList.length" class="rank-item-days">
+      <li v-for="(item, index) in rankList" :key="index">
+        <div class="order">
+          <img v-if="index === 0 || index === 1 || index === 2" :src="getRankImgUrl(index)" alt="">
+          <span v-else>{{index + 1}}</span>
+        </div>
+        <div class="content">
+          <p class="desc-3">{{item.subName | shortName}}</p>
+          <!-- <p class="desc-2">完成人数 8860 | 参与人数 101</p> -->
+        </div>
+        <div class="ratio">
+          <p class="desc-1">{{(item.costTime || 0).toFixed(1) }}天</p>
+          <p class="desc-2">完成天数</p>
+        </div>
+      </li>
+    </ul>
+    <NoContent v-show="!rankList.length"></NoContent>
+  </div>
+
 </template>
 <script>
+import NoContent from "@/components/bussiness/no-content";
 export default {
+  components: {
+    NoContent
+  },
   props: {
     rankList: {
       type: Array,

components/bussiness/ranking-item.vue

 <!-- 培训情况排名组件 -->
 <template>
   <div>
-    <ul class="rank-item">
+    <ul v-if="rankList.length" class="rank-item">
       <li v-for="(item, index) in rankList" :key="index">
         <div class="order">
           <img v-if="index === 0 || index === 1 || index === 2" :src="getRankImgUrl(index)" alt />
@@ -17,10 +17,15 @@
         </div>
       </li>
     </ul>
+    <NoContent v-if="!rankList.length"></NoContent>
   </div>
 </template>
 <script>
+import NoContent from "@/components/bussiness/no-content";
 export default {
+  components: {
+    NoContent
+  },
   props: {
     rankList: {
       type: Array,