学情报告 页面搭建

src/utils/filter.js

@@ -185,5 +185,19 @@ const vueFilter = {
         return '否'
     }
   },
+  projectStatus: (value) => {
+    if(value == 1) {
+        return '完成项目'
+    }else  {
+        return '归入统计'
+    }
+  },
+  recordValue: (value) => {
+    if(value == 1) {
+        return '合格'
+    }else  {
+        return '不通过'
+    }
+  },
 }
 export default vueFilter
\ No newline at end of file

src/utils/operation.js

@@ -365,3 +365,64 @@ export function getBarOption(xAxisData, seriesData) {
   };
   return option;
 }
+export function getRank() {
+  let option = {
+    color: ["#1E90FF", "#32CD32"],
+    title: {
+      text: "排行榜",
+      x: "left",
+      textStyle: {
+        //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
+        fontSize: 20,
+        fontStyle: "normal",
+        fontWeight: "normal",
+        color: "#000"
+      }
+    },
+    tooltip: {
+      trigger: "axis",
+      axisPointer: {
+        // 坐标轴指示器，坐标轴触发有效
+        type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
+      }
+    },
+    legend: {
+      data: ["完成人数", "参与人数"],
+      bottom: 0
+    },
+    grid: {
+      left: "3%",
+      right: "4%",
+      bottom: "10%",
+      containLabel: true
+    },
+    xAxis: [
+      {
+        type: "category",
+        data: ["周一", "周二", "周三", "周一", "周二", "周三"],
+      }
+    ],
+    yAxis: [
+      {
+        type: "value"
+      }
+    ],
+    series: [
+      {
+        name: "完成人数",
+        type: "bar",
+        stack: "人数",
+        barMaxWidth: "80",
+        data: [120, 132, 101, 120, 132, 101],
+      },
+      {
+        name: "参与人数",
+        type: "bar",
+        stack: "人数",
+        barMaxWidth: "80",
+        data: [220, 182, 191, 220, 182, 191]
+      }
+    ]
+  };
+  return option;
+}
\ No newline at end of file

src/views/learning/item-list.vue

@@ -52,10 +52,10 @@
         <el-button @click="resetForm()">重置</el-button>
       </div>
       <div class="button-group">
-        <el-button type="default" size="small" @click="exportExcel">导出Excel</el-button>
-        <el-button type="default" size="small" @click="changeDate" v-if="activeName=='first'">数据调整</el-button>
+        <el-button type="default" size="small" @click="changeDate" v-if="activeName=='first'">数据修改</el-button>
         <el-button type="default" size="small" @click="update" v-else>修改范围</el-button>
-        <el-button type="primary" size="small" @click="release">发布报告</el-button>
+        <el-button type="default" size="small" @click="exportExcel">导出明细</el-button>
+        <!-- <el-button type="primary" size="small" @click="release">发布报告</el-button> -->
       </div>
       <el-tabs v-model="activeName" @tab-click="handleClick">
         <el-tab-pane label="参与情况" name="first">
@@ -76,6 +76,25 @@
           <learning-effect></learning-effect>
         </el-tab-pane>
       </el-tabs>
+      <el-dialog
+        title="提示"
+        :visible.sync="dialogVisible"
+        width="30%"
+        center>
+        <p style="text-align:center">文件正在生成，你可以去“我的导出下载”页，下载文件</p>
+        <span slot="footer" class="dialog-footer">
+          <el-button @click="dialogVisible = false">留在当前页</el-button>
+          <el-button type="primary" @click="toDownload()">去下载</el-button>
+        </span>
+      </el-dialog>
+      <el-dialog
+        title=""
+        :visible.sync="dialogUpdate"
+        width="90%"
+        center>
+        <!-- <el-button @click="dialogUpdate = false">取 消</el-button> -->
+          <data-alignment @closeDialog="dialogUpdate = false"></data-alignment>
+      </el-dialog>
     </div>
   </div>
 </template>
@@ -86,6 +105,7 @@ import CrowdAnalysis from "./item-crowd-analysis.vue";
 import PartIn   from './item-part-in.vue';
 import ExaminationAnalysisfrom from './item-examination-analysis.vue';
 import LearningEffect from './item-learning-effect.vue';
+import DataAlignment from './data-alignment.vue';
 import { create } from "domain";
 import { mapGetters } from "vuex";
 import { openLoading, closeLoading } from "../../utils/utils";
@@ -101,7 +121,8 @@ export default {
     CrowdAnalysis,
     PartIn,
     ExaminationAnalysisfrom,
-    LearningEffect
+    LearningEffect,
+    DataAlignment,
   },
   data() {
     return {
@@ -137,6 +158,8 @@ export default {
       tags: [],
       activeName: "first",
       organizationNum: 0,
+      dialogVisible: false,
+      dialogUpdate: false,
     };
   },
   computed: {
@@ -216,6 +239,9 @@ export default {
     getOrganizationNum() {
       //选择全部
       let num = 0;
+      if(this.tags.length == 0) {
+        return;
+      }
       if(this.tags[0].value == 0) {
         num = this.organizationList.length - 1;
         return num;
@@ -258,12 +284,15 @@ export default {
       vm.tags = [];
     },
     exportExcel() {
-      console.log('excel');
+      this.dialogVisible = true;
+    },
+    toDownload() {
+      vm.$router.push({path: 'data-alignment'})
     },
     update() {},
     release() {},
     changeDate() {
-      this.$router.push('/data-alignment')
+      this.dialogUpdate = true;
     }
   }
 };

src/views/learning/item-part-in.vue

 <template>
-  <div class="part-in">
+  <div class="part-in-wrap">
     <div v-for="(item , index) in cardData" :key="index" class>
       <el-card class="box-card">
         <div slot="header" class="title">
@@ -11,8 +11,8 @@
         </div>
       </el-card>
     </div>
-    <!-- <div class="charts" id="rankChart" ref="rankChart"></div> -->
-    <div class="charts" id="age" ref="age"></div>
+    <div class="charts" id="rankChart" ref="rankChart"></div>
+    <!-- <div class="charts" id="age" ref="age"></div> -->
     <el-table v-show="organizationNum < 2" :data="finishDetail" class="project-table" style="width: 100%" border>
       <el-table-column prop="name" label="姓名" align="center"></el-table-column>
       <el-table-column prop="desk" label="科室" align="center"></el-table-column>
@@ -55,12 +55,6 @@ export default {
   },
   data() {
     return {
-      // 图表数据
-      chartOption: {
-        xAxisData: ["周一", "周二", "周三", "周一", "周二", "周三"],
-        seriesPass: [120, 132, 101, 120, 132, 101],
-        seriesJoin: [220, 182, 191, 220, 182, 191]
-      },
       // 只有一个机构时显示人员完成情况
       finishDetail: [],
       cardData: [],
@@ -70,10 +64,11 @@ export default {
   },
   created() {
     vm = this;
+    this.$nextTick(function() {
       this.getCardData();
-    // this.getRank();
-    this.getAgeData();
+      this.getRank();
       this.getTableData();
+    });
   },
   mounted: function() {
     commonUtil.resizeHeight();
@@ -86,7 +81,7 @@ export default {
       }
     });
     if (this.activeName == "first") {
-      // this.updateResize();
+      this.updateResize();
     }
   },
   methods: {
@@ -110,33 +105,9 @@ export default {
       ];
     },
     getRank() {
-      // let myChart = echarts.init(this.$refs.rankChart);
-      // let optionValue = operationData.getRank();
-      // console.log('optionValue值',optionValue)
-      // debugger;
-      // myChart.setOption(optionValue);
-      debugger;
-      let myChart = echarts.init(document.getElementById("rankChart"));
-      let data = [22, 50, 350, 80, 95];
-      let legendData = ["博士", "硕士", "本科", "大专", "大专以下"];
-      let colorData = ["#FF9F7F", "#FFDB5C", "#E062AE", "#37A2DA", "#67E0E3"];
-      let seriesData = [
-        { value: 22, name: "博士" },
-        { value: 50, name: "硕士" },
-        { value: 350, name: "本科" },
-        { value: 80, name: "大专" },
-        { value: 95, name: "大专以下" }
-      ];
-      for (let i = 0; i < data.length; i++) {
-        seriesData[i].value = data[i];
-      }
-      let option = operationData.getPicOption(
-        "用户学历分布",
-        legendData,
-        colorData,
-        seriesData
-      );
-      myChart.setOption(option);
+      let myChart = echarts.init(this.$refs.rankChart);
+      let optionValue = operationData.getRank();
+      myChart.setOption(optionValue);
     },
     getCardData() {
       this.cardData = [
@@ -172,31 +143,12 @@ export default {
         },
       ];
     },
-    getAgeData() {
-      let data = [1000, 25000, 15000, 8000, 7000, 500];
-      this.ageDivision(data);
-    },
-    ageDivision(data) {
-      let myChart = echarts.init(this.$refs.age);
-      let xAxisData = [
-        "16-30",
-        "30-40",
-        "40-50",
-        "50-60",
-        "60以上",
-        "未完善信息"
-      ];
-      let seriesData = data;
-      let option = operationData.getBarOption(xAxisData, seriesData);
-
-      myChart.setOption(option);
-    },
   }
 };
 </script>
 
-<style lang='scss' rel='stylesheet/scss'>
-.part-in {
+<style lang='scss'>
+.part-in-wrap {
   .box-card {
     width: 15%;
     margin-right: 1%;