数据总览api对接

src/utils/learning/chartData.js

@@ -11,11 +11,11 @@ export function dustributeOption(legendData, seriesData) {
     label: {
       formatter: "{d}%"
     },
-    color: ['#FF9A4B', '#39AF9A', '#FFB01B'],
+    color: ['#FF9A4B', '#FFBC3D', '#39AF9A', '#3BA0FF', '#5D7092'],
     legend: {
       orient: "horizontal",
       top: "",
-      // left: "10%",
+      left: "0%",
       data: legendData
     },
     series: [
@@ -23,7 +23,7 @@ export function dustributeOption(legendData, seriesData) {
         name: "",
         type: "pie",
         radius: "60%",
-        center: ["55%", "50%"],
+        center: ["50%", "50%"],
         data: seriesData,
         itemStyle: {
           emphasis: {

src/utils/operation.js

@@ -379,7 +379,7 @@ export function getPicOption(title, legendData, colorData, seriesData) {
     },
     legend: {
       orient: "vertical",
-      top: "3%",
+      top: "center",
       right: "right",
       data: legendData
     },
@@ -396,7 +396,7 @@ export function getPicOption(title, legendData, colorData, seriesData) {
         name: "",
         type: "pie",
         radius: "55%",
-        center: ["50%", "55%"],
+        center: ["40%", "55%"],
         data: seriesData,
       }
     ]
@@ -406,12 +406,17 @@ export function getPicOption(title, legendData, colorData, seriesData) {
 export function getBarOption(xAxisData, seriesData) {
   let option = {
     title: {
-      text: "用户年龄发布",
-      x: "center",
-      top: "3%",
+      text: "人员年龄分布",
+      x: "left",
+      left: '20px',
+      top: "20px",
+    },
+    color: ['#5B8FF9'],
+    backgroundColor: '#FFFFFF',
+    tooltip: {
+      trigger: 'item',
+      formatter: "{b} : {c} "
     },
-    color: ['#3398DB'],
-    backgroundColor: '#F3F3F3',
     grid: {
       left: '3%',
       right: '4%',
@@ -424,22 +429,31 @@ export function getBarOption(xAxisData, seriesData) {
         data: xAxisData,
         axisLabel: {
           interval: 0
-        }
-        // axisTick: {
-        //   alignWithLabel: true
-        // }
+        },
+        axisTick: { // 隐藏刻度
+          show: false
+        },
+        axisLine: { //隐藏轴线
+          show: false
+        },
       }
     ],
     yAxis: [
       {
-        type: 'value'
+        type: 'value',
+        axisLine: { //隐藏轴线
+          show: false
+        },
+        axisTick: { // 隐藏刻度
+          show: false
+        },
       }
     ],
     series: [
       {
         name: '',
         type: 'bar',
-        barWidth: 30,
+        barWidth: 18,
         data: seriesData,
       }
     ]

src/views/learning/item-crowd-analysis.vue

@@ -17,10 +17,10 @@
         <div class="title">用户性别分布</div>
         <div class="sex">
           <div class="sex-item" v-for="(item , index) in sexData" :key="index">
-            <img class="sex-img" v-bind:src="item.src" />
-            <p class="sex-type">{{ item.type }}</p>
-            <p></p>
+            <!-- <img class="sex-img" v-bind:src="item.src" /> -->
+            <el-progress class="sex-img" :color="item.color" :stroke-width=12 type="circle" :percentage="item.rate"></el-progress>
             <p class="sex-num">{{ item.num }}</p>
+            <p class="sex-type">{{ item.type }}</p>
           </div>
         </div>
       </div>
@@ -125,9 +125,9 @@ export default {
           this.crowdData = res.data;
           setTimeout(function() {
             vm.educationDivision();
-            // vm.jobDivision();
-            // vm.getSexData();
-            // vm.ageDivision();
+            vm.jobDivision();
+            vm.getSexData();
+            vm.ageDivision();
           },20);
         } else {
           vm.$message(res.message);
@@ -150,36 +150,34 @@ export default {
     //用户性别分布
     getSexData() {
       let sexList = this.crowdData.sexList;
-      // if(sexList.length <3) {
-      //   this.sexData = [];
-      //   return;
-      // }
-      this.sexData = [
+      let sexData = [
         {
-          src: require("../../assets/image/man.png"),
+          color: '#1890FF',
           type: "男性",
-          num: 0
+          num: 0,
+          rate: 0,
         },
         {
-          src: require("../../assets/image/weman.png"),
+          color: '#FB5B52',
           type: "女性",
-          num: 0
+          num: 0,
+          rate: 0,
         },
         {
-          src: require("../../assets/image/question.png"),
+          color: '#5D7092',
           type: "未完善信息",
-          num: 0
+          num: 0,
+          rate: 0,
         }
       ];
-      for(let i=0;i<sexList.length;i++) {
-        if(sexList[i].name == "男") {
-          this.sexData[0].num = sexList[i].value;
-        } else if(sexList[i].name == "女") {
-          this.sexData[1].num = sexList[i].value;
-        } else {
-          this.sexData[2].num = sexList[i].value;
-        }
+      let sum = 0;
+      for(let i = 0 ; i<sexList.length; i++) {
+        sum += sexList[i].value;
+        sexData[i].num =  sexList[i].value
       }
+      sexData[0].rate = Math.floor(sexList[0].value / sum *10000) / 100;
+      sexData[1].rate = Math.floor(sexList[1].value / sum *10000) / 100;
+      vm.sexData = sexData;
     },
     educationDivision(data) {
       let myChart = echarts.init(this.$refs.education);
@@ -204,16 +202,16 @@ export default {
     },
     jobDivision(data) {
       let myChart2 = echarts.init(this.$refs.job);
-      let jobTitle = operationData.removeZero(this.crowdData.jobTitle);
+      let titleList = this.crowdData.titleList;
       let legendData = [];
       let seriesData = [];
-      let colorData = ["#FF9F7F", "#008000", "#E062AE", "#37A2DA", "#0050DC", "#67E0E3", "#8A2BE2"];
-      for (let i = 0; i < jobTitle.length; i++) {
-        legendData[i] = jobTitle[i].name;
+      let colorData = ["#3BA0FF", "#366BCB", "#39AF9A", "#FFBC3D", "#FFBC3D", "#67E0E3", "#8A2BE2"];
+      for (let i = 0; i < titleList.length; i++) {
+        legendData[i] = titleList[i].name;
+        seriesData[i] = titleList[i];
       }
-      seriesData = jobTitle;
       let option = operationData.getPicOption(
-        "用户职务分布",
+        "人员职务分布",
         legendData,
         colorData,
         seriesData
@@ -281,23 +279,22 @@ export default {
     position: relative;
     margin: 20px auto 0 auto;
     width: 1124px;
-    // background: #F0F2F5;
     overflow-x: hidden;
     .item {
       position: relative;
       float: left;
-      margin-top: 20px;
       margin-right: 20px;
       padding: 0;
       // width: 48%;
       width: 552px;
       height: 360px;
-      border: 1px solid #dedede;
+      background: #ffffff;
+      // border: 1px solid #dedede;
       .title {
         position: relative;
-        margin: 15px auto 10px auto;
+        margin-top: 20px;
+        margin-left: 20px;
         font-size: 18px;
-        text-align: center;
         font-weight: bold;
       }
       .sex {
@@ -306,23 +303,27 @@ export default {
         left: 0;
         .sex-item {
           float: left;
-          height: 360px;
-          width: 33.3%;
+          width: 33.33%;
           .sex-img {
             margin: 0 auto;
             position: relative;
-            left: 10%;
-            // width: 80%;
-            width: 60%;
-            margin-left: 10%;
+            left: 16%;
+            height: 125px;
+            width: 125px;
           }
-          .sex-type {
+          .sex-num {
+            margin-top: 18px;
+            height:24px;
+            line-height:24px;
+            font-size:24px;
+            font-weight:600;
             text-align: center;
           }
-          .sex-num {
-            margin-top: 40px;
-            font-size: 30px;
-            font-weight: bold;
+          .sex-type {
+            margin-top: 8px;
+            height:14px;
+            font-size:14px;
+            color: #999999;
             text-align: center;
           }
         }

src/views/learning/item-data-all.vue

@@ -65,6 +65,7 @@
           </div>
         </div>
       </div>
+      <div class="spacing"></div>
       <div class="chart-title">证书级别按学历发布情况</div>
       <div class="chart-recordChart">
         <div class="recordChart" id="recordChart" ref="recordChart"></div>
@@ -249,7 +250,7 @@ export default {
         if (res.code == "000000") {
           vm.initCard(res.data.percentData);
           vm.setDistributeChart(res.data.certData);
-          vm.setRecordChart();
+          vm.setRecordChart(res.data.eduData);
           vm.setDurationChart();
           vm.setCertificateChart();
         }
@@ -341,8 +342,8 @@ export default {
     setInitWidth() {
     },
     setDistributeChart(data) {
-      let keyName = ['未获证人数','获优秀人数','获良好人数','获及格人数','获不及格人数'];
-      let keyName2 = ['未获证人数占比','获优秀人数占比','获良好人数占比','获及格人数占比','获不及格人数占比'];
+      let keyName = ['未获证人数','优秀人数','良好人数','及格人数','不及格人数'];
+      let keyName2 = ['未获证人数占比','优秀人数占比','良好人数占比','及格人数占比','不及格人数占比'];
       let distributeList = [];
       let legendData = [];
       let seriesData = [];
@@ -367,33 +368,42 @@ export default {
       vm.echartsData.chart0 = myChart;
       vm.updateResize();
     },
-    setRecordChart() {
-      vm.recordList = [
+    setRecordChart(data) {
+      let recordList = [
         {
           label: '博士',
-          value: 50,
+          value: 0,
         },
         {
           label: '硕士',
-          value: 90,
+          value: 0,
         },
         {
           label: '本科',
-          value: 700,
+          value: 0,
         },
         {
           label: '大专',
-          value: 20428,
+          value: 0,
         },
         {
           label: '中专及以下',
-          value: 34234,
+          value: 0,
         },
         {
           label: '其他',
-          value: 2345,
+          value: 0,
         },
       ]
+      let sum = [];
+      for(let i = 0; i<data.length; i++) {
+        console.log('data[i]',data[i].certList.length);
+        let certList = data[i].certList;
+        for(let j = 0; j < certList.length; i++) {
+          recordList[j].value += certList[j].value;
+        }
+      } 
+      vm.recordList = recordList;
       let myChart = echarts.init(this.$refs.recordChart);
      
       let option = chartData.recordOption();
@@ -463,14 +473,15 @@ export default {
   // padding: 10px;
   .box-list {
     position: relative;
-    height: 110px;
+    padding: 30px 30px 0 30px;
+    height: 136px;
     .box-card {
       position: relative;
       background-color: #e3efed;
       color: #449284;
       width: 32%;
       margin-right: 2%;
-      height: 110px;
+      height: 106px;
       float: left;
       .notice {
         position: absolute;
@@ -490,7 +501,7 @@ export default {
         position: relative;
         float: left;
         width: 33%;
-        height: 110px;
+        height: 106px;
         text-align: left;
         padding: 23px 0 0 20px;
         .title {
@@ -519,7 +530,7 @@ export default {
         position: relative;
         float: left;
         width: 64%;
-        height: 110px;
+        height: 106px;
         text-align: left;
         font-size: 14px;
         padding: 23px 0 0 29px;
@@ -550,6 +561,7 @@ export default {
     position: relative;
     width: 100%;
     margin-top: 20px;
+    padding: 0 30px 0 30px;
     .change-date {
       position: relative;
       float: right;
@@ -561,12 +573,12 @@ export default {
   }
   .chart-title {
     position: relative;
-    margin-top: 17px;
-    width: 100%;
-    height: 60px;
+    margin-top: 30px;
+    margin-left: 30px;
+    height: 25px;
     font-size:18px;
     font-weight:600;
-    line-height: 60px;
+    line-height: 25px;
     color: #000000;
   }
   .chart {
@@ -578,24 +590,26 @@ export default {
   .chart-distributeChart {
     position: relative;
     margin: 20px auto 0 auto;
-    height: 350px;
+    // height: 320px;
     width: 100%;
     overflow-x: hidden;
     .distributeChart {
       position: relative;
-      float: left;
+      // float: left;
+      margin: 0 auto;
       // width: 70%;
-      width: 600px;
-      height: 350px;
+      width: 618px;
+      height: 320px;
     }
     .data-text {
-      position: relative;
-      float: left;
+      position: absolute;
+      top: 0;
+      right: 0;
       width: 30%;
-      height: 350px;
+      height: 320px;
       .content-text {
         position: relative;
-        margin-top: 135px;
+        margin-top: 78px;
         margin-left: 35%;
         text-align: left;
         p {
@@ -612,25 +626,24 @@ export default {
   .chart-recordChart {
     position: relative;
     margin: 20px auto 0 auto;
-    height: 350px;
-    width: 100%;
+    // height: 350px;
+    min-width: 1064px;
     overflow-x: hidden;
     .recordChart {
       position: relative;
       float: left;
       // width: 83.5%;
-      width: 700px;
-      height: 350px;
+      width: 910px;
+      height: 416px;
     }
     .data-text {
       position: relative;
       float: left;
-      width: 16%;
-      height: 350px;
+      width: 120px;
+      height: 416px;
       .content-text {
         position: relative;
         margin-top: 100px;
-        margin-left: 16%;
         text-align: left;
         p {
           margin-top: 20px;

src/views/learning/item-list.vue

@@ -79,18 +79,17 @@
           <el-checkbox size="small" v-model="formInline.checked">查看原始数据</el-checkbox>
         </el-form-item>
         <div class="form-button">
-          <el-button @click="search()" type="primary">查询</el-button>
-          <el-button @click="resetForm()">重置</el-button>
+          <el-button size="small" @click="search()" type="primary">查询</el-button>
+          <el-button size="small" @click="resetForm()">重置</el-button>
         </div>
       </el-form>
-      <div class="tabs-button"></div>
       <div class="button-group">
         <el-button v-if="roleType == 'L1' || roleType == 'L2'" type="default" size="small" @click="changeDate">数据修改</el-button>
         <!-- <el-button type="default" size="small" @click="update" v-else>修改范围</el-button> -->
         <el-button type="default" size="small" :disabled="exportStatus" @click="exportPDF">导出PDF</el-button>
         <el-button type="default" size="small" :disabled="exportStatus" @click="exportExcel">导出明细</el-button>
       </div>
-      <!-- <div class="item-tab"></div> -->
+      <div class="item-tab"></div>
       <el-tabs class="item-list-tabs" ref="tabs" id="item-list-tabs" v-model="activeName" @tab-click="handleClick" :before-leave="beforeLeave">
         <el-tab-pane label="数据总览" name="zero" >
           <data-all
@@ -244,7 +243,7 @@ export default {
         // organizationData: "",
       },
       tags: [],
-      activeName: "second",
+      activeName: "zero",
       organizationNum: 0,
       dialogVisible: false,
       dialogUpdate: false,
@@ -655,6 +654,7 @@ export default {
 <style lang="scss">
 .item-list-wrap {
   .component-content {
+    // position: relative;
     // background: #fff;
     padding: 10px;
     .header-title {
@@ -664,12 +664,13 @@ export default {
       border-bottom: 1px solid #efefef;
     }
     .item-form {
+
       position: relative;
-      margin-bottom: 20px;
+      // margin-bottom: 20px;
       padding: 10px;
       background: #fff;
-      width:100%;
-      border-radius: 4px;
+      width: 98.3%;
+      border-radius: 4px 4px 0 0;
       .form-button {
         position: absolute;
         width: 45%;
@@ -685,6 +686,7 @@ export default {
       // right: 100px;
       float: right;
       margin-right: 20px;
+      z-index: 999;
     }
     .choose {
       font-size: 12px;
@@ -700,7 +702,12 @@ export default {
       color: #409eff;
     }
     .el-tabs__header {
-      width: 65%;
+      width: 100%;
+      background: #fff;
+      margin-bottom: 20px;
+      .el-tabs__nav-scroll {
+        margin-left: 30px;
+      }
     }
     .el-tabs__nav-wrap::after {
       height: 0px;
@@ -712,6 +719,9 @@ export default {
         margin-right: 20px;
       }
     }
+    .el-tabs__active-bar {
+      background-color: #449284;
+    }
   }
 }
 </style>
\ No newline at end of file