数据总览更新

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

 <template>
   <div class="data-all-wrap">
+    <div v-if="dataType == 0" class="data-chart">
       <div class="box-list">
         <div v-for="(item , index) in cardData" :key="index" class="box">
           <el-card class="box-card">
@@ -53,6 +54,63 @@
       <div class="chart-title">在线培训完成时长情况</div>
       <div class="chart" id="durationChart" ref="durationChart"></div>
     </div>
+    <div v-if="dataType == 1" class="data-table">
+      <div class="box-list">
+        <div v-for="(item , index) in cardData" :key="index" class="box">
+          <el-card class="box-card">
+            <el-tooltip class="item-tool" placement="bottom-end" effect="light">
+              <div slot="content">
+                <p v-for="text in item.content">{{ text }}</p>
+              </div>
+              <i class="el-icon-question notice"></i>
+            </el-tooltip>
+            <div class="left-content">
+              <p class="title">{{ item.title }}</p>
+              <p class="value">{{ item.value }}</p>
+            </div>
+            <div class="vertical"></div>
+            <div class="right-content">
+              <p class="has">{{ item.hasKey }}:{{ item.hasNum }}</p>
+              <p class="should">{{ item.shouldKey }}:{{ item.shouldNum }}</p>
+            </div>
+          </el-card>
+          <!-- <div v-if="index+1 !== cardData.length" class="line"></div> -->
+        </div>
+      </div>
+      <div class="person">
+        <div class="person-title">项目人员情况</div>
+        <!-- <el-radio-group class="person-radio" v-model="tableType" @change="change">
+          <el-radio-button label="0">已获证</el-radio-button>
+          <el-radio-button label="1">未获证</el-radio-button>
+          <el-radio-button label="2">未参与</el-radio-button>
+        </el-radio-group> -->
+        <el-table :data="tableData" style="width: 100%">
+          <el-table-column prop="rank" label="排名" align="center"></el-table-column>
+          <el-table-column prop="name" label="姓名" align="center"></el-table-column>
+          <el-table-column prop="sex" label="性别" align="center"></el-table-column>
+          <el-table-column prop="department" label="科室" align="center"></el-table-column>
+          <el-table-column prop="join" label="是否参与项目" align="center"></el-table-column>
+          <el-table-column prop="complete" label="是否完成项目" align="center"></el-table-column>
+          <el-table-column prop="grade" label="证书级别" align="center"></el-table-column>
+          <el-table-column prop="certificateDate" label="获证日期" align="center"></el-table-column>
+          <el-table-column prop="record" label="成绩" align="center"></el-table-column>
+          <el-table-column prop="learnTime" label="学习时长" align="center"></el-table-column>
+        </el-table>
+        <div class="pagination">
+        <el-pagination
+          background
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page="formTable.pageNo"
+          :page-sizes="[10, 20, 30, 100]"
+          :page-size="formTable.pageSize"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="totalRows"
+        ></el-pagination>
+      </div>
+      </div>
+    </div>
+  </div>
 </template>
 <script>
 import { openLoading, closeLoading } from "../../utils/utils";
@@ -80,6 +138,8 @@ export default {
     return {
       roleType: "L1",
       projectId: "",
+      dataType: 1,
+      tableType: "0",
       echartsData: {
         chart0: {},
         chart1: {},
@@ -99,24 +159,34 @@ export default {
           value: 2,
           label: "按参与人数排名"
         }
-      ]
+      ],
+      tableData: [],
+      totalRows: 0,
+      formTable: {
+        pageNo: 1,
+        pageSize: 10,
+      },
     };
   },
   created() {
     vm = this;
     vm.projectId = vm.getUrlSearch(window.location.href, "id");
     vm.initCard();
+    if(vm.dataType == 0) {
       setTimeout(function() {
         vm.setDistributeChart();
         vm.setRecordChart();
         vm.setDurationChart();
         vm.setCertificateChart();
       }, 20);
+    } else {
+      vm.setTable();
+    }
   },
   mounted: function() {},
   methods: {
     initCard() {
-      vm.cardData = [
+      let cardData = [
         {
           value: "45%",
           title: "机构参与率",
@@ -157,6 +227,11 @@ export default {
           ]
         }
       ];
+      if(vm.dataType == 0) {
+        vm.cardData = cardData;
+      } else if(vm.dataType == 1) {
+        vm.cardData = cardData.slice(0,2);
+      }
     },
     updateResize() {
       this.$nextTick(function() {
@@ -698,6 +773,32 @@ export default {
       myChart.setOption(option);
       vm.echartsData.chart3 = myChart;
       vm.updateResize();
+    },
+     handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+      vm.formTable.pageSize = val;
+      vm.formTable.pageNo = 1;
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+      vm.formTable.pageNo = val;
+    },
+    setTable() {
+      vm.tableData = [
+        {
+          id: 1,
+          rank: 1,
+          name: '伊娟',
+          sex: '女',
+          department: '内科',
+          join: 1,
+          complete: 1,
+          grade: '1级',
+          certificateDate: '2019-10-11',
+          record: 100,
+          learnTime: '4小时23分34秒',
+        }
+      ];
     }
   }
 };
@@ -791,6 +892,10 @@ export default {
         }
       }
     }
+    .box-card {
+      width: 48%;
+      margin-right: 1%;
+    }
   }
   .chart-select {
     position: relative;
@@ -876,5 +981,33 @@ export default {
       }
     }
   }
+  .person {
+    position: relative;
+    margin-top: 20px;
+    width: 100%;
+    .person-title {
+      font-size:18px;
+      font-weight:700;
+    }
+    .person-radio {
+      margin-top: 10px;
+      .el-radio-button {
+        .el-radio-button__inner {
+          border:0 solid #666666 !important;
+          box-shadow: 0;
+        }
+      }
+      .is-active {
+        border-radius: 10px 10px 0px 0px;
+        border-bottom: 2px solid #666666 !important;
+        .el-radio-button__inner{
+          border-radius:10px 10px 0px 0px;
+          background:#DFDFDF !important;
+          border:0 solid #666666 !important;
+          box-shadow: 0;
+        }
+      }
+    }
+  }
 }
 </style>
\ No newline at end of file