学情报告 页面搭建 update

src/utils/filter.js

@@ -157,7 +157,7 @@ const vueFilter = {
         return '普通用户'
     }
   },
-  joinTraining: (value) => {
+  joinStatus: (value) => {
     if(value == "1") {
         return '是'
     }else  {

src/utils/operation.js

@@ -344,6 +344,9 @@ export function getBarOption(xAxisData, seriesData) {
       {
         type: 'category',
         data: xAxisData,
+        axisLabel: {
+          interval:0 
+        }
         // axisTick: {
         //   alignWithLabel: true
         // }

src/views/learning/course-training.vue

@@ -4,10 +4,30 @@
     <div class="component-content screenSet" id="screenSet">
       <p class="course-p">地区：{{ region }}</p>
       <p class="course-p">选择机构：{{ organization }}</p>
-      <div class="course-search">
-        <el-input placeholder="查询姓名" v-model="formData.name" class="input-with-select">
-          <el-button class="course-button" type="primary" slot="append" @click="search">查询</el-button>
-        </el-input>
+      <el-form class="form-update" ref="serchForm" :model="formData" label-width="100px" style="width:40%;">
+        <el-form-item label="课程完成状态:">
+          <el-select
+            v-model="formData.status"
+            size="small"
+            style="width: 100%;"
+            placeholder="请选择状态"
+          >
+            <el-option
+              v-for="(item,index) in statusList"
+              :key="index"
+              :label="item.label"
+              :value="item.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="查询姓名:  ">
+          <el-input size="small" placeholder="查询姓名" v-model="formData.name">
+          </el-input>
+        </el-form-item>
+      </el-form>
+      <div class="form-button">
+        <el-button @click="search()" type="primary">查询</el-button>
+        <el-button @click="resetForm()">重置</el-button>
       </div>
       <el-table
         :data="tableData"
@@ -20,24 +40,20 @@
         </el-table-column>
         <el-table-column prop="professional" label="职称" align="center">
         </el-table-column>
-        <el-table-column prop="post" label="职务" align="center">
-        </el-table-column>
         <el-table-column prop="organization" label="机构" align="center">
         </el-table-column>
         <el-table-column prop="region" label="地区" align="center">
         </el-table-column>
-        <el-table-column prop="join" label="是否参与培训" align="center">
+        <el-table-column prop="join" label="参与课程状态" align="center">
           <template slot-scope="scope">
-            <span>{{ scope.row.join | joinTraining }}</span>
+            <span>{{ scope.row.join | joinStatus }}</span>
           </template>
         </el-table-column>
-        <el-table-column prop="complete" label="是否完成培训" align="center">
+        <el-table-column prop="date" label="完成培训日期" align="center" min-width="150">
           <template slot-scope="scope">
-            <span>{{ scope.row.complete | joinTraining }}</span>
+            <span>{{ scope.row.date | liveDateFilter }}</span>
           </template>
         </el-table-column>
-        <el-table-column prop="date" label="完成培训日期" align="center">
-        </el-table-column>
       </el-table>
       <div class="pagination">
         <el-pagination
@@ -76,13 +92,28 @@ export default {
       curmbSecond: "项目管理",
       formData: {
         name: '',
+        status: '',
         pageNo: 1,
         pageSize: 10,
       },
-      region: '浙江省/杭州市/西湖区',
-      organization: '杭州市中心医院',
+      region: '',
+      organization: '',
       tableData: [],
       totalRows: 0,
+      statusList: [
+        {
+          value: 1,
+          label: '未参与'
+        },
+        {
+          value: 2,
+          label: '参与中'
+        },
+        {
+          value: 3,
+          label: '已完成'
+        },
+      ]
     };
   },
   // computed: {
@@ -93,12 +124,18 @@ export default {
   created() {
     vm = this;
     // console.log("formInline:", this.formInline);
+    this.getUrlData();
     this.search();
   },
   mounted: function() {
     commonUtil.resizeHeight();
   },
   methods: {
+    getUrlData() {
+      let url = window.location.href;
+      this.region = vm.getUrlSearch(url,"region");
+      this.organization = vm.getUrlSearch(url,"organization");
+    },
     search() {
       console.log(this.formData.name);
       this.tableData = [{
@@ -111,9 +148,20 @@ export default {
         region: '上海静安区',
         join: '1',
         complete: '1',
-        date: '2019-10-11',
+        date: 1562144416000,
       }];
     },
+    resetForm() {
+      vm.formData = Object.assign(
+        {},
+        {
+          name: '',
+          status: '',
+          pageNo: 1,
+          pageSize: 10,
+        }
+      );
+    },
     handleSizeChange(val) {
       console.log(`每页 ${val} 条`);
       this.formData.pageSize = val;
@@ -140,13 +188,16 @@ export default {
     .course-p {
       margin: 30px 0 20px 30px;
       font-size: 13px;
+      color: #606266;
     }
-    .course-search {
-      margin: 35px auto;
-      width: 800px;
+    .form-update {
+      margin: 30px 0px 0px 20px;
     }
-    .course-button {
-      color: #fff;
+    .form-button {
+      width: 45%;
+      top: -62px;
+      position: relative;
+      left: 50%;
     }
   }
 }

src/views/learning/data-alignment.vue

@@ -14,8 +14,8 @@
       </el-row>
     </div>
     <div class="text">
-      <p>地区：浙江省/杭州市/西湖区</p>
-      <p>选择机构：杭州中医院</p>
+      <p>地区：{{ dialogData.region }}</p>
+      <p>选择机构：{{ dialogData.organization }}</p>
     </div>
     <el-form class="form-update" ref="serchForm" :model="formInline" label-width="100px" style="width:40%;">
       <el-form-item label="项目成绩:">
@@ -121,6 +121,11 @@
 <script>
 let vm;
 export default {
+  props: {
+    dialogData: {
+      type: Object
+    },
+  },
   data() {
     return {
       formInline: {
@@ -164,6 +169,7 @@ export default {
   created() {
     vm = this;
     this.search();
+    console.log(vm.dialogData);
   },
   methods: {
     // 将选中行放入数组
@@ -255,7 +261,6 @@ export default {
           mathStatus: "",
         }
       );
-      vm.tags = [];
     },
     saveUpdate() {
       this.dialogVisible = true;

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

@@ -27,7 +27,7 @@
           <template slot-scope="scope">
             <el-button
               @click="checkName(scope.row)"
-              type="primary"
+              type="text"
               size="small"
             >查看名单</el-button>
           </template>
@@ -58,7 +58,10 @@ export default {
     },
     activeName: {
       type: String
-    }
+    },
+    dialogData: {
+      type: Object
+    },
   },
   data() {
     return {
@@ -115,7 +118,8 @@ export default {
       }];
     },
     checkName(data) {
-      this.$router.push("course-training");
+      console.log('dialogData',this.dialogData);
+      this.$router.push("course-training?id="+data.id+"&region="+this.dialogData.region+"&organization="+this.dialogData.organization);
     },
     handleSizeChange(val) {
       console.log(`每页 ${val} 条`);
@@ -140,9 +144,12 @@ export default {
       clear: both
     }
     .box-card {
-      width: 240px;
-      margin-right: 30px;
+      width: 32%;
+      margin-right: 1%;
       float: left;
+      .title {
+        text-align: center;
+      }
       .box-content {
          text-align: center;
          height: 40px;

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

@@ -101,9 +101,9 @@ export default {
     },
     //用户学历分布
     getEducationData() {
-      let data = [22, 50, 350, 80, 95];
+      let data = [2,22, 50, 350, 80, 95,55];
       if (this.updateCrowd == true) {
-        data = [33, 90, 100, 22, 75];
+        data = [3,33, 90, 100, 22, 75,66];
       }
       this.educationDivision(data);
     },
@@ -139,17 +139,13 @@ export default {
     },
     educationDivision(data) {
       let myChart = echarts.init(this.$refs.education);
-      let legendData = ["博士", "硕士", "本科", "大专", "大专以下"];
+      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: "大专以下" }
-      ];
+      let seriesData = [];
       for (let i = 0; i < data.length; i++) {
+        seriesData[i] = {};
         seriesData[i].value = data[i];
+        seriesData[i].name = legendData[i];
       }
       let option = operationData.getPicOption(
         "用户学历分布",
@@ -183,7 +179,7 @@ export default {
     ageDivision(data) {
       let myChart = echarts.init(this.$refs.age);
       let xAxisData = [
-        "16-30",
+        "18-30",
         "30-40",
         "40-50",
         "50-60",

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

@@ -13,12 +13,12 @@
     </div>
     <div class="table">
       <el-table :data="tableData" style="width: 100%" border>
-        <el-table-column prop="name" label="考试名" min-width="200" align="center"></el-table-column>
+        <el-table-column prop="name" label="考试名" min-width="150" align="center"></el-table-column>
         <el-table-column prop="joinNum" label="参与考试人数" min-width="100" align="center"></el-table-column>
         <el-table-column prop="passNum" label="通过考试人数" min-width="80" align="center"></el-table-column>
         <el-table-column prop="goodNum" label="成绩优秀人数" min-width="80" align="center"></el-table-column>
         <el-table-column prop="startNum" label="成绩合格人数" min-width="80" align="center"></el-table-column>
-        <el-table-column label="操作" fixed="right" align="center" min-width="200">
+        <el-table-column label="操作" fixed="right" align="center" min-width="100">
           <template slot-scope="scope">
             <el-button type="text" size="small" @click="go(scope.row)">查看名单</el-button>
           </template>
@@ -133,5 +133,9 @@ export default {
   .table {
     margin-top: 30px;
   }
+  .box-card {
+    width: 49%;
+    margin-right: 1%;
+  }
 }
 </style>

src/views/learning/name-list.vue

 <template>
   <div class="name-list">
-    <el-card class="where">
-      <p>地区: {{params.address}}</p>
-      <p>选择机构: {{params.pregress}}</p>
-      <el-row :gutter="20" class="input-box">
-        <el-col :span="12" :offset="6">
-          <el-input placeholder="查询姓名" v-model="name" class="input-search">
-            <el-button slot="append" class="search-btn" type="primary">查询</el-button>
+    <bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond"></bread-crumb>
+    <div class="component-content screenSet" id="screenSet">
+  
+      <p class="text">地区: {{params.address}}</p>
+      <p class="text">选择机构: {{params.pregress}}</p>
+      <el-form class="form-update" ref="serchForm" :model="formData" label-width="100px" style="width:40%;">
+        <el-form-item label="考试成绩等级:">
+          <el-select
+            v-model="formData.rank"
+            size="small"
+            style="width: 100%;"
+            placeholder="请选择考试通过状态"
+          >
+            <el-option
+              v-for="(item,index) in rankList"
+              :key="index"
+              :label="item.label"
+              :value="item.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="查询姓名:  ">
+          <el-input size="small" placeholder="查询姓名" v-model="formData.name">
           </el-input>
-        </el-col>
-      </el-row>
-    </el-card>
-    <el-card>
+        </el-form-item>
+      </el-form>
+      <div class="form-button">
+        <el-button @click="search()" type="primary">查询</el-button>
+        <el-button @click="resetForm()">重置</el-button>
+      </div>
+  
       <el-table :data="joinData" style="width: 100%">
         <el-table-column prop="name" label="姓名" min-width="80" align="center"></el-table-column>
         <el-table-column prop="sex" label="性别" min-width="100" align="center"></el-table-column>
@@ -26,101 +45,143 @@
         <el-table-column prop="level" label="考试成绩等级" min-width="80" align="center"></el-table-column>
         <div slot="empty">
           <div class="table-empty">
-            <img src="../../assets/image/no-content1.png">
+            <img src="../../assets/image/no-content1.png" />
             <p>没有查询到相关结果</p>
           </div>
         </div>
       </el-table>
-    </el-card>
-     <!-- 分页 -->
-    <div class="pagination">
-      <el-pagination
-        background
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
-        :current-page="searchParam.pageNo"
-        :page-sizes="[15, 30, 50, 100, 200, 500, 700, 1000, 1500, 2000]"
-        :page-size="searchParam.pageSize"
-        layout="total, sizes, prev, pager, next, jumper"
-        :total="totalRows"
-      ></el-pagination>
+      <div class="pagination">
+        <el-pagination
+          background
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page="searchParam.pageNo"
+          :page-sizes="[15, 30, 50, 100, 200, 500, 700, 1000, 1500, 2000]"
+          :page-size="searchParam.pageSize"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="totalRows"
+        ></el-pagination>
+      </div>
     </div>
   </div>
 </template>
-
 <script>
+import BreadCrumb from "../../components/breadcrumb.vue";
+let vm = null;
 export default {
+  components: {
+    BreadCrumb
+  },
   data() {
     return {
+      curmbFirst: "学情报告",
+      curmbSecond: "项目管理",
       params: {
         address: "浙江省/杭州市/西湖区",
         pregress: "杭州市中医院、杭州市第七人民医院"
       },
-      name: "",
-      joinData: [{
-        name: 'asd',
-        sex: '男',
-        age: 30,
-        title: '主任医师',
-        duty: '医生',
-        pregress: '上海市复旦大学附属华山医院',
-        region: '上海市徐汇区',
-        join: '是',
-        pass: '是',
-        paddTime: '2019-10-10',
-        level: '合格'
-      }],
+      formData: {
+        name: '',
+        rank: '',
+        pageNo: 1,
+        pageSize: 10,
+      },
+      joinData: [],
       totalRows: 0, //数据总数
       searchParam: {
         pageNo: 1, //当前是第几页
         pageSize: 20 //页面总数
-      }
+      },
+      rankList: [
+        {
+          value: 1,
+          label: '不通过'
+        },
+        {
+          value: 2,
+          label: '合格'
+        },
+        {
+          value: 3,
+          label: '优秀'
+        },
+        {
+          value: 4,
+          label: '无成绩'
+        },
+      ]
     };
   },
-
+  created() {
+    vm = this;
+    vm.search();
+  },
   methods: {
-      // 搜索列表
-    search(flag) {
-      if(flag) vm.searchParam.pageNo = 1
-      openLoading(vm);
-      let params = {};
-      vm.GET(url, params).then(res => {
-        closeLoading(vm);
-        if (res.code == "000000") {
-        } else {
-          vm.$message.info(res.message);
+    // 搜索列表
+    search() {
+      vm.joinData = [
+        {
+          name: "asd",
+          sex: "男",
+          age: 30,
+          title: "主任医师",
+          duty: "医生",
+          pregress: "上海市复旦大学附属华山医院",
+          region: "上海市徐汇区",
+          join: "是",
+          pass: "是",
+          paddTime: 1562144116000,
+          level: "合格"
         }
-      });
+      ];
     },
     // 重置搜索信息
-    resetMessage() {
-      this.selectProgress = {
-        status: "",
-        name: ""
-      };
+    resetForm() {
+      vm.formData = Object.assign(
+        {},
+        {
+          name: '',
+          rank: '',
+          pageNo: 1,
+          pageSize: 10,
+        }
+      );
       vm.search();
     },
     // 更改数据显示数量
     handleSizeChange(val) {
       console.log(`每页 ${val} 条`);
-      vm.searchParam.pageSize = val
-      vm.search()
+      vm.searchParam.pageSize = val;
+      vm.search();
     },
     // 换页
     handleCurrentChange(val) {
-      console.log(`当前页: ${val}`)
-      vm.searchParam.pageNo = value
-      vm.search()
-    },
+      console.log(`当前页: ${val}`);
+      vm.searchParam.pageNo = value;
+      vm.search();
+    }
   }
 };
 </script>
 
 <style lang='scss' rel='stylesheet/scss'>
 .name-list {
-  .where {
-    p {
-      line-height: 40px;
+  .component-content{
+    padding: 10px;
+    background: #fff;
+    .text {
+      margin: 30px 0 20px 30px;
+      font-size: 13px;
+      color: #606266;
+    }
+    .form-update {
+      margin: 30px 0px 0px 20px;
+    }
+    .form-button {
+      width: 45%;
+      top: -62px;
+      position: relative;
+      left: 50%;
     }
     .input-box {
       margin-top: 40px;