项目列表页面

src/router/router.js

@@ -8,6 +8,7 @@ const createComponent = r => require.ensure([], () => r(require('../views/educat
 const roleManager = r => require.ensure([], () => r(require('../views/system/role.vue')),'role')
 const addManager = r => require.ensure([], () => r(require('../views/education/add-manager.vue')), 'add-manager')
 const itemRole = r => require.ensure([], () => r(require('../views/system/item-role.vue')), 'item-role')
+const itemList = r => require.ensure([], () => r(require('../views/learning/item-list.vue')), 'item-list')
 
 export default [{
     path: '/',
@@ -43,6 +44,9 @@ export default [{
         },{
             path: '/item-role',
             component: itemRole
+        },{
+            path: '/item-list',
+            component: itemList
         },
     ]
 }]
\ No newline at end of file

src/utils/operation.js

@@ -273,3 +273,21 @@ export function getEcologySelect (data) {
   }
   return ecologyist;
 }
+export function getRegionOption() {
+  let option =   [{
+    value: 'zhejiang',
+    label: '浙江',
+    children: [{
+      value: 'hangzhou',
+      label: '杭州',
+      children: [{
+        value: 'xihu',
+        label: '西湖区'
+      }, {
+        value: 'donghu',
+        label: '东湖区'
+      }]
+    }]
+  }];
+  return option;
+}
\ No newline at end of file

src/views/layout/slidebar.vue

@@ -69,6 +69,17 @@ export default {
                             index: 'role'
                         }
                     ]
+                },{
+                    title: '学期报告',
+                    icon: 'el-icon-menu',
+                    index: 'learning',
+                    subs: [
+                        {
+                            title: '项目列表',
+                            icon: 'el-icon-setting',
+                            index: 'item-list'
+                        },
+                    ]
                 }
             ]
         }

src/views/learning/course-analysis.vue

+<template>
+    <div class="course-analysis-wrap">
+      <div v-for="(item , index) in cardData" :key="index" class="">
+        <el-card class="box-card">
+          <div slot="header" class="title">
+            <span class="weight">{{ item.title }}</span>
+          </div>
+          <div class="box-content">
+            <span class="weight">{{ item.num }} </span> {{ item.unit }}
+          </div>
+        </el-card>
+       </div>
+    </div>
+</template>
+<script>
+import { create } from "domain";
+import { openLoading, closeLoading } from "../../utils/utils";
+let vm = null;
+export default {
+  props: {
+    formInline: {
+        type: Object
+    },
+  },
+  data() {
+    return {
+        cardData: [
+          {
+            title: '项目所有课程数',
+            num: 9,
+            unit: '门课程',
+          },{
+            title: '项目所有课程总时长',
+            num: 500,
+            unit: '分钟',
+          },{
+            title: '项目人均学习时长',
+            num: 265,
+            unit: '分钟',
+          }
+        ]
+    }
+  },
+  // computed: {
+  //   ...mapGetters([
+  //     "_token", 
+  //   ])
+  // },
+  created() {
+    vm = this;
+  },
+  methods: {
+    
+  },
+}
+</script>
+<style lang="scss">
+.course-analysis-wrap {
+  .component-content {
+    background: #fff;
+    padding: 10px;
+    .weight {
+      font-weight: bold;
+    }
+    .title:after {
+      clear: both
+    }
+    .box-card {
+      width: 240px;
+      margin-right: 30px;
+      float: left;
+      .box-content {
+         text-align: center;
+         height: 40px;
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file

src/views/learning/crowd-analysis.vue

+<template>
+    <div class="crowd-analysis-wrap">
+        <div>{{formInline.date}}</div>
+    </div>
+</template>
+<script>
+import BreadCrumb from "../../components/breadcrumb.vue";
+import { create } from "domain";
+import { mapGetters } from 'vuex'
+import { openLoading, closeLoading } from "../../utils/utils";
+import * as commonUtil from "../../utils/utils";
+let vm = null;
+export default {
+  components: {
+    BreadCrumb
+  },
+  props: {
+    formInline: {
+        type: Object
+    },
+  },
+  data() {
+    return {
+    }
+  },
+  // computed: {
+  //   ...mapGetters([
+  //     "_token", 
+  //   ])
+  // },
+  created() {
+    vm = this;
+    console.log('formInline:',this.formInline);
+  },
+  mounted: function() {
+    commonUtil.resizeHeight();
+  },
+  methods: {
+  },
+}
+</script>
+<style lang="scss">
+.crowd-analysis-wrap {
+  .component-content {
+    background: #fff;
+    padding: 10px;
+    .header-title {
+      padding: 10px 12px;
+      font-size: 12px;
+      color: #449284;
+      border-bottom: 1px solid #efefef;
+    }
+  }
+}
+</style>
\ No newline at end of file

src/views/learning/item-list.vue

+<template>
+    <div class="course-analysis-wrap">
+        <bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond"></bread-crumb>
+        <div class="component-content screenSet" id="screenSet">
+          <el-row :gutter="30" class="row" type="flex" style="margin-top: 10px;">
+          <el-form ref="formInline" :model="formInline" label-width="75px" style="width:100%;">
+            <el-col :span="5">
+              <el-form-item label="选择地区：">
+                  <el-cascader
+                    :options="optionsRegion"
+                    v-model="formInline.region"
+                    @change="handleChange">
+                  </el-cascader>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="选择日期：">
+                <el-date-picker
+                  v-model="formInline.date"
+                  size="small"
+                  type="daterange"
+                  placeholder="请选择开始时间"
+                  range-separator="~"
+                  value-format="yyyy-MM-dd 00:00:00"
+                ></el-date-picker>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8" style="padding:0;text-align:right;padding-right:15px;">
+              <el-button type="default" size="small" @click="reset">重置</el-button>
+              <el-button type="primary" size="small" @click="search" style="margin-left:0;">查询</el-button>
+            </el-col>
+          </el-form>
+          </el-row>
+          <el-row>
+            <el-col :span="5">
+              <el-form ref="formInline" :model="formInline" label-width="75px" style="width:100%;">
+                <el-form-item label="选择机构：">
+                  <el-select size="small" v-model="formInline.organization" placeholder="请选择发布状态" @change="changeOrganization">
+                    <el-option
+                      v-for="item in organizationList"
+                      :key="item.value"
+                      :label="item.label"
+                      :value="item.value"
+                    ></el-option>
+                  </el-select>
+                </el-form-item>
+              </el-form>
+            </el-col>
+          </el-row>
+          <div class="choose">{{ chooseOrganization }}</div>
+          <div class="button-group">
+            <el-button type="default" size="small" @click="exportExcel">导出Excel</el-button>
+            <el-button type="default" size="small" @click="update">修改范围</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">
+            </el-tab-pane>
+            <el-tab-pane label="人群分析" name="second">
+              <crowd-analysis :formInline="formInline">
+              </crowd-analysis>
+            </el-tab-pane>
+            <el-tab-pane label="课程分析" name="third">
+              <course-analysis :formInline="formInline">
+              </course-analysis>
+            </el-tab-pane>
+            <el-tab-pane label="考试分析" name="fourth">
+            </el-tab-pane>
+            <el-tab-pane label="学习效果分析" name="fifth">
+            </el-tab-pane>
+          </el-tabs>
+        </div>
+    </div>
+</template>
+<script>
+import BreadCrumb from "../../components/breadcrumb.vue";
+import CourseAnalysis from "./course-analysis.vue";
+import CrowdAnalysis from "./crowd-analysis.vue";
+import { create } from "domain";
+import { mapGetters } from 'vuex'
+import { openLoading, closeLoading } from "../../utils/utils";
+import * as commonUtil from "../../utils/utils";
+import * as operationData from "../../utils/operation";
+let vm = null;
+export default {
+  components: {
+    BreadCrumb,
+    CourseAnalysis,
+    CrowdAnalysis
+  },
+  data() {
+    return {
+        curmbFirst: "学情报告",
+        curmbSecond: "项目列表",
+        organizationList: [
+          {
+            label: '西湖区第二人民医院',
+            value: '1',
+          },
+          {
+            label: '杭州市中医院',
+            value: '2',
+          }
+        ],
+        chooseOrganization: '',
+        optionsRegion: [],
+        formInline: {
+          region: [],
+          date: '',
+          organization: '',
+        },
+        activeName: 'second',
+    }
+  },computed: {
+    ...mapGetters([
+      "_token", 
+      // "idType",
+      // "masterAdministratorFlag"
+    ])
+  },
+  created() {
+    vm = this;
+    this.getRegionOption();
+  },
+  mounted: function() {
+    commonUtil.resizeHeight();
+  },
+  methods: {
+    handleClick(tab, event) {
+      console.log(tab, event);
+    },
+    handleChange(value) {
+      console.log(value);
+    },
+    changeOrganization(value) {
+      for(let i=0;i<this.organizationList.length;i++) {
+        if(value == this.organizationList[i].value) {
+          this.chooseOrganization = this.organizationList[i].label;
+        }
+      }
+    },
+    getRegionOption() {
+      this.optionsRegion = operationData.getRegionOption();
+    },
+    search() {
+
+    },
+    reset() {
+
+    },
+    exportExcel() {
+
+    },
+    update() {
+
+    },
+    release() {
+
+    },
+  },
+}
+</script>
+<style lang="scss">
+.course-analysis-wrap {
+  .component-content {
+    background: #fff;
+    padding: 10px;
+    .header-title {
+      padding: 10px 12px;
+      font-size: 12px;
+      color: #449284;
+      border-bottom: 1px solid #efefef;
+    }
+    .button-group {
+      // position: absolute;
+      // right: 100px;
+      float: right;
+      margin-right: 20px;
+    }
+    .choose {
+      font-size: 12px;
+      margin-bottom: 20px;
+    }
+    .el-tabs__item.is-active {
+        color: #409EFF;
+    }
+  }
+}
+</style>
\ No newline at end of file