Merge branch 'test-learning-1205' into release

* test-learning-1205: (114 commits)
  业务方需求的文案修改
  数据总览文案修改
  导出PDF细节
  UI回测问题
  PDF导出样式的问题
  PDF导出样式的问题
  多次loading问题
  多次loading问题
  PDF导出时间问题 loading问题
  PDF导出问题更新
  PDF生成情况下文案修改
  PDF导出样式问题
  html2Canvas 插件静态导入
  JDF静态导入
  JDF导出的问题
  去掉图片导出
  m导出图片 和 pdf
  导出png
  导出参数设置
  饼图文案修改
  ...

package-lock.json

@@ -2371,9 +2371,9 @@
       "dev": true
     },
     "element-ui": {
-      "version": "2.10.0",
-      "resolved": "http://192.168.110.93:4873/element-ui/-/element-ui-2.10.0.tgz",
-      "integrity": "sha1-5hKfa21v/g260SWkqNF9RHpfY5w=",
+      "version": "2.11.1",
+      "resolved": "http://192.168.110.93:4873/element-ui/-/element-ui-2.11.1.tgz",
+      "integrity": "sha512-PACNMHPWqm+/Wc2f/q93pLNzbNyVbpMCXCrYe81czengSWj7IBku7F3zccybkxtWn5qdCmMDBCpG5BzGJL4rKA==",
       "requires": {
         "async-validator": "~1.8.1",
         "babel-helper-vue-jsx-merge-props": "^2.0.0",

package.json

@@ -20,7 +20,7 @@
     "axios": "0.16.2",
     "better-scroll": "^0.1.15",
     "echarts": "^4.2.0-rc.2",
-    "element-ui": "^2.10.0",
+    "element-ui": "^2.11.1",
     "fastclick": "^1.0.6",
     "html2canvas": "^1.0.0-rc.5",
     "iscroll": "^5.2.0",

src/style/common.scss

@@ -254,3 +254,15 @@ html,body{
       color: #FF9A4B;
     }
 }
+.empty-img {
+    position: relative;
+    height: 100px;
+    width: 100%;
+    display: flex;
+    img {
+        position: relative;
+        margin: 38px auto;
+        height: 24px;
+        width: 106px;
+    }
+}
\ No newline at end of file

src/utils/env-config.js

@@ -10,9 +10,9 @@ export const envConfig = {
     // baseUrl: 'https://uat-sc.yunqueyi.com/',
     // baseUrl: 'http://10.177.15.150:10401/',
     // baseUrl: 'http://10.177.15.150:11905/',
-    baseUrl: 'https://dev-sc.yunqueyi.com/',
+    // baseUrl: 'https://dev-sc.yunqueyi.com/',
     // baseUrl: 'https://test1-sc.yunqueyi.com/',
-    // baseUrl: 'https://uat-sc.yunqueyi.com/',
+    baseUrl: 'https://uat-sc.yunqueyi.com/',
     apiUrl: 'https://uat-api.yunqueyi.com/',
     qiniuFileUrl: "https://uat-sc.yunqueyi.com/contents/admin/qiniu/token1",
     qiniuResourceUrl: "https://test1-videos.yunqueyi.com",

src/utils/fetch.js

@@ -56,7 +56,7 @@ service.interceptors.request.use(config => {
       // console.log('环境变量>>>> ', process.env.BUILD_ENV);
       // config.headers['token'] = 'BFD804F3A3194FBBBE113962222839F6';
       // config.headers['token'] = 'F8209898391C40A0B8DBC1ED9E157291';
-      config.headers['token'] = '299F66567E7C48C78ADE418B364C5A35' || 'F24CD42F1CFA46829639228E9CFE1E3D' || '2E46B77D801C479DBA1C550CE70D348F';
+      config.headers['token'] = '29D71EAAB92E4580AFB16A8011BE7206';
     }else{
       config.headers['token'] = localStorage.getItem('storageToken')
     }

src/utils/filter.js

@@ -207,11 +207,11 @@ const vueFilter = {
   },
   exportStatus: (value) => {
     if(value == 0) {
-        return '数据生成中，请稍后---';
+        return '生成中';
     }else if(value == 1) {
-        return '数据生成完成';
+        return '成功';
     } else {
-        return '文件生成失败 请重新操作导出';
+        return '失败';
     }
   },
   getAvgTime: (value) => {
@@ -232,6 +232,37 @@ const vueFilter = {
     }
     return avgTime;
   },
+  learnTimeValue: (value) => {
+    if(value === null || value === '') {
+        return '-';
+    }
+    if(value === 0) {
+        return '0秒';
+    }
+    let s = parseInt(value),m = 0, h = 0;//秒，分，小时
+	if(s==NaN){//错误error
+		return '';
+    }
+	if(s > 60) { 
+		m = parseInt(s/60); 
+		s = parseInt(s%60); 
+		if(m > 60) { 
+			h = parseInt(m/60); 
+			m = parseInt(m%60); 
+		} 
+    } 
+    let result = "";
+    if(s > 0) { 
+        result = ""+parseInt(s)+"秒"; 
+    }
+	if(m > 0) { 
+		result = ""+parseInt(m)+"分"+result; 
+	} 
+	if(h > 0) { 
+		result = ""+parseInt(h)+"小时"+result; 
+	} 
+	return result; 
+  },
   getTotalTime: (value) => {
       let time = value +'分钟';
       return time;
@@ -280,6 +311,86 @@ const vueFilter = {
     } else if(value == 4) {
         return '已下架';
     }
-  }
+  },
+  examRate: (value) => {
+    let num = (value*100).toFixed(1);
+    let rate = num + '%';
+    return rate;
+  },
+  sexValue: (value) => {
+    if(value == 1) {
+        return '男';
+    } else if(value == 2) {
+        return '女';
+    } else if(value == 0) {
+        return '-';
+    }
+  },
+  joinFlagValue: (value) => {
+    if(value === 1) {
+        return '已参与';
+    } else if(value === 2 || value === 0) {
+        return '未参与';
+    } else {
+        return '-';
+    }
+  },
+  finishFlagValue: (value) => {
+    if(value === 1) {
+        return '已完成';
+    } else if(value === 2 || value === 0) {
+        return '未完成';
+    } else {
+        return '-';
+    }
+  },
+  departmentNameValue: (value) => {
+    if(value === '') {
+        return '-';
+    } 
+    return value;
+  },
+  nullOfValue: (value) => {
+    if(value === null || value === '') {
+        return '-';
+    } 
+    return value;
+  },
+  certGradeValue: (value) => {
+    if(value == 1) {
+        return '优秀';
+    } else if(value == 2) {
+        return '良好';
+    } else if(value == 3) {
+        return '及格';
+    } else if(value == 4) {
+        return '不及格';
+    } else {
+        return '-';
+    }
+  },
+  finishFlagType: (value) => {
+    if(value[0] === null || value[0] === '') {
+        return '-';
+    } 
+    if(value[1] === null) {
+        if(value[0] == 0) {
+            return '未参与';
+        } else if(value[0] == 1) {
+            return '未完成';
+        } else if(value[0] == 2) {
+            return '已完成';
+        }
+    } else {
+        if(value[0] == 0) {
+            return '未参与';
+        } else if(value[0] == 1) {
+            return '已参与';
+        }
+    }
+  },
+  toThousands:(value) => {
+    return (value || 0).toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
+  },
 }
 export default vueFilter
\ No newline at end of file

src/utils/learning/chartData.js

+export function dustributeOption(legendData, seriesData) {
+  let option = {
+    title: {
+      text: "",
+      x: "left"
+    },
+    tooltip: {
+      trigger: "item",
+      // formatter: "{b} : {d}%",
+      formatter:function(data){ 
+        let value = data.name + '：' + parseFloat(data.percent.toFixed(1))+"%"
+        return value;
+      }
+    },
+    label: {
+      // formatter: "{d}%",
+      // color: '#000000',
+      formatter:function(data){ return parseFloat(data.percent.toFixed(1))+"%";} 
+    },
+    color: ['#FF9A4B', '#39AF9A', '#FFB01B', '#3BA0FF', '#5D7092'],
+    legend: {
+      orient: "horizontal",
+      top: "",
+      // left: "0%",
+      data: legendData
+    },
+    series: [
+      {
+        name: "",
+        type: "pie",
+        radius: [0, "78%"],
+        center: ["50%", "59%"],
+        data: seriesData,
+
+        itemStyle: {
+          emphasis: {
+            shadowBlur: 10,
+            shadowOffsetX: 0,
+            shadowColor: "rgba(0, 0, 0, 0.5)"
+          }
+        }
+      }
+    ]
+  };
+  return option;
+}
+export function recordOption(legendData, xAxisData, seriesData) {
+  let option = {
+    title: {
+      text: "",
+      x: "left"
+    },
+    tooltip: {
+      trigger: "axis",
+      axisPointer: {
+        type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
+        shadowStyle: {
+          shadowColor: '#E3EFED',
+          width: 36,
+        },
+      },
+      backgroundColor: 'rgba(0,0,0,0.7)',
+      formatter: function (params) {
+        let relVal = params[0].name + "人数：";
+        let value = 0;
+        for (let i = 0, l = params.length; i < l; i++) {
+          value += params[i].value;
+        }
+        relVal += value + "人";
+        let divList = [];
+        divList[0] = "<div style='background: #5D7092;height: 12px;width: 20px;margin: 5px 5px 0 2px;float: left;border-radius:2px;'></div>";
+        divList[1] = "<div style='background: #39AF9A;height: 12px;width: 20px;margin: 5px 5px 0 2px;float: left;border-radius:2px;'></div>";
+        divList[2] = "<div style='background: #FFB01B;height: 12px;width: 20px;margin: 5px 5px 0 2px;float: left;border-radius:2px;'></div>";
+        divList[3] = "<div style='background: #FF9A4B;height: 12px;width: 20px;margin: 5px 5px 0 2px;float: left;border-radius:2px;'></div>";
+        divList[4] = "<div style='background: #3BA0FF;height: 12px;width: 20px;margin: 5px 5px 0 2px;float: left;border-radius:2px;'></div>";
+        for (let j = params.length - 1 , k = 0; j >= 0; j-- , k++) {
+          if(value != 0) {
+            relVal +=
+              "<br/>" + divList[k] +
+              params[j].seriesName +
+              "占比： " +
+              parseFloat((
+                (100 * parseFloat(params[j].value)) /
+                parseFloat(value)
+              ).toFixed(1)) +
+              "%";
+          } else {
+            relVal +=
+              "<br/>" + divList[k] +
+              params[j].seriesName +
+              "占比： "+ "0%";
+          }
+        }
+        return relVal;
+      }
+    },
+    color: ['#3BA0FF', '#FF9A4B', '#FFB01B', '#39AF9A', '#5D7092'],
+    legend: {
+      right: "3%",
+      data: legendData,
+    },
+    grid: {
+      left: "3%",
+      right: "3%",
+      bottom: "3%",
+      containLabel: true
+    },
+    xAxis: {
+      type: "category",
+      data: xAxisData,
+      axisLine: { //隐藏轴线
+        show: false
+      },
+      axisTick: { // 隐藏刻度
+        show: false
+      },
+    },
+    yAxis: {
+      minInterval: 1,
+      type: "value",
+      name: "人数 (个)",
+      axisLine: { //隐藏轴线
+        show: false
+      },
+      axisTick: { // 隐藏刻度
+        show: false
+      },
+    },
+    series: seriesData,
+  };
+  return option;
+}
+export function certificateOption(xAxisData, seriesJoin, seriesCert, seriesRate, legendData) {
+  let option = {
+    title: {
+      text: "",
+      x: "left"
+    },
+    tooltip: {
+      trigger: "axis",
+      // axisPointer: {
+      //   type: "cross",
+      //   crossStyle: {
+      //     color: "#999"
+      //   }
+      // },
+      axisPointer: {
+        type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
+        shadowStyle: {
+          shadowColor: '#E3EFED',
+          width: 36,
+        },
+      },
+      backgroundColor: 'rgba(0,0,0,0.7)',
+      formatter: function (params) {
+        let relVal = "";
+        let divList = [];
+        divList[0] = "<div style='background: #5D7092;height: 12px;width: 20px;margin: 5px 5px 0 2px;float: left;border-radius:2px;'></div>";
+        divList[1] = "<div style='background: #FFB01B;height: 12px;width: 20px;margin: 5px 5px 0 2px;float: left;border-radius:2px;'></div>";
+        divList[2] = "<div style='background: #559A99;height: 12px;width: 12px;margin: 5px 5px 0 5px;float: left;border-radius:50%;'></div>";
+        for (let j = 0, l = params.length; j < l; j++) {
+          relVal += divList[j] + params[j].seriesName + "： " + params[j].value;
+          if (j === 2) {
+            relVal += "%";
+          } else {
+            relVal += "<br/>";
+          }
+        }
+        return relVal;
+      }
+    },
+    color: ['#5D7092', '#FFB01B', '#559A99'],
+    dataZoom: {
+      show: true,
+      start: 0,
+      end: 100,
+      left:"10%",
+      right:"10%",
+    },
+    legend: {
+      right: '6%',
+      data: legendData,
+    },
+    grid: {
+      left: '3%',
+      right: '3%',
+      containLabel: true
+    },
+    xAxis: [
+      {
+        axisLabel: {
+          interval: 0,
+          rotate: 45
+        },
+        type: "category",
+        data: xAxisData,
+        axisPointer: {
+          type: "shadow"
+        },
+        axisLine: { //隐藏轴线
+          show: false
+        },
+        axisTick: { // 隐藏刻度
+          show: false
+        },
+      }
+    ],
+    yAxis: [
+      {
+        minInterval: 1,
+        type: "value",
+        name: "人数（个）",
+        axisLabel: {
+          formatter: "{value} "
+        },
+        axisLine: { //隐藏轴线
+          show: false
+        },
+        axisTick: { // 隐藏刻度
+          show: false
+        },
+      },
+      {
+        type: "value",
+        name: "比例",
+        min: 0,
+        max: 100,
+        show: false,
+        axisLabel: {
+          formatter: "{value} %"
+        },
+        axisLine: { //隐藏轴线
+          show: false
+        },
+        axisTick: { // 隐藏刻度
+          show: false
+        },
+        // splitLine: {
+        //   show: false
+        // }
+      }
+    ],
+    series: [
+      {
+        name: "参与人数",
+        barWidth: 10,
+        type: "bar",
+        data: seriesJoin,
+        label: {
+          show: true,
+          position: "top",
+          rotate: -90,
+          offset: [-5, -15]
+        }
+      },
+      {
+        name: legendData[1],
+        barWidth: 10,
+        type: "bar",
+        data: seriesCert,
+        label: {
+          show: true,
+          position: "top",
+          rotate: -90,
+          offset: [-5, -15]
+        }
+      },
+      {
+        name: legendData[2],
+        type: "line",
+        yAxisIndex: 1,
+        data: seriesRate,
+        label: {
+          show: true,
+          position: "top",
+          formatter: "{c}%" //这是关键，在需要的地方加上就行了
+        }
+      }
+    ]
+  };
+  return option;
+}
+export function durationOption(xAxisData, seriesData) {
+  let option = {
+    title: {
+      text: "",
+      x: "left"
+    },
+    tooltip: {
+      trigger: "axis",
+      axisPointer: {
+        type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
+      },
+      formatter:function(data){ 
+        let value = data[0].name + '平均天数：' + data[0].value+"天"
+        return value;
+      }
+    },
+    color: ['#449284'],
+    dataZoom: {
+      show: true,
+      start: 0,
+      end: 100,
+      left:"10%",
+      right:"10%",
+    },
+    grid: {
+      left: 20,
+      right: 20,
+      containLabel: true
+    },
+    xAxis: [
+      {
+        axisLabel: {
+          interval: 0,
+          rotate: 35
+        },
+        type: "category",
+        data: xAxisData,
+        axisTick: {
+          alignWithLabel: true
+        },
+        axisLine: { //隐藏轴线
+          show: false
+        },
+        axisTick: { // 隐藏刻度
+          show: false
+        },
+      }
+    ],
+    yAxis: [
+      {
+        type: "value",
+        name: "完成时长 (天)",
+        axisLine: { //隐藏轴线
+          show: false
+        },
+        axisTick: { // 隐藏刻度
+          show: false
+        },
+      }
+    ],
+    series: [
+      {
+        name: "时长",
+        type: "bar",
+        barWidth: 18,
+        data: seriesData,
+        label: {
+          show: true,
+          position: "top",
+          formatter: "{c}", //这是关键，在需要的地方加上就行了
+          rotate: -90,
+          offset: [-5, -15]
+        }
+      }
+    ]
+  };
+  return option;
+}
+
+export function educationEffect(xAxisData, seriesBefore, seriesAfter) {
+  let option = {
+    title: {
+      text: ""
+    },
+    tooltip: {
+      trigger: "axis",
+      axisPointer: {
+        type: "shadow"
+      },
+      formatter: function (params) {
+        let relVal = params[0].name + "";
+        let divList = [];
+        divList[0] = "<div style='background: #FEBB3C;height: 12px;width: 20px;margin: 5px 5px 0 2px;float: left;border-radius:2px;'></div>";
+        divList[1] = "<div style='background: #39AF9A;height: 12px;width: 20px;margin: 5px 5px 0 2px;float: left;border-radius:2px;'></div>";
+        for (let j = 0; j <= params.length - 1; j++) {
+          relVal +=
+            "<br/>" + divList[j] +
+            params[j].seriesName +
+            "： " + params[j].value + "%";
+        }
+        return relVal;
+      }
+    },
+    color: ["#FEBB3C", "#39AF9A"],
+    legend: {
+      right: "3%",
+      data: ["项目前总正确率", "项目后总正确率"]
+    },
+    grid: {
+      top: '20%',
+      left: "3%",
+      right: "3%",
+      bottom: "3%",
+      containLabel: true
+    },
+    xAxis: {
+      type: "category",
+      data: xAxisData,
+      axisLine: { //隐藏轴线
+        show: false
+      },
+      axisTick: { // 隐藏刻度
+        show: false
+      },
+    },
+    yAxis: {
+      min: 0,
+      max: 100,
+      type: "value",
+      name: "正确率 (%)",
+      axisLabel: {
+        formatter: "{value}%"
+      },
+      axisLine: { //隐藏轴线
+        show: false
+      },
+      axisTick: { // 隐藏刻度
+        show: false
+      },
+    },
+    series: [
+      {
+        name: "项目前总正确率",
+        type: "bar",
+        barWidth: 18,
+        data: seriesBefore,
+        label: {
+          show: true,
+          position: "top",
+          formatter: "{c}%",
+          rotate: -90,
+          offset: [-5, -15]
+        }
+      },
+      {
+        name: "项目后总正确率",
+        type: "bar",
+        barWidth: 18,
+        data: seriesAfter,
+        label: {
+          show: true,
+          position: "top",
+          formatter: "{c}%",
+          rotate: -90,
+          offset: [-5, -15]
+        }
+      }
+    ]
+  };
+  return option;
+}
+
+export function knowledgeEffect(xAxisData, seriesBefore, seriesAfter) {
+  let option = {
+    title: {
+      text: ""
+    },
+    tooltip: {
+      trigger: "axis",
+      axisPointer: {
+        type: "shadow"
+      },
+      formatter: function (params) {
+        let relVal = params[0].name + "";
+        let divList = [];
+        divList[0] = "<div style='background: #FFB01B;height: 12px;width: 20px;margin: 5px 5px 0 2px;float: left;border-radius:2px;'></div>";
+        divList[1] = "<div style='background: #5D7092;height: 12px;width: 20px;margin: 5px 5px 0 2px;float: left;border-radius:2px;'></div>";
+        for (let j = 0; j <= params.length - 1; j++) {
+          relVal +=
+            "<br/>" + divList[j] +
+            params[j].seriesName +
+            "： " + params[j].value + "%";
+        }
+        return relVal;
+      }
+    },
+    color: ["#FFB01B", "#5D7092"],
+    dataZoom: {
+      show: true,
+      start: 0,
+      end: 100,
+      left:"10%",
+      right:"10%",
+    },
+    legend: {
+      right: 20,
+      data: ["培训前正确率", "培训后正确率"]
+    },
+    grid: {
+      top: '20%',
+      left: 20,
+      right: 20,
+      containLabel: true
+    },
+    xAxis: {
+      axisLabel: {
+        interval: 0,
+        rotate: 45
+      },
+      axisLine: { //隐藏轴线
+        show: false
+      },
+      axisTick: { // 隐藏刻度
+        show: false
+      },
+      type: "category",
+      data: xAxisData,
+    },
+    yAxis: {
+      min: 0,
+      max: 100,
+      type: "value",
+      name: "正确率 (%)",
+      axisLine: { //隐藏轴线
+        show: false
+      },
+      axisTick: { // 隐藏刻度
+        show: false
+      },
+      axisLabel: {
+        formatter: "{value}%"
+      }
+    },
+    series: [
+      {
+        name: "培训前正确率",
+        type: "bar",
+        barWidth: 18,
+        data: seriesBefore,
+        label: {
+          show: true,
+          position: "top",
+          formatter: "{c}%", //这是关键，在需要的地方加上就行了
+          rotate: -90,
+          offset: [-5, -15]
+        },
+      },
+      {
+        name: "培训后正确率",
+        type: "bar",
+        barWidth: 18,
+        data: seriesAfter,
+        label: {
+          show: true,
+          position: "top",
+          formatter: "{c}%", //这是关键，在需要的地方加上就行了
+          rotate: -90,
+          offset: [-5, -15]
+        }
+      }
+    ]
+  };
+  return option;
+}
+
+export function examTimes(xAxisData, seriesData) {
+  let option = {
+    title: {
+      text: "",
+      x: "left"
+    },
+    tooltip: {
+      trigger: "axis",
+      axisPointer: {
+        type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
+      },
+      formatter:function(data){ 
+        let value = data[0].name + '完成人数：' + data[0].value+"名"
+        return value;
+      }
+    },
+    color: ['#449284'],
+    grid: {
+      left: 20,
+      right: 20,
+      containLabel: true
+    },
+    dataZoom: {
+      show: true,
+      start: 0,
+      end: 100,
+      left:"10%",
+      right:"10%",
+    },
+    xAxis: [
+      {
+        axisLabel: {
+          interval: 0,
+        },
+        type: "category",
+        data: xAxisData,
+        axisTick: {
+          alignWithLabel: true
+        },
+        axisLine: { //隐藏轴线
+          show: false
+        },
+        axisTick: { // 隐藏刻度
+          show: false
+        },
+      }
+    ],
+    yAxis: [
+      {
+        type: "value",
+        name: "人数 (名)",
+        minInterval: 1,
+        min: 0,
+        splitNumber: 5,
+        axisLabel: {
+          formatter: '{value} '
+        },
+        axisLine: { //隐藏轴线
+          show: false
+        },
+        axisTick: { // 隐藏刻度
+          show: false
+        },
+      }
+    ],
+    series: [
+      {
+        name: "",
+        type: "bar",
+        barWidth: 17,
+        data: seriesData,
+        label: {
+          show: true,   
+          position: "top",
+          formatter: "{c}",
+          rotate: -90,
+          offset: [-5, -15],
+        }
+      }
+    ]
+  };
+  return option;
+}
+
+export function examScore(xAxisData, seriesData) {
+  let option = {
+    title: {
+      text: "",
+      x: "left"
+    },
+    tooltip: {
+      trigger: "axis",
+      axisPointer: {
+        type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
+      },
+      formatter:function(data){ 
+        let value = data[0].name + '人数：' + data[0].value+"名"
+        return value;
+      }
+    },
+    color: ['#CAA861'],
+    grid: {
+      left: 20,
+      right: 20,
+      containLabel: true
+    },
+    dataZoom: {
+      show: true,
+      start: 0,
+      end: 100,
+      left:"10%",
+      right:"10%",
+    },
+    xAxis: [
+      {
+        axisLabel: {
+          interval: 0,
+        },
+        type: "category",
+        data: xAxisData,
+        axisTick: {
+          alignWithLabel: true
+        },
+        axisLine: { //隐藏轴线
+          show: false
+        },
+        axisTick: { // 隐藏刻度
+          show: false
+        },
+      }
+    ],
+    yAxis: [
+      {
+        type: "value",
+        name: "人数 (名)",
+        minInterval: 1,
+        min: 0,
+        splitNumber: 5,
+        axisLine: { //隐藏轴线
+          show: false
+        },
+        axisTick: { // 隐藏刻度
+          show: false
+        },
+      }
+    ],
+    series: [
+      {
+        name: "",
+        type: "bar",
+        barWidth: 17,
+        data: seriesData,
+        label: {
+          show: true,
+          position: "top",
+          formatter: "{c}",
+          rotate: -90,
+          offset: [-5, -15],
+        }
+      }
+    ]
+  };
+  return option;
+}
+export function ringOption(num, color) {
+  let option = {
+    title: {
+      text: num + '%',
+      x: 'center',
+      y: 'center',
+      textStyle: {
+        fontSize: 24,
+        fontWeight: 'normal',
+        color: '#000000',
+      },
+      subtextStyle: {
+        color: "#000000",
+        fontWeight: 'normal'
+      }
+    },
+
+    series: [{
+      type: 'pie',
+      radius: ['100%', '80%'],
+      // silent: true,
+      labelLine: {
+        show: false
+      },
+      data: [{
+        hoverOffset: 1,
+        value: num,
+        itemStyle: {
+          color: color
+        },
+        label: {
+          show: false
+        }
+      },
+      {
+        markArea: {
+          silent: true,
+        },
+        value: 100 - num,
+        itemStyle: {
+          color: '#F0F2F5'
+        },
+        label: {
+          show: false
+        }
+      }
+      ]
+    }]
+  };
+  return option;
+}
+
+export function getPicOption(title, legendData, colorData, seriesData, centerValue) {
+  let option = {
+    title: {
+      text: title,
+      x: "left",
+      left: '20px',
+      top: "20px",
+    },
+    tooltip: {
+      trigger: 'item',
+      // formatter: "{a} <br/>{b} : {c} ({d}%)"
+      formatter:function(data){ 
+        let value = data.name+'人数：'+data.value  + '<br/>占比：' + parseFloat(data.percent.toFixed(1))+"%"
+        return value;
+      }
+    },
+    label: {
+      formatter:function(data){ return parseFloat(data.percent.toFixed(1))+"%";} 
+    },
+    legend: {
+      orient: "vertical",
+      top: "center",
+      right: "28",
+      data: legendData
+    },
+    grid: {
+      left: "30%",
+      right: "0%",
+      bottom: "10%",
+      containLabel: true
+    },
+    color: colorData,
+    backgroundColor: '#FFFFFF',
+    series: [
+      {
+        name: "",
+        type: "pie",
+        radius:  [0, '55%'],
+        center: centerValue,
+        data: seriesData,
+      }
+    ]
+  };
+  return option;
+}
+export function getBarOption(xAxisData, seriesData) {
+  let option = {
+    title: {
+      text: "人员年龄分布",
+      x: "left",
+      left: '20px',
+      top: "20px",
+    },
+    color: ['rgba(91, 143, 249, 0.85)'],
+    backgroundColor: '#FFFFFF',
+    tooltip: {
+      trigger: "axis",
+      axisPointer: {
+        type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
+      },
+      formatter:function(data){ 
+        let value = data[0].name + '人数：' + data[0].value+"名"
+        return value;
+      }
+    },
+    grid: {
+      top: '84',
+      bottom: '36',
+      left: '20',
+      right: '20',
+      containLabel: true
+    },
+    xAxis: [
+      {
+        type: 'category',
+        data: xAxisData,
+        axisLabel: {
+          interval: 0
+        },
+        axisTick: { // 隐藏刻度
+          show: false
+        },
+        axisLine: { //隐藏轴线
+          show: false
+        },
+      }
+    ],
+    yAxis: [
+      {
+        type: 'value',
+        minInterval: 1,
+        axisLine: { //隐藏轴线
+          show: false
+        },
+        axisTick: { // 隐藏刻度
+          show: false
+        },
+      }
+    ],
+    series: [
+      {
+        name: '',
+        type: 'bar',
+        barWidth: 18,
+        data: seriesData,
+      }
+    ]
+  };
+  return option;
+}
\ No newline at end of file

src/utils/mixins.js

@@ -220,24 +220,25 @@ module.exports = {
         },
 
         // 通用GET请求
-        GET(api, para, callback,str) {
+        GET(api, para, callback, str, noLoading) {
            // para.token = para.token || this.token || "343BCABC890349ACAF357FA79122F9FE"
             let url = api + this.getUrlPara(para)
             url = encodeURI(url);
             return fetch({
                 url: getBaseUrl(url),
                 method: 'get',
-                data: para
+                data: para,
+                noLoading
             })
         },
-        reportGET(api, para, callback,str) {
+        reportGET(api, para, callback, str) {
             // para.token = para.token || this.token || "343BCABC890349ACAF357FA79122F9FE"
              let url = api + this.getUrlPara(para)
              url = encodeURI(url);
              return fetch({
                  url: getReportUrl(url),
                  method: 'get',
-                 data: para
+                 data: para,
              })
          },
         // saas-GET请求
@@ -273,12 +274,13 @@ module.exports = {
             })
         },
         // 通用POST请求
-        POST(api, para, callback) {
+        POST(api, para, callback, str, noLoading) {
             // para.token = para.token || this.token || "343BCABC890349ACAF357FA79122F9FE"
             return fetch({
                 url: getBaseUrl(api),
                 method: 'post',
-                data: para
+                data: para,
+                noLoading
             })
         },
         reportPOST(api, para, callback) {

src/utils/operation.js

@@ -305,6 +305,20 @@ export function setRegionOption2(data) {
   }
   return option;
 }
+export function setRegionOptionNew(data) {
+  let option = [];
+  for (let i = 0; i < data.length; i++) {
+    let obj = data[i];
+    obj.label = data[i].label;
+    obj.value = data[i].id;
+    if(obj.degree == 4 || obj.degree == 0 || obj.label == "全部") {
+    // if(obj.degree == 4 ) {
+      obj.leaf = true;
+    }
+    option.push(obj);
+  }
+  return option;
+}
 export function setAdministrativeId(value) {
   let areaId = '000';
   for (let i = 0; i < value.length; i++) {
@@ -335,16 +349,17 @@ export function getLearnOrganization(data) {
     let arr = [];
     return arr;
   }
-  let organization = [
-    {
-      label: "全部",
-      value: 0
-    },
-  ];
+  // let organization = [
+  //   {
+  //     label: "全部",
+  //     value: 0
+  //   },
+  // ];
+  let organization = [];
   for (let i = 0; i < data.length; i++) {
     let obj = {
-      label: data[i].hospital_name,
-      value: data[i].hospital_id,
+      label: data[i].hospitalName,
+      value: data[i].hospitalId,
       index: i,
     };
     organization.push(obj);
@@ -355,17 +370,25 @@ export function getPicOption(title, legendData, colorData, seriesData) {
   let option = {
     title: {
       text: title,
-      x: "center",
-      top: "3%",
+      x: "left",
+      left: '20px',
+      top: "20px",
     },
     tooltip: {
       trigger: 'item',
-      formatter: "{a} <br/>{b} : {c} ({d}%)"
+      // formatter: "{a} <br/>{b} : {c} ({d}%)"
+      formatter:function(data){ 
+        let value = data.name + '：' + data.percent.toFixed(1)+"%"
+        return value;
+      }
+    },
+    label: {
+      formatter:function(data){ return data.percent.toFixed(1)+"%";} 
     },
     legend: {
       orient: "vertical",
-      top: "3%",
-      left: "left",
+      top: "center",
+      right: "26",
       data: legendData
     },
     grid: {
@@ -375,13 +398,13 @@ export function getPicOption(title, legendData, colorData, seriesData) {
       containLabel: true
     },
     color: colorData,
-    backgroundColor: '#F3F3F3',
+    backgroundColor: '#FFFFFF',
     series: [
       {
         name: "",
         type: "pie",
-        radius: "55%",
-        center: ["60%", "65%"],
+        radius:  [0, '55%'],
+        center: ["50%", "57.2%"],
         data: seriesData,
       }
     ]
@@ -391,16 +414,22 @@ 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: ['rgba(91, 143, 249, 0.85)'],
+    backgroundColor: '#FFFFFF',
+    tooltip: {
+      trigger: 'item',
+      formatter: "{b} : {c} "
     },
-    color: ['#3398DB'],
-    backgroundColor: '#F3F3F3',
     grid: {
-      left: '3%',
-      right: '4%',
-      bottom: '3%',
+      top: '84',
+      bottom: '36',
+      left: '20',
+      right: '20',
       containLabel: true
     },
     xAxis: [
@@ -409,22 +438,32 @@ export function getBarOption(xAxisData, seriesData) {
         data: xAxisData,
         axisLabel: {
           interval: 0
-        }
-        // axisTick: {
-        //   alignWithLabel: true
-        // }
+        },
+        axisTick: { // 隐藏刻度
+          show: false
+        },
+        axisLine: { //隐藏轴线
+          show: false
+        },
       }
     ],
     yAxis: [
       {
-        type: 'value'
+        type: 'value',
+        minInterval: 1,
+        axisLine: { //隐藏轴线
+          show: false
+        },
+        axisTick: { // 隐藏刻度
+          show: false
+        },
       }
     ],
     series: [
       {
         name: '',
         type: 'bar',
-        barWidth: 30,
+        barWidth: 18,
         data: seriesData,
       }
     ]
@@ -592,13 +631,23 @@ export function initRank(data) {
   }
   return list;
 }
-export function getAvgTime(data) {
-  let list = [0, 0];
-  if (data != null && data != '') {
-    list[0] = Math.floor(data / 60);
-    list[1] = data % 60;
+export function getAvgTime(value) {
+  let list = [0,0];
+  let avgTime = '';
+  if(value != null && value !='') {
+      list[0] = Math.floor(value / 60);
+      list[1] = value % 60;
   }
-  return list;
+  if(list[0] == 0 && list[1] == 0) {
+      avgTime = list[1] + '秒';
+  } else if(list[0] == 0 && list[1] != 0) {
+      avgTime = list[1] + '秒';
+  } else if(list[0] != 0 && list[1] == 0) {
+      avgTime = list[0] + '分钟';
+  } else if(list[0] != 0 && list[1] != 0) {
+      avgTime = list[0] + '分钟' + list[1] + '秒';
+  }
+  return avgTime;
 }
 export function getComponent(data) {
   let list = [];
@@ -641,4 +690,66 @@ export function setSelectedKeys(checkedKeys, halfCheckedKeys) {
     selected.push(obj);
   }
   return selected;
+}
+export function setDuringTime(time , type) {
+  let value = time;
+  if(time == '' || time == null) {
+    return '';
+  }
+  if(type == 'begin') {
+    value = time[0];
+  } else if(type == 'end') {
+    value = time[1];
+  }
+  return value;
+}
+export function setHospitalIdList(data) {
+  let listStr = '';
+  if(data == null || data.length == 0) {
+    return listStr
+  }
+  for(let i = 0 ; i<data.length ; i++) {
+    listStr += data[i]+'_';
+  }
+  listStr = listStr.substring(0, listStr.length - 1);
+  return listStr;
+}
+export function getHospitalIdList(data) {
+  let listArr = [];
+  if(data == null || data == '') {
+    return listArr
+  }
+  listArr = data.split("_")
+  return listArr;
+}
+export function learnTimeValue(value) {
+  if(value === null || value === '') {
+    return '-';
+  }
+  if(value === 0) {
+    return '0秒';
+  }
+  let s = parseInt(value),m = 0, h = 0;//秒，分，小时
+  if(s==NaN){//错误error
+    return '';
+  }
+  if(s > 60) { 
+    m = parseInt(s/60); 
+    s = parseInt(s%60); 
+    if(m > 60) { 
+      h = parseInt(m/60); 
+      m = parseInt(m%60); 
+    } 
+  } 
+  let result = "";
+  if(s > 0) { 
+      result = ""+parseInt(s)+"秒"; 
+  }
+  if(m > 0) { 
+    result = ""+parseInt(m)+"分"+result; 
+  } 
+  if(h > 0) { 
+    result = ""+parseInt(h)+"小时"+result; 
+  } 
+  return result; 
 }
\ No newline at end of file

src/views/layout/slidebar.vue

@@ -139,7 +139,7 @@
                 index: 'report-list'
               },
               {
-                title: '导出下载',
+                title: '任务列表',
                 icon: 'el-icon-document',
                 index: 'export-download'
               }

src/views/learning/data-alignment.vue

@@ -90,8 +90,7 @@
       <el-table-column prop="townName" label="乡镇/街道" show-overflow-tooltip></el-table-column>
       <div slot="empty">
         <div class="table-empty">
-          <img src="../../assets/image/no-content1.png" />
-          <p>没有相关数据，请重新选择查询范围</p>
+          <img src="../../assets/image/noData.png" />
         </div>
       </div>
     </el-table>
@@ -102,14 +101,14 @@
         @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
         :current-page="formData.pageNo"
-        :page-sizes="[20, 50 ,100]"
+        :page-sizes="[20, 50 ,100, 200]"
         :page-size="formData.pageSize"
         layout="total, sizes, prev, pager, next, jumper"
         :total="totalRows"
       ></el-pagination>
     </div>
     <el-dialog title="发布学情报告" :visible.sync="dialogVisible" width="30%" append-to-body>
-      <p style="color:red">项目【{{ projectName }}】的数据修改</p>
+      <p style="color:red">项目【{{ projectName }}】的数据修改将于次日生效</p>
       <p>确认需要更新学情报告吗？</p>
       <span slot="footer" class="dialog-footer">
         <el-button @click="dialogVisible = false">取消</el-button>
@@ -239,6 +238,7 @@ export default {
     handleSizeChange(val) {
       console.log(`每页 ${val} 条`);
       vm.formData.pageSize = val;
+      vm.formData.pageNo = 1;
       vm.search();
     },
     // 换页
@@ -258,18 +258,23 @@ export default {
       setTimeout(function(){
         openLoading(vm);
       },20);
-      let checkAll = operationData.hasAll(vm.formInline.organization);
+      // let checkAll = operationData.hasAll(vm.formInline.organization);
       let req = {
         projectId: vm.projectId,
+        hospitalIdList: vm.formInline.organization,
+        originalFlag: vm.formInline.checked == false ? 2 : 1,
+        regionId: vm.formInline.region[vm.formInline.region.length - 1],
+        timeFlag: vm.formInline.timeFlag,
+        beginDate: operationData.setDuringTime(vm.formInline.during,'begin'),
+        endDate: operationData.setDuringTime(vm.formInline.during,'end'),
+        
         achievementStatus: vm.formData.achievementStatus,
         status: vm.formData.status,
-        ids: operationData.getIds(vm.formInline,vm.organizationList,checkAll),
-        type: operationData.getSearchType(vm.formInline,checkAll),
         doctorName: vm.formData.doctorName,
         pageNo: vm.formData.pageNo,
         pageSize: vm.formData.pageSize,
       };
-      vm.reportGET("report/portal/getProjectData", req).then(res => {
+      vm.POST("stats/report/getProjectData", req).then(res => {
         // closeLoading(vm);
         if (res.code == "000000") {
           vm.tableData = res.data.projectData;
@@ -339,7 +344,7 @@ export default {
         joinDoctorIdList: operationData.getAjustmentList(vm.changedDoctor),
       };
       openLoading(vm);
-      vm.reportPOST("report/portal/peopleAdjustment", req).then(res => {
+      vm.POST("stats/report/peopleAdjustment", req).then(res => {
         closeLoading(vm);
         vm.$message(res.message);
         if (res.code == "000000") {
@@ -396,5 +401,11 @@ export default {
   .pagination {
     margin-right: 10px;
   }
+  .table-empty {
+    img {
+      height: 24px;
+      width: 106px;
+    }
+  }
 }
 </style>

src/views/learning/export-download.vue

@@ -2,35 +2,47 @@
   <div class="export-download">
     <bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond"></bread-crumb>
     <div class="component-content screenSet" id="screenSet">
-      <p>导出文件列表</p>
-      <el-table :data="tableData" style="width: 100%">
+      <div class="p-title">任务列表</div>
+      <el-tabs v-model="listType" type="card" @tab-click="handleClick">
+        <el-tab-pane label="查看报告" name="2"></el-tab-pane>
+        <el-tab-pane label="导出列表" name="1"></el-tab-pane>
+      </el-tabs>
+      <!-- 
+        :cell-style = "cellStyle"
+        :header-cell-style = "headCellStyle"
+       -->
+      <el-table :data="tableData" class="table-export" style="width: 100%">
         <el-table-column
           prop="title"
           label="名称"
-          align="center"
+          align="left"
           min-width="150"
           show-overflow-tooltip
         ></el-table-column>
-        <el-table-column prop="createdTime" label="时间" align="center" min-width="120">
-          <template slot-scope="scope">{{ scope.row.createdTime }}</template>
+        <el-table-column prop="time" label="时间" align="center" min-width="120">
+          <template slot-scope="scope">{{ scope.row.time }}</template>
         </el-table-column>
-        <el-table-column prop="status" label="状态" align="center" min-width="150">
-          <template slot-scope="scope">{{ scope.row.status | exportStatus }}</template>
+        <el-table-column prop="status" label="状态" align="left" min-width="75">
+          <template slot-scope="scope">
+            <span class="logo" v-bind:class="{ 'logo_0': scope.row.status == 0, 'logo_1': scope.row.status == 1, 'logo_2': scope.row.status == 2 }"></span>
+            <span class="text">{{ scope.row.status | exportStatus }}</span>
+          </template>
         </el-table-column>
-        <el-table-column label="操作" fixed="right" align="center" min-width="70">
+        <el-table-column label="操作" fixed="right" align="center" >
           <template slot-scope="scope">
             <el-button
-              type="primary"
               :disabled="scope.row.buttonStatus"
               size="small"
+              type="text"
+              v-if="scope.row.status != 2"
               @click="update(scope.row)"
             >{{ scope.row.buttonText }}</el-button>
+            <div v-if="scope.row.status == 2">-</div>
           </template>
         </el-table-column>
         <div slot="empty">
           <div class="table-empty">
-            <img src="../../assets/image/no-content1.png" />
-            <p>没有相关数据，请重新选择查询范围</p>
+            <img src="../../assets/image/noData.png" />
           </div>
         </div>
       </el-table>
@@ -40,7 +52,7 @@
           @size-change="handleSizeChange"
           @current-change="handleCurrentChange"
           :current-page="param.pageNo"
-          :page-sizes="[20, 50 ,100]"
+          :page-sizes="[20, 50 ,100 ,200]"
           :page-size="param.pageSize"
           layout="total, sizes, prev, pager, next, jumper"
           :total="totalRows"
@@ -62,7 +74,7 @@ export default {
   data() {
     return {
       curmbFirst: "学情报告",
-      curmbSecond: "导出下载",
+      curmbSecond: "任务列表",
       projectId: "",
       tableData: [],
       param: {
@@ -71,7 +83,8 @@ export default {
       },
       totalRows: 0,
       totalTime: 3,
-      queryData: {}
+      queryData: {},
+      listType: "2"
       // buttonText: "刷新",
       // buttonStatus: false,
     };
@@ -79,75 +92,94 @@ export default {
   created() {
     vm = this;
     this.projectId = vm.getUrlSearch(window.location.href, "projectId");
+    let listType = vm.getUrlSearch(window.location.href, "listType");
+    if(listType == null) {
+      vm.listType = '2';
+    } else {
+      vm.listType = listType;
+    }
     this.search();
   },
   mounted: function() {
     commonUtil.resizeHeight();
   },
   methods: {
+    handleClick(tab, event) {
+      vm.listType = tab.name;
+      vm.search()
+    },
     setButton() {
       for (let i = 0; i < vm.tableData.length; i++) {
         vm.tableData[i].index = i;
         if (vm.tableData[i].status == 1) {
-          vm.tableData[i].buttonText = "下载";
+          if(vm.listType == '2') {
+            vm.tableData[i].buttonText = "查看报告";
+          } else if(vm.listType == '1') {
+            vm.tableData[i].buttonText = "下载";
+          }
           vm.tableData[i].buttonStatus = false;
-        } else if(vm.tableData[i].status == 0) {
+        } else if (vm.tableData[i].status == 0) {
           vm.tableData[i].buttonText = "刷新";
           vm.tableData[i].buttonStatus = false;
-        } else if(vm.tableData[i].status == 2) {
+        } else if (vm.tableData[i].status == 2) {
           vm.tableData[i].buttonText = "刷新";
           vm.tableData[i].buttonStatus = true;
         }
       }
     },
     search() {
-      // this.setButton();
-      let req = {
-        projectId: vm.projectId
-      };
-      if(req.projectId == null) {
-        req.projectId = '';
+      let projectId = "";
+      if (vm.projectId != null) {
+        projectId = vm.projectId;
       }
-      vm.reportGET("report/downLoad/getDownloadList", req).then(res => {
+      let reqList = {
+        projectId: projectId,
+        pageNo: vm.param.pageNo,
+        pageSize: vm.param.pageSize,
+        type: parseInt(vm.listType),
+        id: ""
+      };
+      vm.GET("stats/mission/missionlist", reqList).then(res => {
         if (res.code == "000000") {
-          vm.tableData = res.data.data;
-          vm.totalRows = res.data.totalRows;
+          vm.tableData = res.data.list;
+          vm.totalRows = res.data.totalSize;
           vm.setButton();
         }
       });
     },
-    downLoad(row) {
-      // vm.queryData = this.$route.query;
-      // let req = vm.queryData;
-      // openLoading(vm);
-      // vm.reportGET("report/downLoad/downLoad", req).then(res => {
-      //   closeLoading(vm);
-      //   // console
-      //   if (res.code == "000000") {
-      //   }
-      // });
-
-      setTimeout(() => {
-        window.open(row.fileUrl);
-      }, 500);
-    },
     getDownLoadStatus(row) {
-      let req = {
+      // let req = {
+      //   id: row.id
+      // };
+      let projectId = "";
+      if (vm.projectId != null) {
+        projectId = vm.projectId;
+      }
+      let reqList = {
+        projectId: projectId,
+        pageNo: vm.param.pageNo,
+        pageSize: vm.param.pageSize,
+        type: parseInt(vm.listType),
         id: row.id
       };
-      vm.reportGET("report/downLoad/getDownLoadStatus", req).then(res => {
+      vm.GET("stats/mission/missionlist", reqList).then(res => {
         if (res.code == "000000") {
-          vm.tableData[row.index].status = res.data.data;
+          vm.tableData[row.index].status = res.data.list[0].status;
+          let updateStatus = res.data.list[0].status;
           // console.log('res.data.data',res.data.data);
-          if (res.data.data == 1) {
+          if (updateStatus == 1) {
             vm.tableData[row.index].title = vm.tableData[row.index].title + " ";
-            vm.tableData[row.index].buttonText = "下载";
-            vm.tableData[row.index].fileUrl = res.data.url;
-          } else if(res.data.data == 0) {
-            console.log("res", res, vm.tableData[row.index]);
+            // vm.tableData[row.index].buttonText = "下载";
+            if(vm.listType == '2') {
+              vm.tableData[row.index].buttonText = "查看报告";
+            } else if(vm.listType == '1') {
+              vm.tableData[row.index].buttonText = "下载";
+            }
+            vm.tableData[row.index].url = res.data.list[0].url;
+          } else if (updateStatus == 0) {
             vm.tableData[row.index].title = vm.tableData[row.index].title + " ";
             vm.tableData[row.index].buttonText = "刷新";
-          } else if(res.data.data == 2) {
+          } else if (updateStatus == 2) {
             vm.tableData[row.index].title = vm.tableData[row.index].title + " ";
             vm.tableData[row.index].buttonText = "刷新";
             vm.tableData[row.index].buttonStatus = true;
@@ -159,9 +191,22 @@ export default {
         }
       });
     },
+    downLoad(row) {
+      setTimeout(() => {
+        window.open(row.url);
+      }, 500);
+    },
+    exportTime(row) {
+      vm.$router.push("item-list?downloadId="+row.id);
+    },
     update(row) {
       if (vm.tableData[row.index].status == 1) {
-        vm.downLoad(row);
+        // vm.downLoad(row);
+        if(vm.listType == '2') {
+          vm.exportTime(row);
+        } else if(vm.listType == '1') {
+          vm.downLoad(row);
+        }
       } else {
         this.$nextTick(function() {
           console.log(vm.tableData[row.index]);
@@ -189,21 +234,93 @@ export default {
     // 更改数据显示数量
     handleSizeChange(val) {
       vm.param.pageSize = val;
+      vm.param.pageNo = 1;
       vm.search();
     },
     // 换页
     handleCurrentChange(val) {
-      vm.param.pageNo = value;
+      vm.param.pageNo = val;
       vm.search();
-    }
+    },
+
+    cellStyle({ row, column, rowIndex, columnIndex }) {
+      if (columnIndex === 0) {
+        console.log('column',column)
+          return `padding-left:40px;`;
+      } else {
+          return ''
+      }
+    },
+
+    // 表头行的 style 的回调方法
+    headCellStyle({ row, column, rowIndex, columnIndex }) {
+      if (columnIndex === 0 && rowIndex === 0) {
+          return `padding-left:40px;`;
+      } else {
+          return ''
+      }
+    },
   }
 };
 </script>
 <style lang="scss">
+.el-tooltip__popper{
+  max-width: 300px;
+}
 .export-download {
   .component-content {
     background: #fff;
     padding: 10px;
+    
+    .p-title {
+      position: relative;
+      margin-top: 30px;
+      margin-left: 30px;
+      margin-bottom: 30px;
+      height: 25px;
+      font-size: 18px;
+      font-weight: 600;
+      line-height: 25px;
+      color: #000000;
+    }
+    .table-export {
+      thead th {
+        background: #fff;
+      }
+      .logo {
+        margin-top: 8px;
+        margin-right: 6px;
+        float: left;
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+      }
+      .logo_0 {
+        background: #1890ff;
+      }
+      .logo_1 {
+        background: #52C41A;
+      }
+      .logo_2 {
+        background: #F5222D;
+      }
+      .text {
+        float: left;
+      }
+      .el-button--text {
+        color: #449284;
+      }
+      .el-button.is-disabled {
+        background: #fff !important;
+        border: 0px solid #fff !important;
+      }
+    }
+    .table-empty {
+      img {
+        height: 24px;
+        width: 106px;
+      }
+    }
   }
 }
 </style>
\ No newline at end of file

src/views/learning/item-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 v-if="item.num !=0" class="weight">{{ item.num }} </span> 
-            <span v-if="item.num !=0">{{ item.unit }} </span>
-            <span v-if="index == 2 && second !=0" class="weight" >{{ second }} </span> 
-            <span v-if="index == 2 && second !=0">秒</span>
-          </div>
-        </el-card>
-        <div v-if="index+1 !== cardData.length" class="line"></div>
-       </div>
-      <el-table
-        :data="tableData"
-        class="course-table">
-        <el-table-column prop="courseName" label="课程名" align="center">
+  <div class="course-analysis-wrap">
+    <div class="box-list">
+      <div class="box-min">
+        <div v-for="(item , index) in cardData" :key="index" class="box-card" v-bind:class="{ 'box-last': index == 2 }">
+          <p class="value">{{ item.value }}</p>
+          <p class="title">{{ item.title }}</p>
+        </div>
+      </div>
+    </div>
+    <div class="spacing"></div>
+    <!-- <div class="chart-title">考试列表</div> -->
+    <div v-if="downloadId == null">
+      <el-table :data="tableData" class="course-table">
+        <el-table-column prop="courseName" label="课程名" align="center"></el-table-column>
+        <el-table-column prop="courseTime" label="课程时长" align="center">
+          <template slot-scope="scope">{{ scope.row.courseTime | learnTimeValue }}</template>
         </el-table-column>
-        <el-table-column prop="courseTotalTime" label="课程时长" align="center">
-          <template slot-scope="scope">
-            {{ scope.row.courseTotalTime | getTotalTime }}
-          </template>
+        <el-table-column prop="averageTime" label="人均学习时长" align="center">
+          <template slot-scope="scope">{{ scope.row.averageTime | learnTimeValue }}</template>
         </el-table-column>
-        <el-table-column prop="courseAvgStudyTime" label="人均学习时长" align="center">
+        <el-table-column prop="joinCount" label="参与培训人数" align="center"></el-table-column>
+        <el-table-column prop="finishCount" label="完成培训人数" align="center"></el-table-column>
+        <el-table-column label="操作" min-width="50" align="center">
           <template slot-scope="scope">
-            {{ scope.row.courseAvgStudyTime | getAvgTime }}
+            <el-button class="button-jump" @click="goPage(scope.row)" type="text" size="small">查看名单</el-button>
           </template>
         </el-table-column>
-        <el-table-column prop="courseLearnerCount" label="参与培训人数" align="center">
+        <div slot="empty">
+          <div class="table-empty">
+            <img src="../../assets/image/noData.png" />
+          </div>
+        </div>
+      </el-table>
+    </div>
+    <div v-if="downloadId != null">
+      <el-table :data="tableData.slice((pageNo-1)*pageSize,pageNo*pageSize)" class="course-table">
+        <el-table-column prop="courseName" label="课程名" align="center"></el-table-column>
+        <el-table-column prop="courseTime" label="课程时长" align="center">
+          <template slot-scope="scope">{{ scope.row.courseTime | learnTimeValue }}</template>
         </el-table-column>
-        <el-table-column prop="courseFinishedCount" label="完成培训人数" align="center">
+        <el-table-column prop="averageTime" label="人均学习时长" align="center">
+          <template slot-scope="scope">{{ scope.row.averageTime | learnTimeValue }}</template>
         </el-table-column>
-        <el-table-column fixed="right" label="操作" min-width="50" align="center">
+        <el-table-column prop="joinCount" label="参与培训人数" align="center"></el-table-column>
+        <el-table-column prop="finishCount" label="完成培训人数" align="center"></el-table-column>
+        <el-table-column label="操作" min-width="50" align="center">
           <template slot-scope="scope">
-            <el-button
-              @click="checkName(scope.row)"
-              type="text"
-              size="small"
-            >查看名单</el-button>
+            <el-button class="button-jump" @click="goPage(scope.row)" type="text" size="small">查看名单</el-button>
           </template>
         </el-table-column>
         <div slot="empty">
           <div class="table-empty">
-            <img src="../../assets/image/no-content1.png">
-            <p>没有相关数据，请重新选择查询范围</p>
+            <img src="../../assets/image/noData.png" />
           </div>
         </div>
       </el-table>
-      <div class="pagination">
-        <el-pagination
-          background
-          @size-change="handleSizeChange"
-          @current-change="handleCurrentChange"
-          :current-page="pageNo"
-          :page-sizes="[20, 50 ,100]"
-          :page-size="pageSize"
-          layout="total, sizes, prev, pager, next, jumper"
-          :total="totalRows"
-        ></el-pagination>
-      </div>
     </div>
+    <div class="pagination">
+      <el-pagination
+        class="pagination"
+        background
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="pageNo"
+        :page-sizes="[20, 50 ,100, 200]"
+        :page-size="pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="totalRows"
+      ></el-pagination>
+    </div>
+    <div class="spacing"></div>
+  </div>
 </template>
 <script>
 import { create } from "domain";
@@ -81,25 +90,38 @@ export default {
     },
     organizationList: {
       type: Array
-    }
+    },
+    timeInfoData: {
+      type: Object
+    },
   },
   data() {
     return {
       cardData: [],
       tableData: [],
       totalRows: 0,
-      projectId: '',
+      projectId: "",
       pageNo: 1,
       pageSize: 20,
-      second: 0,
+      timeInfoChild: {},
+      downloadId: null,
+    };
+  },
+   watch: {
+    timeInfoData: {
+      deep: true,
+      handler(nv, ov) {
+        vm.timeInfoChild = nv;
+      }
     }
   },
   created() {
     vm = this;
-    this.projectId = vm.getUrlSearch(window.location.href, "id");
+    vm.projectId = vm.getUrlSearch(window.location.href, "id");
+    vm.downloadId = vm.getUrlSearch(window.location.href, "downloadId");
   },
   mounted: function() {
-    this.$on('search',()=>{
+    this.$on("search", () => {
       // console.log(this.formInline);
       this.pageNo = 1;
       this.search();
@@ -111,145 +133,226 @@ export default {
         }
       });
     });
-    this.$on("reset",() =>{
+    this.$on("reset", () => {
       this.pageNo = 1;
       this.pageSize = 20;
       this.tableData = [];
       this.cardData = [];
     });
+    this.$on("static", () => {
+      vm.getStatic();
+    });
   },
   methods: {
+    getStatic() {
+      // console.log(vm.timeInfoChild);
+      let courseAnalysisModel = vm.timeInfoChild.courseAnalysisModel;
+      vm.setCardData(courseAnalysisModel);
+      vm.tableData = courseAnalysisModel.pCourseList;
+      vm.totalRows = courseAnalysisModel.totalSize;
+    },
     setCardData(data) {
       vm.totalRows = data.projectCourseCount;
-      let avgTime = [];
-      avgTime = operationData.getAvgTime(data.projectAvgStudyTime);
-      vm.cardData = [
+      let cardData = [
+        {
+          title: "项目所有课程数",
+          value: "0门"
+        },
         {
-          title: '项目所有课程数',
-          num: data.projectCourseCount,
-          unit: '门课程',
-        },{
-          title: '项目所有课程总时长',
-          num: data.projectCourseTotalTime,
-          unit: '分钟',
-        },{
-          title: '项目人均学习时长',
-          num: avgTime[0],
-          unit: '分钟',
+          title: "项目所有课程总时长",
+          value: "0分钟"
+        },
+        {
+          title: "项目人均学习时长",
+          value: "0分钟"
         }
       ];
-      vm.second = avgTime[1];
+      cardData[0].value = data.totalSize+'门';
+      // cardData[1].value = data.pCourseTotalTime+"分钟";
+      cardData[1].value = operationData.learnTimeValue(data.pCourseTotalTime);
+      cardData[2].value = operationData.learnTimeValue(data.pCourseAvg);
+      vm.cardData = cardData;
     },
-    search() {
-      if (vm.formInline.region.length == 0) {
-        const h = this.$createElement;
-        vm.$message({
-          message: h('p', { style: 'color: #FF3399' }, '请先选择地区后再进行查询 ')
-        });
-        return;
-      }
-      let checkAll = operationData.hasAll(vm.formInline.organization)
+    search(type) {
+      // if (vm.formInline.region.length == 0) {
+      //   const h = this.$createElement;
+      //   vm.$message({
+      //     message: h(
+      //       "p",
+      //       { style: "color: #FF3399" },
+      //       "请先选择地区后再进行查询 "
+      //     )
+      //   });
+      //   return;
+      // }
+      let checkAll = operationData.hasAll(vm.formInline.organization);
       let req = {
         projectId: vm.projectId,
-        ids: operationData.getIds(vm.formInline,vm.organizationList,checkAll),
-        type: operationData.getSearchType(vm.formInline,checkAll),
-        originalFlag: vm.formInline.checked == false ? 0 : 1
+        beginDate: operationData.setDuringTime(vm.formInline.during, "begin"),
+        endDate: operationData.setDuringTime(vm.formInline.during, "end"),
+        hospitalIdList: vm.formInline.organization,
+        originalFlag: vm.formInline.checked == false ? 2 : 1,
+        regionId: vm.formInline.region[vm.formInline.region.length - 1],
+        timeFlag: vm.formInline.timeFlag,
+        pageNo: vm.pageNo,
+        pageSize: vm.pageSize,
       };
-      console.log("3 req", req);
-      openLoading(vm);
-      vm.reportGET("report/portalProjectCourse/getTotal", req).then(res => {
-        closeLoading(vm);
+      vm.POST("stats/report/course", req, '', '', true).then(res => {
         if (res.code == "000000") {
-          if(res.data.projectCourseCount == 0 ) {
-            vm.$message("没有相关数据，请重新选择查询范围");
+          if (type !== 2) {
+            vm.setCardData(res.data);
           }
-          vm.setCardData(res.data)
+          vm.tableData = res.data.pCourseList;
+          vm.totalRows = res.data.totalSize;
         } else {
-          vm.$message(res.message);
-        }
-      });
-      let reqList = req;
-      reqList.pageNo = vm.pageNo;
-      reqList.pageSize = vm.pageSize;
-      vm.reportGET("report/portalProjectCourse/getCourseList", reqList).then(res => {
-        closeLoading(vm);
-        if (res.code == "000000") {
-          vm.tableData = res.data.list;
+          // vm.$message(res.message);
         }
       });
     },
-    checkName(data) {
-      console.log('dialogData',this.dialogData);
-      let checkAll = operationData.hasAll(vm.formInline.organization)
+    goPage(data) {
       let routerData = {};
-      routerData = this.dialogData;
-      routerData.projectId = vm.projectId;
-      routerData.projectName = vm.getUrlSearch(window.location.href, "projectName");
-      routerData.tableType = 1;
-      routerData.courseId = data.courseId;
-      routerData.ids = operationData.getIds(vm.formInline,vm.organizationList,checkAll);
-      routerData.type = operationData.getSearchType(vm.formInline,checkAll);
-      routerData.originalFlag = vm.formInline.checked == false ? 0 : 1;
-     
+      if(vm.downloadId == null) {
+        // console.log("dialogData", this.dialogData);
+        routerData = this.dialogData;
+        routerData.projectId = vm.projectId;
+        routerData.projectName = vm.getUrlSearch(
+          window.location.href,
+          "projectName"
+        );
+        routerData.tableType = 1;
+        routerData.courseId = data.courseId;
+        routerData.beginDate = operationData.setDuringTime(vm.formInline.during, "begin"),
+        routerData.endDate = operationData.setDuringTime(vm.formInline.during, "end"),
+        routerData.regionId = vm.formInline.region[vm.formInline.region.length - 1];
+        routerData.originalFlag = vm.formInline.checked == false ? 2 : 1;
+        routerData.timeFlag = vm.formInline.timeFlag;
+        routerData.hospitalIdList = operationData.setHospitalIdList(vm.formInline.organization);
+      } else {
+        let reportParamModel = vm.timeInfoChild.reportParamModel;
+        routerData.base = 'static';
+        routerData.region = reportParamModel.regionNames;
+        routerData.organization = reportParamModel.hospitalNames;
+        routerData.projectId = reportParamModel.projectId,
+        routerData.projectName = reportParamModel.projectName,
+        routerData.tableType = 1;
+        routerData.courseId = data.courseId;
+        routerData.beginDate = reportParamModel.beginDate;
+        routerData.endDate = reportParamModel.endDate;
+        routerData.regionId = reportParamModel.regionId;
+        routerData.originalFlag = reportParamModel.originalFlag;
+        routerData.timeFlag = reportParamModel.timeFlag;
+        routerData.hospitalIdList = operationData.setHospitalIdList(reportParamModel.hospitalIdList);
+      }
+
       // this.$router.push({ path: '/name-list', query: routerData});
-      let routeData = this.$router.resolve({ path: '/name-list', query: routerData});
-      window.open(routeData.href, '_blank');
+      let routeData = this.$router.resolve({
+        path: "/name-list",
+        query: routerData
+      });
+      window.open(routeData.href, "_blank");
     },
     handleSizeChange(val) {
       console.log(`每页 ${val} 条`);
       vm.pageSize = val;
-      vm.search();
+      vm.pageNo = 1;
+      if(vm.downloadId == null) {
+        vm.search();
+      }
     },
     handleCurrentChange(val) {
       console.log(`当前页: ${val}`);
       vm.pageNo = val;
-      vm.search();
-    }, 
-  },
-}
+      if(vm.downloadId == null) {
+        vm.search();
+      }
+    }
+  }
+};
 </script>
 <style lang="scss">
 .course-analysis-wrap {
-    background: #fff;
-    overflow: hidden;
-    padding: 10px;
-    .weight {
-      font-weight: bold;
-    }
-    .title:after {
-      clear: both
-    }
-    .el-card {
-      border-width: 0px;
-    }
-    .el-card.is-always-shadow {
-      box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1);
-    }
-    .line {
-      background: #e4e4e4;
-      height: 80px;
-      width: 1px;
-      float: left;
-      margin-top: 20px;
+  background: #fff;
+  overflow: hidden;
+  .spacing {
+    position: relative;
+    width: 100%;
+    height: 20px;
+    background: #f0f2f5;
+  }
+  .chart-title {
+    position: relative;
+    margin-top: 17px;
+    margin-left: 30px;
+    width: 100%;
+    height: 60px;
+    font-size: 18px;
+    font-weight: 600;
+    line-height: 60px;
+    color: #000000;
+  }
+  .box-list {
+    position: relative;
+    height: 120px;
+    background: #f0f2f5;
+    overflow-x: auto;
+    overflow-y: hidden;
+    .box-min {
+      height: 120px;
+      min-width: 950px;
     }
     .box-card {
+      position: relative;
+      background-color: #ffffff;
       width: 32%;
-      margin-right: 1%;
+      margin-right: 2%;
+      height: 120px;
       float: left;
       .el-card__header {
         border-bottom-width: 0;
       }
-      .title {
+      .el-card__body {
+        padding: 0px;
+      }
+      .value {
+        color: #373839;
         text-align: center;
+        margin-top: 24px;
+        margin-bottom: 8px;
+        height: 45px;
+        line-height: 45px;
+        font-size: 32px;
+        font-weight: 500;
       }
-      .box-content {
-         text-align: center;
-         height: 40px;
+      .title {
+        color: #666666;
+        text-align: center;
+        font-size: 14px;
+        height: 20px;
+        line-height: 20px;
       }
     }
-    .course-table {
-      top: 20px;
-      margin-bottom: 20px;
+    .box-last {
+      margin-right: 0%;
+    }
+  }
+  .course-table {
+    top: 20px;
+    padding: 0;
+    width: 95%;
+    margin:0 auto 20px auto;
+    .button-jump {
+      color: #449284;
+    }
+  }
+  .pagination {
+    margin-top: 30px;
+    margin-right: 13px;
+  }
+  .table-empty {
+    img {
+      height: 24px;
+      width: 106px;
     }
+  }
 }
 </style>
\ No newline at end of file

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

 <template>
   <div class="crowd-analysis-wrap">
-    <el-radio-group class="crowd-radio" v-model="radio" size="small" @change="updateRadio">
-      <el-radio-button label="1">全部用户</el-radio-button>
-      <el-radio-button label="2">参与项目</el-radio-button>
-      <el-radio-button label="3">通过项目</el-radio-button>
+    <el-radio-group v-if="showRadioValue === 0" class="crowd-radio" v-model="radio" size="small" @change="updateRadio">
+      <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>
+    <div v-if="showRadioValue === 1" class="change-radio">{{ changeRadio[radio] }}</div>
     <div v-show="!showData" class="empty">
       <p>"没有相关数据，请重新选择查询范围"</p>
     </div>
+    <div>
+    <div class="chart" v-show="showData">
+      <div v-if="showEducation === true">
+        <div class="item" id="education" ref="education"></div>
+      </div>
+      <div v-if="showEducation === false" class="empty-left">
+        <div class="title">人员学历分布</div>
+        <img src="../../assets/image/noData.png" />
+      </div>
+      <div v-if="showJob === true">
+        <div class="item item-right" id="job" ref="job"></div>
+      </div>
+      <div v-if="showJob === false" class="empty-left item-right">
+        <div class="title">人员职务分布</div>
+        <img src="../../assets/image/noData.png" />
+      </div>
+    </div>
+    </div>
+    <div>
     <div class="chart" v-show="showData">
-      <div class="item" id="education" ref="education"></div>
-      <div class="item item-right" id="job" ref="job"></div>
       <div class="item">
-        <div class="title">用户性别分布</div>
+        <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> -->
+            <div v-if="index == 0" class="sex-img" id="ring0" ref="ring0"></div>
+            <div v-if="index == 1" class="sex-img" id="ring1" ref="ring1"></div>
+            <div v-if="index == 2" class="sex-img" id="ring2" ref="ring2"></div>
             <p class="sex-num">{{ item.num }}</p>
+            <p class="sex-type">{{ item.type }}</p>
           </div>
         </div>
       </div>
-      <div class="item item-right" id="age" ref="age"></div>
+      <div v-if="showAge === true">
+        <div class="item item-right" id="age" ref="age"></div>
+      </div>
+      <div v-if="showAge === false" class="empty-left item-right">
+        <div class="title">人员年龄分布</div>
+        <img src="../../assets/image/noData.png" />
+      </div>
+    </div>
     </div>
+    <div class="spacing"></div>
   </div>
 </template>
 <script>
@@ -33,6 +62,7 @@ import { mapGetters } from "vuex";
 import { openLoading, closeLoading } from "../../utils/utils";
 import * as commonUtil from "../../utils/utils";
 import * as operationData from "../../utils/operation";
+import * as chartData from "../../utils/learning/chartData";
 import echarts from "echarts";
 import { setTimeout } from "timers";
 let vm = null;
@@ -49,31 +79,83 @@ export default {
     },
     organizationList: {
       type: Array
-    }
+    },
+    timeInfoData: {
+      type: Object
+    },
+    showRadio: {
+      type: Number
+    },
   },
   data() {
     return {
-      radio: 1,
-      sexData: [],
+      radio: '0',
+      sexData: [
+        {
+          color: '#1890FF',
+          type: "男性",
+          num: 0,
+          rate: 0,
+        },
+        {
+          color: '#FB5B52',
+          type: "女性",
+          num: 0,
+          rate: 0,
+        },
+        {
+          color: '#5D7092',
+          type: "未完善信息",
+          num: 0,
+          rate: 0,
+        }
+      ],
       projectId: "",
       crowdData: {},
-      showData: false,
+      showData: true,
       echartsData: {
         chart1: {},
         chart2: {},
         chart3: {},
       },
+      downloadId: null,
+      timeInfoChild: {},
+
+      showEducation: true,
+      showJob: true,
+      showAge: true,
+      changeRadio: {
+        '0': '全部人员',
+        '1': '参与项目',
+        '2': '通过项目',
+      },
+      showRadioValue: 0,
     };
   },
+  watch: {
+    timeInfoData: {
+      deep: true,
+      handler(nv, ov) {
+        vm.timeInfoChild = nv;
+      }
+    },
+    showRadio: {
+      deep: true,
+      handler(nv, ov) {
+        vm.showRadioValue = nv;
+      }
+    },
+  },
   created() {
     vm = this;
-    this.projectId = vm.getUrlSearch(window.location.href, "id");
+    vm.projectId = vm.getUrlSearch(window.location.href, "id");
+    vm.downloadId = vm.getUrlSearch(window.location.href, "downloadId");
   },
   mounted: function() {
     // commonUtil.resizeHeight();
     //父组件传值
     this.$on("search", () => {
-      vm.radio = 1;
+      vm.radio = '0';
       this.search();
     });
     this.$on("init", () => {
@@ -84,51 +166,48 @@ export default {
       });
     });
     this.$on("reset", () => {
-      this.showData = false;
-      this.crowdData = {};
     });
-    if (this.activeName == "second") {
-    }
+    this.$on("static", () => {
+      vm.getStatic();
+    });
   },
   methods: {
+    getStatic() {
+      // console.log(vm.timeInfoChild);
+      let userAnalysisModel = vm.timeInfoChild.userAnalysisModel;
+      setTimeout(function() {
+        vm.educationDivision(userAnalysisModel.eduListInMap[0]);
+        vm.jobDivision(userAnalysisModel.titleListInMap[0]);
+        vm.getSexData(userAnalysisModel.sexListInMap[0]);
+        vm.ageDivision(userAnalysisModel.ageListInMap[0]);
+      },20);
+    },
     search() {
-      if (vm.formInline.region.length == 0) {
-        const h = this.$createElement;
-        vm.$message({
-          message: h('p', { style: 'color: #FF3399' }, '请先选择地区后再进行查询 ')
-        });
-        return;
-      }
-      let checkAll = operationData.hasAll(vm.formInline.organization);
+      // let checkAll = operationData.hasAll(vm.formInline.organization);
       let req = {
         projectId: vm.projectId,
-        cityOrHospitalId: operationData.getIds(vm.formInline,vm.organizationList,checkAll),
-        kind: operationData.getSearchType(vm.formInline,checkAll),
-        type: vm.radio,
-        originalFlag: vm.formInline.checked == false ? 0 : 1
+        beginDate: operationData.setDuringTime(vm.formInline.during, "begin"),
+        endDate: operationData.setDuringTime(vm.formInline.during, "end"),
+        hospitalIdList: vm.formInline.organization,
+        originalFlag: vm.formInline.checked == false ? 2 : 1,
+        regionId: vm.formInline.region[vm.formInline.region.length - 1],
+        timeFlag: vm.formInline.timeFlag
       };
-      console.log("2 req", req);
-      openLoading(vm);
-      vm.reportGET("report/portal/getPeoplesDetails", req).then(res => {
-        closeLoading(vm);
+      vm.POST("stats/report/userAnalysis_pc/"+vm.radio, req, '', '', true).then(res => {
         if (res.code == "000000") {
-          if(res.data.educationList.length == 0 && res.data.jobTitle.length == 0 ) {
-            vm.$message("没有相关数据，请重新选择查询范围");
-            this.showData = false;
-          } else {
-            this.showData = true;
-          }
+          // if(res.data.educationList.length == 0 && res.data.jobTitle.length == 0 ) {
+          //   vm.$message("没有相关数据，请重新选择查询范围");
+          //   this.showData = false;
+          // } else {
+          //   this.showData = true;
+          // }
           this.crowdData = res.data;
           setTimeout(function() {
-            vm.educationDivision();
-            vm.jobDivision();
-            vm.getSexData();
-            vm.ageDivision();
+            vm.educationDivision(res.data.eduList);
+            vm.jobDivision(res.data.titleList);
+            vm.getSexData(res.data.sexList);
+            vm.ageDivision(res.data.ageList);
           },20);
-          // this.educationDivision();
-          // this.jobDivision();
-          // this.getSexData();
-          // this.ageDivision();
         } else {
           vm.$message(res.message);
         }
@@ -144,91 +223,147 @@ export default {
       });
     },
     updateRadio(value) {
-      console.log(value,vm.radio);
-      this.search();
+      if(vm.downloadId == null) {
+        console.log(value,vm.radio);
+        this.search();
+      } else {
+        let index = parseInt(value);
+        let userAnalysisModel = vm.timeInfoChild.userAnalysisModel;
+        setTimeout(function() {
+          vm.educationDivision(userAnalysisModel.eduListInMap[index]);
+          vm.jobDivision(userAnalysisModel.titleListInMap[index]);
+          vm.getSexData(userAnalysisModel.sexListInMap[index]);
+          vm.ageDivision(userAnalysisModel.ageListInMap[index]);
+        },20);
+      }
     },
     //用户性别分布
-    getSexData() {
-      let sexList = this.crowdData.sexList;
-      // if(sexList.length <3) {
-      //   this.sexData = [];
-      //   return;
-      // }
-      this.sexData = [
+    getSexData(data) {
+      let sexList = data;
+      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;
+
+      if(sexList.length > 0) {
+        for(let i = 0 ; i<sexList.length; i++) {
+          sum += sexList[i].value;
+        }
+        sexData[0].num =  sexList[1].value;
+        sexData[1].num =  sexList[2].value;
+        sexData[2].num =  sexList[0].value;
+        if(sum > 0) {
+          sexData[0].rate = (sexList[1].value / sum *100).toFixed(1);
+          sexData[1].rate = (sexList[2].value / sum *100).toFixed(1);
+          sexData[2].rate = (sexList[0].value / sum *100).toFixed(1);
         }
       }
+      // if(sexList.length >= 3) {
+      //   sexData[1].num =  sexList[2].value;
+      //   sexData[1].rate = (sexList[2].value / sum *100).toFixed(1);
+      // }
+
+      // console.log('this.$refs.ring0',this.$refs.ring0[0]);
+      let myChartRing0 = echarts.init(this.$refs.ring0[0]);
+      let option0 = chartData.ringOption(sexData[0].rate, sexData[0].color);
+      myChartRing0.setOption(option0);
+
+      let myChartRing1 = echarts.init(this.$refs.ring1[0]);
+      let option1 = chartData.ringOption(sexData[1].rate, sexData[1].color);
+      myChartRing1.setOption(option1);
+
+      let myChartRing2 = echarts.init(this.$refs.ring2[0]);
+      let option2 = chartData.ringOption(sexData[2].rate, sexData[2].color);
+      myChartRing2.setOption(option2);
+
+      vm.sexData = sexData;
     },
     educationDivision(data) {
-      let myChart = echarts.init(this.$refs.education);
-      let educationList = operationData.removeZero(this.crowdData.educationList);
+      if(data.length == 0) {
+        vm.showEducation = false;
+        return;
+      } else {
+        vm.showEducation = true;
+      }
+      let educationList = data;
       let legendData = [];
       let seriesData = [];
-      let colorData = ["#FF9F7F", "#008000", "#E062AE", "#37A2DA", "#0050DC", "#67E0E3", "#8A2BE2"];
-      // for (let i = 0; i < educationList.length; i++) {
-      //   legendData[i] = educationList[i].name;
-      // }
-      if(educationList.length > 0) {
-        legendData = ['博士后','博士','硕士','本科','大专','中专及以下','其他'];
+      let colorData = ["#7453FF", "#3BA0FF", "#5D7092", "#39AF9A", "#FFBC3D", "#FF9A4B", "#B87F00"];
+
+      for (let i = 0; i < educationList.length; i++) {
+        legendData[i] = educationList[i].name;
+        seriesData[i] = educationList[i];
       }
-      seriesData = educationList;
-      let option = operationData.getPicOption(
-        "用户学历分布",
+      let centerValue = ["242", "57.2%"];
+      let option = chartData.getPicOption(
+        "人员学历发布",
         legendData,
         colorData,
-        seriesData
+        seriesData,
+        centerValue
       );
-      myChart.setOption(option);
-      vm.echartsData.chart1 = myChart;
-      vm.updateResize();
+      setTimeout(function(){
+        let myChart = echarts.init(vm.$refs.education);
+        myChart.setOption(option);
+        vm.echartsData.chart1 = myChart;
+      },20);
     },
     jobDivision(data) {
-      let myChart2 = echarts.init(this.$refs.job);
-      let jobTitle = operationData.removeZero(this.crowdData.jobTitle);
+      if(data.length == 0) {
+        vm.showJob = false;
+        return;
+      } else {
+        vm.showJob = true;
+      }
+      let titleList = data;
       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", "#FF9A4B", "#B87F00", "#7453FF"];
+      for (let i = 0; i < titleList.length; i++) {
+        legendData[i] = titleList[i].name;
+        seriesData[i] = titleList[i];
       }
-      seriesData = jobTitle;
-      let option = operationData.getPicOption(
-        "用户职务分布",
+      let centerValue = ["242", "57.2%"];
+      let option = chartData.getPicOption(
+        "人员职务分布",
         legendData,
         colorData,
-        seriesData
+        seriesData,
+        centerValue,
       );
-      myChart2.setOption(option);
-      vm.echartsData.chart2 = myChart2;
-      vm.updateResize();
+      setTimeout(function(){
+        let myChart2 = echarts.init(vm.$refs.job);
+        myChart2.setOption(option);
+        vm.echartsData.chart2 = myChart2;
+      },20);
     },
     ageDivision(data) {
-      let myChart3 = echarts.init(this.$refs.age);
+      if(data.length == 0) {
+        vm.showAge = false;
+        return;
+      } else {
+        vm.showAge = true;
+      }
       let xAxisData = [];
       let seriesData = [];
-      let ageList = this.crowdData.ageList;
+      let ageList = data;
       for (let i = 0; i < ageList.length; i++) {
         // xAxisData[i] = ageList[i].name;
         if(ageList[i].value != 0) {
@@ -241,20 +376,37 @@ export default {
           seriesData.push(ageList[i].value);
         }
       }
-      let option = operationData.getBarOption(xAxisData, seriesData);
+      let option = chartData.getBarOption(xAxisData, seriesData);
 
-      myChart3.setOption(option);
-      vm.echartsData.chart3 = myChart3;
-      vm.updateResize();
+      setTimeout(function(){
+        let myChart3 = echarts.init(vm.$refs.age);
+        myChart3.setOption(option);
+        vm.echartsData.chart3 = myChart3;
+      },20);
     }
   }
 };
 </script>
 <style lang="scss">
 .crowd-analysis-wrap {
-  background: #fff;
+  background: #F0F2F5;
   overflow: hidden;
-  padding: 10px;
+  // padding: 10px;
+  overflow-x: auto;
+  .change-radio {
+    position: relative;
+    top: 5px;
+    left: 100%;
+    margin-left: -155px;
+    width:120px;
+    height:34px;
+    background:rgba(68,146,132,1);
+    border-radius:4px;
+    font-size:14px;
+    line-height: 34px;
+    text-align: center;
+    color: #fff;
+  }
   .header-title {
     padding: 10px 12px;
     font-size: 12px;
@@ -279,57 +431,94 @@ export default {
     color: #FF3399;
     text-align: center;
   }
+  .spacing {
+    position: relative;
+    width: 100%;
+    height: 20px;
+    background: #f0f2f5;
+  }
   .chart {
     position: relative;
     margin: 20px auto 0 auto;
-    width: 100%;
-    // overflow: auto;
+    width: 1124px;
+    overflow-x: hidden;
+    .empty-left {
+      position: relative;
+      float: left;
+      margin-right: 20px;
+      padding: 0;
+      width: 552px;
+      height: 360px;
+      display: flex;
+      background: #ffffff;
+      .title {
+        position: relative;
+        margin-top: 20px;
+        margin-left: 20px;
+        font-size: 18px;
+        font-weight: bold;
+      }
+      img {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%,-50%);
+        height: 24px;
+        width: 106px;
+      }
+    }
+    
     .item {
       position: relative;
       float: left;
-      margin-top: 20px;
+      margin-right: 20px;
       padding: 0;
-      width: 48%;
-      // height: 20vw;
-      height: 350px;
-      border: 1px solid #dedede;
+      // width: 48%;
+      width: 552px;
+      height: 360px;
+      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 {
         position: relative;
-        top: 42px;
+        top: 67px;
         left: 0;
         .sex-item {
           float: left;
-          height: 350px;
-          width: 33.3%;
+          width: 184px;
           .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;
           }
         }
       }
     }
     .item-right {
-      float: right;
+      margin-right: 0;
     }
   }
 }

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

@@ -2,9 +2,9 @@
   <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">
-            <el-tooltip class="item-tool" placement="bottom-end" effect="light">
+        <div class="box-min">
+          <div v-for="(item , index) in cardData" :key="index" class="box-card" v-bind:class="{ 'box-last': index == 2 }">
+            <el-tooltip v-if="index == 2" class="item-tool" placement="bottom-end" effect="light">
               <div slot="content">
                 <p v-for="text in item.content">{{ text }}</p>
               </div>
@@ -16,49 +16,121 @@
             </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>
+              <p class="has">{{ item.hasKey }}：{{ item.hasNum | toThousands }}</p>
+              <p class="should">{{ item.shouldKey }}：{{ item.shouldNum | toThousands }}</p>
             </div>
-          </el-card>
-          <!-- <div v-if="index+1 !== cardData.length" class="line"></div> -->
+          </div>
         </div>
       </div>
-      <div class="chart-title">证历分布情况</div>
-      <div class="chart-distributeChart">
-        <div class="distributeChart" id="distributeChart" ref="distributeChart"></div>
-        <div class="data-text">
-          <div class="content-text">
-            <p v-for="item in distributeList" :key="item.value">{{item.label}}：{{item.value}}人</p>
+      <div class="date-table">
+         <el-tabs class="change-range" v-model="checkRange" type="card" @tab-click="handleCheckRange">
+          <el-tab-pane label="累计" name="1"></el-tab-pane>
+          <el-tab-pane label="新增" name="2"></el-tab-pane>
+        </el-tabs>
+        <el-radio-group v-if="showRadioValue === 0" class="change-date" v-model="checkTime" size="medium" @change="handleCheckTime">
+          <el-radio-button label="1">日</el-radio-button>
+          <el-radio-button label="2">周</el-radio-button>
+          <el-radio-button label="3">月</el-radio-button>
+          <el-radio-button label="4">年</el-radio-button>
+        </el-radio-group>
+        <div v-if="showRadioValue === 1" class="change-radio">{{ changeRadio[checkTime] }}</div>
+        <el-table :data="tableDateTime" style="width: 100%">
+          <el-table-column prop="date" label="日期" align="center" min-width="100"></el-table-column>
+          <el-table-column prop="hospitalCount" label="应参与机构数" align="center"></el-table-column>
+          <el-table-column prop="hospitalJoinCount" label="已参与机构数" align="center"></el-table-column>
+          <el-table-column prop="doctorCount" label="应参与人数" align="center"></el-table-column>
+          <el-table-column prop="doctorJoinCount" label="已参与人数" align="center"></el-table-column>
+          <el-table-column prop="finishCount" :label="finishCountLabel" align="center"></el-table-column>
+
+          <el-table-column v-if="gradeFlag[0] == true" prop="grade1Count" label="优秀" align="center"></el-table-column>
+          <el-table-column v-if="gradeFlag[1] == true" prop="grade2Count" label="良好" align="center"></el-table-column>
+          <el-table-column v-if="gradeFlag[2] == true" prop="grade3Count" label="及格" align="center"></el-table-column>
+          <el-table-column v-if="gradeFlag[3] == true" prop="grade4Count" label="不及格" align="center"></el-table-column>
+          <div slot="empty">
+            <div class="table-empty">
+              <img src="../../assets/image/noData.png" />
+            </div>
+          </div>
+        </el-table>
+        <div class="pagination">
+          <el-pagination
+            background
+            @size-change="handleSizeDwmy"
+            @current-change="handleCurrentDwmy"
+            :current-page="formDwmy.pageNo"
+            :page-sizes="[20, 30, 100 ,200]"
+            :page-size="formDwmy.pageSize"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="totalCount"
+          ></el-pagination>
+        </div>
+      </div>
+      <div v-if="certFlag != 0">
+      <div v-if="downloadId == null">
+        <div class="spacing"></div>
+        <div class="chart-title">证书分布情况</div>
+        <div v-if="showDistributeChart === true" class="chart-distributeChart">
+          <div class="distributeChart" id="distributeChart" ref="distributeChart"></div>
+          <div class="data-text">
+            <div class="content-text">
+              <p v-for="item in distributeList" >{{item.label}}：{{item.value}}人</p>
+            </div>
           </div>
         </div>
+        <div v-if="showDistributeChart === false" class="empty-img">
+          <img src="../../assets/image/noData.png" />
+        </div>
       </div>
-      <div class="chart-title">证书级别按学历发布情况</div>
-      <div class="chart-recordChart">
+      <div class="spacing"></div>
+      <div class="chart-title">证书级别按学历分布情况</div>
+      <div class="overflow-chart">
+      <div v-if="showRecordChart === true" class="chart-recordChart">
         <div class="recordChart" id="recordChart" ref="recordChart"></div>
         <div class="data-text">
           <div class="content-text">
-            <p v-for="item in recordList" :key="item.value">{{item.label}}：{{item.value}}人</p>
+            <p v-for="item in recordList" >{{item.label}}：{{item.value}}人</p>
           </div>
         </div>
       </div>
-      <!-- <el-select class="chart-select" v-model="rankType" placeholder="请选择">
-        <el-option
-          v-for="item in rankOptions"
-          :key="item.value"
-          :label="item.label"
-          :value="item.value"
-        ></el-option>
-      </el-select>-->
-      <div class="chart-title">培训情况排名</div>
-      <div class="chart" id="certificateChart" ref="certificateChart"></div>
-      <div class="chart-title">在线培训完成时长情况</div>
-      <div class="chart" id="durationChart" ref="durationChart"></div>
-    </div>
+      </div>
+      <div v-if="showRecordChart === false" class="empty-img">
+        <img src="../../assets/image/noData.png" />
+      </div>
+      </div>
+      <!-- <div v-if="certFlag != 0"> -->
+        <div class="spacing"></div>
+        <div class="chart-title-more">
+          <p>项目情况排名</p>
+          <el-radio-group v-if="showCertificateChart === true && showRadioValue === 0"  class="rank-radio" size="medium" v-model="rankType" @change="changeRank">
+            <el-radio-button label="1">{{ rankLabel1 }}</el-radio-button>
+            <el-radio-button label="2">{{ rankLabel2 }}</el-radio-button>
+            <el-radio-button label="3">按参与人数排名</el-radio-button>
+          </el-radio-group>
+          <div v-if="showRadioValue === 1" class="change-radio2">{{ changeRadio2[rankType] }}</div>
+        </div>
+        <div v-if="showCertificateChart === true" class="overflow-chart">
+          <div class="chartCert" id="certificateChart" ref="certificateChart"></div>
+        </div>
+        <div v-if="showCertificateChart === false" class="empty-img">
+          <img src="../../assets/image/noData.png" />
+        </div>
+        <div class="spacing"></div>
+        <div class="chart-title">在线培训完成天数情况</div>
+        <div v-if="showDurationChart === true" class="overflow-chart">
+          <div class="chartDuration" id="durationChart" ref="durationChart"></div>
+        </div>
+        <div v-if="showDurationChart === false" class="empty-img">
+          <img src="../../assets/image/noData.png" />
+        </div>
+        <div class="chart-remarks">注：在线培训完成天数=完成项目时间-开始参与项目时间</div>
+        <div class="spacing"></div>
+      </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 box-card2">
-            <el-tooltip class="item-tool" placement="bottom-end" effect="light">
+        <div class="box-min-2">
+          <div v-for="(item , index) in cardData" :key="index" class="box-card box-card2" v-bind:class="{ 'box-last': index == 1 }">
+            <el-tooltip v-if="index == 1" class="item-tool" placement="bottom-end" effect="light">
               <div slot="content">
                 <p v-for="text in item.content">{{ text }}</p>
               </div>
@@ -70,45 +142,178 @@
             </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>
+              <p class="has">{{ item.hasKey }}：{{ item.hasNum | toThousands }}</p>
+              <p class="should">{{ item.shouldKey }}：{{ item.shouldNum | toThousands }}</p>
             </div>
-          </el-card>
-          <!-- <div v-if="index+1 !== cardData.length" class="line"></div> -->
+          </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>
+      <div class="date-table">
+         <el-tabs class="change-range" v-model="checkRange" type="card" @tab-click="handleCheckRange">
+          <el-tab-pane label="累计" name="1"></el-tab-pane>
+          <el-tab-pane label="新增" name="2"></el-tab-pane>
+        </el-tabs>
+        <el-radio-group v-if="showRadioValue === 0" class="change-date" v-model="checkTime" size="medium" @change="handleCheckTime">
+          <el-radio-button label="1">日</el-radio-button>
+          <el-radio-button label="2">周</el-radio-button>
+          <el-radio-button label="3">月</el-radio-button>
+          <el-radio-button label="4">年</el-radio-button>
+        </el-radio-group>
+        <div v-if="showRadioValue === 1" class="change-radio">{{ changeRadio[checkTime] }}</div>
+        <el-table :data="tableDateTime" style="width: 100%">
+          <el-table-column prop="date" label="日期" align="center" min-width="100"></el-table-column>
+          <el-table-column prop="doctorCount" label="应参与人数" align="center"></el-table-column>
+          <el-table-column prop="doctorJoinCount" label="已参与人数" align="center"></el-table-column>
+          <el-table-column prop="finishCount" :label="finishCountLabel" align="center"></el-table-column>
+
+          <el-table-column v-if="gradeFlag[0] == true" prop="grade1Count" label="优秀" align="center"></el-table-column>
+          <el-table-column v-if="gradeFlag[1] == true" prop="grade2Count" label="良好" align="center"></el-table-column>
+          <el-table-column v-if="gradeFlag[2] == true" prop="grade3Count" label="及格" align="center"></el-table-column>
+          <el-table-column v-if="gradeFlag[3] == true" prop="grade4Count" label="不及格" align="center"></el-table-column>
+          <div slot="empty">
+            <div class="table-empty">
+              <img src="../../assets/image/noData.png" />
+            </div>
+          </div>
         </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>
+          <el-pagination
+            background
+            @size-change="handleSizeDwmy"
+            @current-change="handleCurrentDwmy"
+            :current-page="formDwmy.pageNo"
+            :page-sizes="[20, 30, 100 ,200]"
+            :page-size="formDwmy.pageSize"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="totalCount"
+          ></el-pagination>
+        </div>
       </div>
+      <div class="spacing"></div>
+      <div class="person">
+        <div class="person-title">项目人员情况</div>
+        <el-tabs v-if="downloadId == null" class="tabs-person" v-model="tableType" type="card" @tab-click="handlePerson">
+          <el-tab-pane :label="tableLabel1" name="1"></el-tab-pane>
+          <el-tab-pane :label="tableLabel2" name="2"></el-tab-pane>
+          <el-tab-pane label="未参与" name="3"></el-tab-pane>
+        </el-tabs>
+        <div v-if="downloadId == null">
+          <el-table :data="tableData" class="person-table">
+            <el-table-column v-if="tableType == '1'" prop="rankNo" label="排名" align="center"></el-table-column>
+            <el-table-column prop="doctorName" label="姓名" align="center"></el-table-column>
+            <el-table-column prop="sex" label="性别" align="center">
+              <template slot-scope="scope">
+                <span>{{ scope.row.sex  | sexValue}}</span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="departmentName" label="科室" align="center">
+              <template slot-scope="scope">
+                <span>{{ scope.row.departmentName | departmentNameValue}}</span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="joinFlag" label="是否参与项目" align="center">
+              <template slot-scope="scope">
+                <span>{{ scope.row.joinFlag  | joinFlagValue}}</span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="finishFlag" label="是否完成项目" align="center">
+              <template slot-scope="scope">
+                <span>{{ scope.row.finishFlag | finishFlagValue}}</span>
+              </template>
+            </el-table-column>
+            <el-table-column v-if="certFlag == 2" prop="certGrade" label="证书级别" align="center">
+              <template slot-scope="scope">
+                <span>{{ scope.row.certGrade | certGradeValue}}</span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="finishDate" label="完成项目日期" align="center">
+              <template slot-scope="scope">
+                <span>{{ scope.row.finishDate | nullOfValue}}</span>
+              </template>
+            </el-table-column>
+            <el-table-column v-if="containOfficialFlag == 1" prop="score" label="成绩" align="center">
+              <template slot-scope="scope">
+                <span>{{ scope.row.score | nullOfValue}}</span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="learnTime" min-width="150" label="学习时长" align="center">
+              <template slot-scope="scope">
+                <span>{{ scope.row.learnTime | learnTimeValue}}</span>
+              </template>
+            </el-table-column>
+            <div slot="empty">
+              <div class="table-empty">
+                <img src="../../assets/image/noData.png" />
+              </div>
+            </div>
+          </el-table>
+        </div>
+        <div v-if="downloadId != null" class="front-table">
+          <el-table :data="tableData.slice((formTable.pageNo-1)*formTable.pageSize,formTable.pageNo*formTable.pageSize)" class="person-table">
+            <el-table-column prop="doctorName" label="姓名" align="center"></el-table-column>
+            <el-table-column prop="sex" label="性别" align="center">
+              <template slot-scope="scope">
+                <span>{{ scope.row.sex  | sexValue}}</span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="departmentName" label="科室" align="center">
+              <template slot-scope="scope">
+                <span>{{ scope.row.departmentName | departmentNameValue}}</span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="joinFlag" label="是否参与项目" align="center">
+              <template slot-scope="scope">
+                <span>{{ scope.row.joinFlag  | joinFlagValue}}</span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="finishFlag" label="是否完成项目" align="center">
+              <template slot-scope="scope">
+                <span>{{ scope.row.finishFlag | finishFlagValue}}</span>
+              </template>
+            </el-table-column>
+            <el-table-column v-if="certFlag == 2" prop="certGrade" label="证书级别" align="center">
+              <template slot-scope="scope">
+                <span>{{ scope.row.certGrade | certGradeValue}}</span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="finishDate" label="完成项目日期" align="center">
+              <template slot-scope="scope">
+                <span>{{ scope.row.finishDate | nullOfValue}}</span>
+              </template>
+            </el-table-column>
+            <el-table-column v-if="containOfficialFlag == 1" prop="score" label="成绩" align="center">
+              <template slot-scope="scope">
+                <span>{{ scope.row.score | nullOfValue}}</span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="learnTime" min-width="150" label="学习时长" align="center">
+              <template slot-scope="scope">
+                <span>{{ scope.row.learnTime | learnTimeValue}}</span>
+              </template>
+            </el-table-column>
+            <div slot="empty">
+              <div class="table-empty">
+                <img src="../../assets/image/noData.png" />
+              </div>
+            </div>
+          </el-table>
+        </div>
+        <div class="chart-remarks">注：成绩=完成项目要求的所有考试平均分（不包含摸底考试）</div>
+        <div class="pagination">
+          <el-pagination
+            class="pagination"
+            background
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+            :current-page="formTable.pageNo"
+            :page-sizes="[20, 30, 100 ,200]"
+            :page-size="formTable.pageSize"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="totalRows"
+          ></el-pagination>
+        </div>
       </div>
+      <div class="spacing"></div>
     </div>
   </div>
 </template>
@@ -116,6 +321,7 @@
 import { openLoading, closeLoading } from "../../utils/utils";
 import * as commonUtil from "../../utils/utils";
 import * as operationData from "../../utils/operation";
+import * as chartData from "../../utils/learning/chartData";
 import echarts from "echarts";
 import { setTimeout } from "timers";
 let vm = null;
@@ -132,6 +338,12 @@ export default {
     },
     organizationList: {
       type: Array
+    },
+    timeInfoData: {
+      type: Object
+    },
+    showRadio: {
+      type: Number
     }
   },
   data() {
@@ -139,7 +351,7 @@ export default {
       roleType: "L1",
       projectId: "",
       dataType: 0,
-      tableType: "0",
+      tableType: "1",
       echartsData: {
         chart0: {},
         chart1: {},
@@ -149,7 +361,7 @@ export default {
       distributeList: [],
       recordList: [],
       cardData: [],
-      rankType: 1,
+      rankType: "1",
       rankOptions: [
         {
           value: 1,
@@ -161,42 +373,313 @@ export default {
         }
       ],
       tableData: [],
+      tableDateTime: [],
       totalRows: 0,
+      formDwmy: {
+        pageNo: 1,
+        pageSize: 20,
+      },
       formTable: {
         pageNo: 1,
-        pageSize: 10,
+        pageSize: 20,
       },
+      checkRange: "1",
+      checkTime: "1",
+      totalCount: 0,
+      gradeFlag: [false, false, false, false],
+      hospitalCnt: '',
+      hospitalCutList: [],
+      certFlag: 0,
+      downloadId: null,
+      timeInfoChild: {},
+
+      showDistributeChart: true,
+      showRecordChart: true,
+      showCertificateChart: true,
+      showDurationChart: true,
+
+      finishCountLabel: '获证人数',
+      rankLabel1: '按获证人数排名',
+      rankLabel2: '按获证比例排名',
+      tableLabel1: '已获证',
+      tableLabel2: '未获证',
+      containOfficialFlag: 1,
+      changeRadio: {
+        '1': '日',
+        '2': '周',
+        '3': '月',
+        '4': '年',
+      },
+      changeRadio2: {
+        '1': '按完成人数排名',
+        '2': '按完成比例排名',
+        '3': '按参与人数排名',
+      },
+      showRadioValue: 0,
     };
   },
+  watch: {
+    timeInfoData: {
+      deep: true,
+      handler(nv, ov) {
+        vm.timeInfoChild = nv;
+      }
+    },
+    showRadio: {
+      deep: true,
+      handler(nv, ov) {
+        vm.showRadioValue = nv;
+      }
+    },
+  },
   created() {
     vm = this;
     vm.projectId = vm.getUrlSearch(window.location.href, "id");
-    vm.initCard();
-    if(vm.dataType == 0) {
-      // vm.setInitWidth();
-      setTimeout(function() {
-      // vm.$nextTick(() => {
-        vm.setDistributeChart();
-        vm.setRecordChart();
-        vm.setDurationChart();
-        vm.setCertificateChart();
-      // });
-      }, 500);
-    } else {
-      vm.setTable();
-    }
+    vm.downloadId = vm.getUrlSearch(window.location.href, "downloadId");
+  },
+  mounted: function() {
+    this.$on("search", () => {
+      vm.gethHspitalsCnt();
+    });
+    this.$on("static", () => {
+      vm.getStatic();
+    });
   },
-  mounted: function() {},
   methods: {
-    initCard() {
+    getStatic() {
+      // console.log(vm.timeInfoChild.reportParamModel);
+      if(vm.timeInfoChild.reportParamModel.hospitalIdList != null && vm.timeInfoChild.reportParamModel.hospitalIdList.length == 1) {
+        vm.dataType = 1;
+      } else {
+        vm.dataType = 0;
+      }
+      // console.log('展示all类型：',vm.dataType)
+      vm.setStatic();
+    },
+    setCertLabel() {
+      if(vm.certFlag == 0) {
+        //无证
+        vm.finishCountLabel = '完成人数';
+        vm.rankLabel1 = '按完成人数排名';
+        vm.rankLabel2 = '按完成比例排名';
+        vm.tableLabel1 = '已完成';
+        vm.tableLabel2 = '未完成';
+
+        let a = '1';
+        let b = '2';
+        vm.changeRadio2[a] = '按完成人数排名';
+        vm.changeRadio2[b] = '按完成比例排名';
+      } else {
+        vm.finishCountLabel = '获证人数';
+        vm.rankLabel1 = '按获证人数排名';
+        vm.rankLabel2 = '按获证比例排名';
+        vm.tableLabel1 = '已获证';
+        vm.tableLabel2 = '未获证';
+
+        let a = '1';
+        let b = '2';
+        vm.changeRadio2[a] = '按获证人数排名';
+        vm.changeRadio2[b] = '按获证比例排名';
+      }
+    },
+    setStatic() {
+      vm.certFlag = vm.timeInfoChild.doctorInfoRep.certFlag;
+      vm.containOfficialFlag = vm.timeInfoChild.doctorInfoRep.containOfficialFlag;
+      vm.setCertLabel();
+      vm.searchDwmy();
+      vm.initCard(vm.timeInfoChild.genSituationModel.percentData);
+      if(vm.dataType == 0) {
+        //多个机构
+        setTimeout(function(){
+          if(vm.certFlag !== 0) {
+            vm.setRecordChart(vm.timeInfoChild.genSituationModel.eduData);
+          }
+          // if(vm.certFlag !== 0) {
+          let certificateChart = vm.timeInfoChild.genSituationModel.studyRankMap[0];
+          if(certificateChart === undefined) {
+            certificateChart = [];
+          }
+          vm.setCertificateChart(certificateChart);
+          vm.setDurationChart(vm.timeInfoChild.genSituationModel.costRank);
+          // }
+        },20)
+      } else {
+        //单个几个
+        let genSituationModel = vm.timeInfoChild.genSituationModel;
+        vm.totalRows = genSituationModel.personData.length;
+        vm.tableData = genSituationModel.personData;
+      }
+    },
+    gethHspitalsCnt() {
+      let req = {
+        projectId: vm.projectId,
+        regionId: vm.formInline.region[vm.formInline.region.length - 1]
+      };
+      vm.GET("stats/region/hospitals/cnt", req, '', '', true).then(res => {
+        if (res.code == "000000") {
+          vm.hospitalCnt = res.data.hospitalCnt;
+          // vm.hospitalCnt = 1;
+          if(vm.hospitalCnt == 1) {
+            vm.hospitalCutList = res.data.list;
+          }
+          // vm.searchType();
+          vm.getDisplay();
+        }
+      });
+    },
+    getDisplay() {
+      let reqInfo = {
+        projectId: vm.projectId,
+      };
+      vm.GET("stats/region/info", reqInfo).then(res => {
+        if (res.code == "000000") {
+          vm.certFlag = res.data.certFlag;
+          vm.containOfficialFlag = res.data.containOfficialFlag;
+          vm.setCertLabel();
+          vm.searchType();
+        }
+      });
+    },
+    searchType() {
+      if(vm.formInline.organization.length == 1) {
+        vm.dataType = 1;
+      } else {
+        if(vm.hospitalCnt == 1) {
+          vm.dataType = 1;
+        } else {
+          vm.dataType = 0;
+        }
+      }
+      // console.log('vm.hospitalCnt',vm.hospitalCnt);
+      vm.checkRange = "1";
+      vm.checkTime = "1";
+      vm.rankType = "1";
+      vm.tableType = "1";
+      if(vm.dataType == 0) {
+        this.search();
+        this.searchDwmy();
+      } else {
+        this.searchDwmy();
+        this.searchPerson();
+      }
+    },
+    searchPerson(type) {
+      let req = {
+        projectId: vm.projectId,
+        beginDate: operationData.setDuringTime(vm.formInline.during,'begin'),
+        endDate: operationData.setDuringTime(vm.formInline.during,'end'),
+        hospitalIdList: vm.formInline.organization,
+        originalFlag: vm.formInline.checked == false ? 2 : 1,
+        regionId: vm.formInline.region[vm.formInline.region.length - 1],
+        timeFlag: vm.formInline.timeFlag,
+        sourceType: 2,
+        pageNo: vm.formTable.pageNo,
+        pageSize: vm.formTable.pageSize,
+      };
+      if(req.hospitalIdList.length == 0) {
+        req.hospitalIdList = [];
+        req.hospitalIdList[0] = vm.hospitalCutList[0].hospitalId;
+      }
+      vm.POST("stats/report/generalPersonal/"+vm.tableType, req, '', '', true).then(res => {
+        if (res.code == "000000") {
+          if(type != 1) {
+            vm.initCard(res.data.percentData);
+          }
+          vm.totalRows = res.data.totalSize;
+          vm.tableData = res.data.personData;
+        }
+      });
+    },
+    handlePerson(tab, event) {
+      vm.tableType = tab.name;
+      vm.formTable.pageNo = 1;
+      vm.searchPerson(1);
+    },
+    search() {
+      let req = {
+        projectId: vm.projectId,
+        beginDate: operationData.setDuringTime(vm.formInline.during,'begin'),
+        endDate: operationData.setDuringTime(vm.formInline.during,'end'),
+        hospitalIdList: vm.formInline.organization,
+        originalFlag: vm.formInline.checked == false ? 2 : 1,
+        regionId: vm.formInline.region[vm.formInline.region.length - 1],
+        timeFlag: vm.formInline.timeFlag,
+      };
+      vm.POST("stats/report/general_pc", req, '', '', true).then(res => {
+        if (res.code == "000000") {
+          vm.initCard(res.data.percentData);
+          if(vm.certFlag !== 0) {
+            vm.setDistributeChart(res.data.certData);
+            vm.setRecordChart(res.data.eduData);
+          }
+          // if(vm.certFlag !== 0) {
+          vm.setCertificateChart(res.data.studyRank);
+          vm.setDurationChart(res.data.costRank);
+          // }
+        }
+      });
+    },
+    searchDwmy() {
+      let req = {};
+      if(vm.downloadId == null) {
+        req = {
+          projectId: vm.projectId,
+          beginDate: operationData.setDuringTime(vm.formInline.during,'begin'),
+          endDate: operationData.setDuringTime(vm.formInline.during,'end'),
+          hospitalIdList: vm.formInline.organization,
+          originalFlag: vm.formInline.checked == false ? 2 : 1,
+          regionId: vm.formInline.region[vm.formInline.region.length - 1],
+          timeFlag: vm.formInline.timeFlag,
+          timeType: parseInt(vm.checkTime),
+          dataType: parseInt(vm.checkRange),
+          pageNo: vm.formDwmy.pageNo,
+          pageSize: vm.formDwmy.pageSize,
+        };
+      } else {
+        let reportParamModel = vm.timeInfoChild.reportParamModel;
+        req = {
+          projectId: reportParamModel.projectId,
+          beginDate: reportParamModel.beginDate,
+          endDate: reportParamModel.endDate,
+          hospitalIdList: reportParamModel.hospitalIdList,
+          originalFlag: reportParamModel.originalFlag,
+          regionId: reportParamModel.regionId,
+          timeFlag: reportParamModel.timeFlag,
+          timeType: parseInt(vm.checkTime),
+          dataType: parseInt(vm.checkRange),
+          pageNo: vm.formDwmy.pageNo,
+          pageSize: vm.formDwmy.pageSize,
+        };
+      }
+      vm.POST("stats/dwmy/", req, '', '', true).then(res => {
+        if (res.code == "000000") {
+          vm.tableDateTime = res.data.list;
+          vm.totalCount = res.data.totalCount;
+          for(let i=0 ; i < res.data.title.length ; i++) {
+            vm.gradeFlag[i] = res.data.title[i].show;
+          }
+        }
+      });
+    },
+    handleCheckRange(tab, event) {
+      vm.formDwmy.pageNo = 1;
+      vm.checkRange = tab.name;
+      vm.searchDwmy();
+    },
+    handleCheckTime(value) {
+      vm.formDwmy.pageNo = 1;
+      vm.timeType = value;
+      vm.searchDwmy();
+    },
+    initCard(data) {
       let cardData = [
         {
-          value: "45%",
+          value: "0%",
           title: "机构参与率",
           hasKey: "已参与机构数",
-          hasNum: "318535",
+          hasNum: "0",
           shouldKey: "应参与机构数",
-          shouldNum: "78534",
+          shouldNum: "0",
           content: [
             "机构参与率：已参与机构数/应参与机构数*100% ",
             "应参与机构数：筛选范围下，所有圈选机构数量，包含白名单反退出来的机构",
@@ -204,12 +687,12 @@ export default {
           ]
         },
         {
-          value: "78%",
+          value: "0%",
           title: "人员参与率",
           hasKey: "已参与人数",
-          hasNum: "878534",
+          hasNum: "0",
           shouldKey: "应参与人数",
-          shouldNum: "674343",
+          shouldNum: "0",
           content: [
             "人员参与率：已参与人数/应参与人数*100%",
             "应参与人数：筛选范围下，所圈选人员数量",
@@ -217,594 +700,313 @@ export default {
           ]
         },
         {
-          value: "71%",
+          value: "0%",
           title: "获证率",
           hasKey: "已获证人数",
-          hasNum: "567",
+          hasNum: "0",
           shouldKey: "应参与人数",
-          shouldNum: "78534",
+          shouldNum: "0",
           content: [
-            "获证率：已完成人数/应参与人数*100%",
-            "应参与人数：筛选范围下，所圈选人员数量",
-            "已获证人数：筛选范围下，在应参与人员中，已获证的人员数量"
+            "获证率：已获证人数/应参与人数*100%",
           ]
         }
       ];
+      if(data == null) {
+        //数据为空
+        if(vm.dataType == 0) {
+          vm.cardData = cardData;
+        } else if(vm.dataType == 1) {
+          vm.cardData = cardData.slice(1);
+        }
+        return;
+      }
+      cardData[2].title = vm.certFlag == 0 ? '完成率' : '获证率';
+      cardData[2].hasKey = vm.certFlag == 0 ? '已完成人数' : '已获证人数';
+      if(vm.certFlag == 0) {
+        cardData[2].content = [
+          "完成率：已完成人数/应参与人数*100%",
+        ]
+      } else {
+        cardData[2].content = [
+          "获证率：已获证人数/应参与人数*100%",
+        ]
+      }
+
+      cardData[1].value = parseFloat((data.doctorRate*100).toFixed(1)) + '%';
+      cardData[1].hasNum = data.joinCount;
+      cardData[1].shouldNum = data.doctorCount;
+
+      cardData[2].value = parseFloat((data.certificateRate*100).toFixed(1)) + '%';
+      cardData[2].hasNum = data.finishCount;
+      cardData[2].shouldNum = data.doctorCount;
       if(vm.dataType == 0) {
+        cardData[0].value = parseFloat((data.hospitalRate*100).toFixed(1)) + '%';
+        cardData[0].hasNum = data.hospitalJoinCount;
+        cardData[0].shouldNum = data.hospitalCount;
+
         vm.cardData = cardData;
       } else if(vm.dataType == 1) {
-        vm.cardData = cardData.slice(0,2);
+        vm.cardData = cardData.slice(1);
       }
     },
     updateResize() {
-      setTimeout(function() {
-        window.onresize = function() {
-          vm.echartsData.chart0.resize();
-          vm.echartsData.chart1.resize();
-          vm.echartsData.chart2.resize();
-          vm.echartsData.chart3.resize();
-        };
-      },100);
+      // setTimeout(function() {
+      //   window.onresize = function() {
+      //     vm.echartsData.chart0.resize();
+      //     vm.echartsData.chart1.resize();
+      //     vm.echartsData.chart2.resize();
+      //     vm.echartsData.chart3.resize();
+      //   };
+      // },100);
     },
-    setInitWidth() {
+    setDistributeChart(data) {
+      if(data.length == 0) {
+        vm.showDistributeChart = false;
+        return;
+      } else {
+        vm.showDistributeChart = true;
+      }
+      let keyName = ['未获证人数','优秀人数','良好人数','及格人数','不及格人数','已获证人数'];
+      let keyName2 = ['未获证人数占比','优秀人数占比','良好人数占比','及格人数占比','不及格人数占比','已获证人数占比'];
+      let distributeList = [];
+      let legendData = [];
+      let seriesData = [];
+      //certId为-1 或 单证下 特殊处理
+      for(let i = 0; i<data.length ; i++) {
+        if(data[i].certId == -1) {
+          data[i].certId = 0;
+        }
+        if(vm.certFlag == 1 && data[i].certId !== -1 && data[i].certId !== 0) {
+          data[i].certId = 5;
+        }
+      }
+      //
+      for(let i = 0; i<data.length ; i++) {
+        let obj = {
+          label: keyName[data[i].certId],
+          value: data[i].doneCount,
+        };
+        distributeList.push(obj);
+
+        legendData.push(keyName2[data[i].certId])
+        let objSer = {
+          name: keyName2[data[i].certId],
+          value: data[i].doneCount,
+        }
+        seriesData.push(objSer);
+      }
+      vm.distributeList = distributeList;
+      setTimeout(function(){ 
+        let myChart = echarts.init(vm.$refs.distributeChart);
+        let option = chartData.dustributeOption(legendData,seriesData);
+        myChart.setOption(option);
+        // vm.echartsData.chart0 = myChart;
+        // vm.updateResize();
+      },20);
     },
-    setDistributeChart() {
-      vm.distributeList = [
-        {
-          label: '未获证人数',
-          value: 2290,
-        },
+    setRecordChart(data) {
+      if(data.length == 0) {
+        vm.showRecordChart = false;
+        return;
+      } else {
+        vm.showRecordChart = true;
+      }
+      let recordList = [
         {
-          label: '获优秀人数',
-          value: 1900,
+          label: '博士后',
+          value: 0,
         },
-        {
-          label: '获及格人数',
-          value: 150,
-        },
-      ]
-      let myChart = echarts.init(this.$refs.distributeChart);
-      let option = {
-        title: {
-          text: "",
-          x: "left"
-        },
-        tooltip: {
-          trigger: "item",
-          formatter: "{b} : {c} ({d}%)"
-        },
-        label: {
-          formatter: "{d}%"
-        },
-        color: ['#FF9A4B','#39AF9A', '#FFB01B'],
-        legend: {
-          orient: "horizontal",
-          top: "",
-          left: "40%",
-          data: ["未获证人数占比", "获优秀人数占比", "获及格人数占比"]
-        },
-        series: [
-          {
-            name: "",
-            type: "pie",
-            radius: "60%",
-            center: ["65%", "50%"],
-            data: [
-              { value: 3000, name: "未获证人数占比" },
-              { value: 6800, name: "获优秀人数占比" },
-              { value: 3200, name: "获及格人数占比" }
-            ],
-            itemStyle: {
-              emphasis: {
-                shadowBlur: 10,
-                shadowOffsetX: 0,
-                shadowColor: "rgba(0, 0, 0, 0.5)"
-              }
-            }
-          }
-        ]
-      };
-      myChart.setOption(option);
-      vm.echartsData.chart0 = myChart;
-      vm.updateResize();
-    },
-    setRecordChart() {
-      vm.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 myChart = echarts.init(this.$refs.recordChart);
-      let option = {
-        title: {
-          text: "",
-          x: "left"
-        },
-        tooltip: {
-          trigger: "axis",
-          axisPointer: {
-            // 坐标轴指示器，坐标轴触发有效
-            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
-            shadowStyle: {
-              shadowColor: '#E3EFED',
-              width: 36,
-            },
-          },
-          backgroundColor: 'rgba(0,0,0,0.7)',
-          formatter: function(params) {
-            let relVal = params[0].name + "人数：";
-            let value = 0;
-            for (let i = 0, l = params.length; i < l; i++) {
-              value += params[i].value;
-            }
-            relVal += value + "人";
-            let divList = [];
-            divList[0] = "<div style='background: #FFB01B;height: 12px;width: 20px;margin: 5px 5px 0 2px;float: left;border-radius:2px;'></div>";
-            divList[1] = "<div style='background: #39AF9A;height: 12px;width: 20px;margin: 5px 5px 0 2px;float: left;border-radius:2px;'></div>";
-            divList[2] = "<div style='background: #5D7092;height: 12px;width: 20px;margin: 5px 5px 0 2px;float: left;border-radius:2px;'></div>";
-            for (let j = params.length - 1 ; j >= 0; j--) {
-              relVal += 
-                "<br/>" + divList[j] +
-                params[j].seriesName +
-                "占比： " +
-                (
-                  (100 * parseFloat(params[j].value)) /
-                  parseFloat(value)
-                ).toFixed(2) +
-                "%";
-            }
-            return relVal;
-          }
-        },
-        color: ['#FFB01B','#39AF9A', '#5D7092'],
-        legend: {
-          data: ["未获证人数", "获优秀人数", "获及格人数"]
-        },
-        grid: {
-          left: "3%",
-          right: "4%",
-          bottom: "3%",
-          containLabel: true
-        },
-        xAxis: {
-          type: "category",
-          data: ["博士", "硕士", "本科", "大专", "中专及以下", "其他"]
-        },
-        yAxis: {
-          type: "value",
-          name: "人数 (个)"
-        },
-        series: [
-          {
-            name: "获及格人数",
-            type: "bar",
-            stack: "总量",
-            barWidth: 18,
-            label: {
-              normal: {
-                show: true,
-                rotate: -90,
-              }
-            },
-            data: [220, 182, 191, 234, 290, 330]
-          },
-          {
-            name: "获优秀人数",
-            type: "bar",
-            stack: "总量",
-            barWidth: 18,
-            label: {
-              normal: {
-                show: true,
-                rotate: -90,
-              }
-            },
-            data: [120, 132, 101, 134, 90, 230]
-          },
-          {
-            name: "未获证人数",
-            type: "bar",
-            stack: "总量",
-            barWidth: 18,
-            label: {
-              normal: {
-                show: true,
-                rotate: -90,
-              }
-            },
-            data: [1, 302, 301, 334, 390, 330]
-          },
-        ]
-      };
-      myChart.setOption(option);
-      vm.echartsData.chart1 = myChart;
-      vm.updateResize();
-    },
-    setCertificateChart() {
-      let myChart = echarts.init(this.$refs.certificateChart);
-      let option = {
-        title: {
-          text: "",
-          x: "left"
-        },
-        tooltip: {
-          trigger: "axis",
-          axisPointer: {
-            type: "cross",
-            crossStyle: {
-              color: "#999"
-            }
-          },
-          backgroundColor: 'rgba(0,0,0,0.7)',
-          formatter: function(params) {
-            let relVal = "";
-            let divList = [];
-            divList[0] = "<div style='background: #5D7092;height: 12px;width: 20px;margin: 5px 5px 0 2px;float: left;border-radius:2px;'></div>";
-            divList[1] = "<div style='background: #FFB01B;height: 12px;width: 20px;margin: 5px 5px 0 2px;float: left;border-radius:2px;'></div>";
-            divList[2] = "<div style='background: #559A99;height: 12px;width: 12px;margin: 5px 5px 0 5px;float: left;border-radius:50%;'></div>";
-            for (let j = 0, l = params.length; j < l; j++) {
-              relVal += divList[j] + params[j].seriesName + "： " + params[j].value;
-              if (j === 2) {
-                relVal += "%";
-              } else {
-                relVal += "<br/>";
-              }
-            }
-            return relVal;
-          }
-        },
-        color: ['#5D7092','#FFB01B', '#559A99'],
-        dataZoom: {
-          show: true,
-          start: 0,
-          end: 60
-        },
-        legend: {
-          data: ["参与人数", "获证人数", "获证比例"]
-        },
-        xAxis: [
-          {
-            axisLabel: {
-              interval: 0,
-              rotate: 45
-            },
-            type: "category",
-            data: [
-              "北京市",
-              "天津市",
-              "河北省",
-              "山西省",
-              "内蒙古自治区",
-              "辽宁省",
-              "吉林省",
-              "黑龙江省",
-              "上海市",
-              "江苏省",
-              "浙江省",
-              "安徽省",
-              "福建省",
-              "江西省",
-              "山东省",
-              "河南省",
-              "湖北省",
-              "湖南省",
-              "广东省",
-              "广西壮族自治区",
-              "海南省",
-              "重庆市",
-              "四川省",
-              "贵州省",
-              "云南省",
-              "西藏自治区",
-              "陕西省",
-              "甘肃省",
-              "青海省",
-              "宁夏回族自治区",
-              "新疆维吾尔自治区"
-            ],
-            axisPointer: {
-              type: "shadow"
-            }
-          }
-        ],
-        yAxis: [
-          {
-            type: "value",
-            name: "人数（个）",
-            axisLabel: {
-              formatter: "{value} "
-            }
-          },
-          {
-            type: "value",
-            name: "比例",
-            min: 0,
-            max: 100,
-            axisLabel: {
-              formatter: "{value} %"
-            }
-          }
-        ],
-        series: [
-          {
-            name: "参与人数",
-            barWidth: 10,
-            type: "bar",
-            data: [
-              10,
-              52,
-              200,
-              334,
-              390,
-              330,
-              220,
-              10,
-              52,
-              200,
-              334,
-              390,
-              330,
-              220,
-              10,
-              52,
-              200,
-              334,
-              390,
-              330,
-              220,
-              10,
-              52,
-              200,
-              334,
-              390,
-              330,
-              220,
-              10,
-              52,
-              200,
-              334,
-              390
-            ],
-            label: {
+      let keyName = ['未获证人数','获优秀人数','获良好人数','获及格人数','获不及格人数','已获证人数'];
+      let legendData = [];
+      let xAxisData = ["博士后","博士", "硕士", "本科", "大专", "中专及以下", "其他"];
+      //certId为-1 或 单证下 特殊处理
+      for(let i = 0; i<data.length ; i++) {
+        if(data[i].certId == -1) {
+          data[i].certId = 0;
+        }
+        if(vm.certFlag == 1 && data[i].certId !== -1 && data[i].certId !== 0) {
+          data[i].certId = 5;
+        }
+      }
+      //
+      for(let i = 0; i<data.length; i++) {
+        // console.log('data[i]',data[i].certList);
+        let certList = data[i].certList;
+        legendData.push(keyName[data[i].certId]);
+        for(let a = 0; a < certList.length ; a++) {
+          recordList[a].value += certList[a].value;
+        }
+      }
+      let seriesData = [];
+      let seriesArr = [];
+      let seriesName = [];
+      let index = 0;
+      for(let x = data.length - 1 ; x >= 0 ; x--) {
+        let certList = data[x].certList;
+        seriesArr[index] = [];
+        seriesName.push(keyName[data[x].certId]);
+        for(let y = 0; y < certList.length ; y++) {
+          seriesArr[index].push(certList[y].value);
+        }
+        index++;
+      }
+      let colorValue = ['#5D7092', '#39AF9A', '#FFB01B', '#FF9A4B', '#3BA0FF'];
+      for(let z = 0; z < seriesArr.length ; z++) {
+        let seriesObj = {
+          name: seriesName[z],
+          type: "bar",
+          stack: "总量",
+          barWidth: 18,
+          label: {
+            normal: {
               show: true,
-              position: "top",
-              formatter: "{c}", //这是关键，在需要的地方加上就行了
               rotate: -90,
-              offset: [-5, -15]
             }
           },
-          {
-            name: "获证人数",
-            barWidth: 10,
-            type: "bar",
-            data: [9, 8, 100, 200, 200, 55, 10, 9, 8, 100, 200, 200, 55, 10, 9, 8, 100, 200, 200, 55, 10],
-            label: {
-              show: true,
-              position: "top",
-              formatter: "{c}", //这是关键，在需要的地方加上就行了
-              rotate: -90,
-              offset: [-5, -15]
-            }
+          itemStyle: {
+            color: colorValue[seriesArr.length - z -1],
           },
-          {
-            name: "获证比例",
-            type: "line",
-            yAxisIndex: 1,
-            data: [
-              2,
-              22,
-              32,
-              41,
-              61,
-              10,
-              20,
-              23,
-              55,
-              67,
-              91,
-              6,
-              2,
-              22,
-              32,
-              41,
-              61,
-              10,
-              20,
-              23,
-              55,
-              67,
-              91,
-              6
-            ],
-            label: {
-              show: true,
-              position: "top",
-              formatter: "{c}%" //这是关键，在需要的地方加上就行了
-            }
-          }
-        ]
-      };
-      myChart.setOption(option);
-      vm.echartsData.chart2 = myChart;
-      vm.updateResize();
+          data: seriesArr[z],
+        };
+        seriesData.push(seriesObj);
+      }
+      vm.recordList = recordList;
+      setTimeout(function(){ 
+        let myChart = echarts.init(vm.$refs.recordChart);
+        let option = chartData.recordOption(legendData, xAxisData, seriesData);
+        // console.log('data',legendData,xAxisData,seriesData,option);
+        myChart.clear();
+        myChart.setOption(option);
+        // vm.echartsData.chart1 = myChart;
+        // vm.updateResize();
+      },20);
     },
-    setDurationChart() {
-      let myChart = echarts.init(this.$refs.durationChart);
-      let option = {
-        title: {
-          text: "",
-          x: "left"
-        },
-        tooltip: {
-          trigger: "axis",
-          axisPointer: {
-            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
-          }
-        },
-        color: ['#449284'],
-        grid: {
-          left: "3%",
-          right: "4%",
-          bottom: "3%",
-          containLabel: true
-        },
-        dataZoom: {
-          show: true,
-          start: 0,
-          end: 66
-        },
-        xAxis: [
-          {
-            axisLabel: {
-              interval: 0,
-              rotate: 35
-            },
-            type: "category",
-            data: [
-              "北京市",
-              "天津市",
-              "河北省",
-              "山西省",
-              "内蒙古自治区",
-              "辽宁省",
-              "吉林省",
-              "黑龙江省",
-              "上海市",
-              "江苏省",
-              "浙江省",
-              "安徽省",
-              "福建省",
-              "江西省",
-              "山东省",
-              "河南省",
-              "湖北省",
-              "湖南省",
-              "广东省",
-              "广西壮族自治区",
-              "海南省",
-              "重庆市",
-              "四川省",
-              "贵州省",
-              "云南省",
-              "西藏自治区",
-              "陕西省",
-              "甘肃省",
-              "青海省",
-              "宁夏回族自治区",
-              "新疆维吾尔自治区"
-            ],
-            axisTick: {
-              alignWithLabel: true
-            }
-          }
-        ],
-        yAxis: [
-          {
-            type: "value",
-            name: "完成时长 (天)"
-          }
-        ],
-        series: [
-          {
-            name: "时长",
-            type: "bar",
-            barWidth: 17,
-            data: [
-              10,
-              52,
-              200,
-              334,
-              390,
-              330,
-              220,
-              10,
-              52,
-              200,
-              334,
-              390,
-              330,
-              220,
-              10,
-              52,
-              200,
-              334,
-              390,
-              330,
-              220,
-              10,
-              52,
-              200,
-              334,
-              390,
-              330,
-              220,
-              10,
-              52,
-              200,
-              334,
-              390
-            ],
-            label: {
-              show: true,
-              position: "top",
-              formatter: "{c}", //这是关键，在需要的地方加上就行了
-              rotate: -90,
-              offset: [-5, -15]
-            }
-          }
-        ]
-      };
-      myChart.setOption(option);
-      vm.echartsData.chart3 = myChart;
-      vm.updateResize();
+    changeRank(value) {
+      if(vm.downloadId == null) {
+        let req = {
+          projectId: vm.projectId,
+          beginDate: operationData.setDuringTime(vm.formInline.during,'begin'),
+          endDate: operationData.setDuringTime(vm.formInline.during,'end'),
+          hospitalIdList: vm.formInline.organization,
+          originalFlag: vm.formInline.checked == false ? 2 : 1,
+          regionId: vm.formInline.region[vm.formInline.region.length - 1],
+          timeFlag: vm.formInline.timeFlag,
+        };
+        openLoading(vm);
+        vm.POST("stats/report/studyRank/"+value, req).then(res => {
+          closeLoading(vm);
+          vm.setCertificateChart(res.data.studyRank);
+        });
+      } else {
+        let index = parseInt(value) - 1;
+        vm.setCertificateChart(vm.timeInfoChild.genSituationModel.studyRankMap[index]);
+      }
     },
-     handleSizeChange(val) {
+    setCertificateChart(data) {
+      if(data.length == 0) {
+        vm.showCertificateChart = false;
+        return;
+      } else {
+        vm.showCertificateChart = true;
+      }
+      let legendData = [];
+      if(vm.certFlag == 0) {
+        legendData = ["参与人数", "完成人数", "完成比例"];
+      } else {
+        legendData = ["参与人数", "获证人数", "获证比例"];
+      }
+      let xAxisData = [];
+      let seriesJoin = [];
+      let seriesCert = [];
+      let seriesRate = [];
+      for(let i = 0 ; i < data.length ; i++) {
+        xAxisData.push(data[i].subName);
+        seriesJoin.push(data[i].joinCount);
+        seriesCert.push(data[i].certCount);
+        seriesRate.push(parseFloat((data[i].certRate*100).toFixed(1)));
+      }
+      setTimeout(function(){
+        let myChart = echarts.init(vm.$refs.certificateChart);
+        let option = chartData.certificateOption(xAxisData, seriesJoin, seriesCert, seriesRate, legendData);
+        myChart.setOption(option);
+        // vm.echartsData.chart2 = myChart;
+        // vm.updateResize();
+      },20);
+    },
+    setDurationChart(data) {
+      if(data.length == 0) {
+        vm.showDurationChart = false;
+        return;
+      } else {
+        vm.showDurationChart = true;
+      }
+      let xAxisData = [];
+      let seriesData = [];
+      for(let i = 0 ; i<data.length ; i++) {
+        xAxisData.push(data[i].subName);
+        seriesData.push(parseFloat((data[i].costTime).toFixed(1)));
+      }
+      setTimeout(function(){
+        let myChart = echarts.init(vm.$refs.durationChart);
+        let option = chartData.durationOption(xAxisData, seriesData);
+        myChart.setOption(option);
+        vm.echartsData.chart3 = myChart;
+        vm.updateResize();
+      },20);
+    },
+    //日周月年分页
+    handleSizeDwmy(val) {
+      console.log(`每页 ${val} 条`);
+      vm.formDwmy.pageSize = val;
+      vm.formDwmy.pageNo = 1;
+      vm.searchDwmy();
+    },
+    handleCurrentDwmy(val) {
+      console.log(`当前页: ${val}`);
+      vm.formDwmy.pageNo = val;
+      vm.searchDwmy();
+    },
+    //机构人员分页
+    handleSizeChange(val) {
       console.log(`每页 ${val} 条`);
       vm.formTable.pageSize = val;
       vm.formTable.pageNo = 1;
+      if(vm.downloadId == null) {
+        vm.searchPerson(1);
+      }
     },
     handleCurrentChange(val) {
       console.log(`当前页: ${val}`);
       vm.formTable.pageNo = val;
+      if(vm.downloadId == null) {
+        vm.searchPerson(1);
+      }
     },
-    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秒',
-        }
-      ];
-    }
   }
 };
 </script>
@@ -824,19 +1026,62 @@ export default {
 .data-all-wrap {
   background: #fff;
   overflow: hidden;
-  padding: 10px;
+  // padding: 10px;
+  .change-radio {
+    position: absolute;
+    top: 0px;
+    right: 25px;
+    width:60px;
+    height:34px;
+    background:rgba(68,146,132,1);
+    border-radius:4px;
+    font-size:14px;
+    line-height: 34px;
+    text-align: center;
+    color: #fff;
+  }
+  .change-radio2 {
+    position: absolute;
+    top: 26px;
+    right: 30px;
+    width: 120px;
+    height:34px;
+    background:rgba(68,146,132,1);
+    border-radius:4px;
+    font-size:14px;
+    line-height: 34px;
+    text-align: center;
+    color: #fff;
+  }
+  .table-empty {
+    img {
+      height: 24px;
+      width: 106px;
+    }
+  }
   .box-list {
     position: relative;
-    // width: 100%;
-    height: 110px;
+    margin: 30px 30px 0 30px;
+    height: 120px;
+    overflow-x: auto;
+    overflow-y: hidden;
+    .box-min {
+      height: 106px;
+      min-width: 1050px;
+    }
+    .box-min-2 {
+      height: 106px;
+      min-width: 900px;
+    }
     .box-card {
       position: relative;
-      background-color: #e3efed;
+      background-color: #F1F7F6;
       color: #449284;
-      width: 31%;
+      width: 32%;
       margin-right: 2%;
-      height: 110px;
+      height: 106px;
       float: left;
+      border-radius:2px;
       .notice {
         position: absolute;
         z-index: 999;
@@ -855,7 +1100,7 @@ export default {
         position: relative;
         float: left;
         width: 33%;
-        height: 110px;
+        height: 106px;
         text-align: left;
         padding: 23px 0 0 20px;
         .title {
@@ -873,7 +1118,7 @@ export default {
       }
       .vertical {
         position: absolute;
-        left: 34%;
+        left: 120px;
         float: left;
         margin-top: 23px;
         width:1px;
@@ -884,67 +1129,136 @@ export default {
         position: relative;
         float: left;
         width: 64%;
-        height: 110px;
+        height: 106px;
         text-align: left;
         font-size: 14px;
-        padding: 23px 0 0 29px;
+        padding: 33px 0 0 29px;
         p {
           height: 14px;
           line-height: 14px;
         }
         .should {
-          margin-top: 28px;
+          margin-top: 12px;
         }
       }
     }
     .box-card2 {
-      width: 48%;
-      margin-right: 1%;
+      width: 49%;
+      margin-right: 2%;
+    }
+    .box-last {
+      margin-right: 0;
     }
   }
-  .chart-select {
+  .spacing {
     position: relative;
+    width: 100%;
+    height: 20px;
+    background: #f0f2f5;
   }
-  .chart-title {
+  .date-table {
     position: relative;
-    margin-top: 17px;
     width: 100%;
-    height: 60px;
+    margin-top: 20px;
+    padding: 0 30px 0 30px;
+    .change-range {
+      .el-tabs__header {
+        margin-bottom: 0px;
+      }
+      .el-tabs__nav-scroll {
+        margin-left: 0px;
+      }
+    }
+    .change-date {
+      position: absolute;
+      top: 0px;
+      right: 30px;
+      z-index: 10;
+    }
+  }
+  .rank-radio {
+    position: relative;
+  }
+  .chart-title {
+    position: relative;
+    margin-top: 30px;
+    margin-left: 30px;
+    height: 25px;
     font-size:18px;
     font-weight:600;
-    line-height: 60px;
+    line-height: 25px;
     color: #000000;
-    border-bottom: 1px solid #E4E7ED;
   }
-  .chart {
+  .chart-title-more {
+    position: relative;
+    width: 100%;
+    height: 70px;
+    p {
+      position: relative;
+      float: left;
+      width: 400px;
+      margin-top: 30px;
+      margin-left: 30px;
+      height: 25px;
+      font-size:18px;
+      font-weight:600;
+      line-height: 25px;
+      color: #000000;
+    }
+    .rank-radio {
+      position: relative;
+      margin: 30px 30px 0 0;
+      float: right;
+      .el-radio-button__inner {
+        padding: 7px 11px;
+      }
+    }
+  }
+  .chart-remarks {
+    position: relative;
+    height: 66px;
+    padding: 20px 0 30px 30px;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 16px;
+    color: #666666;
+  }
+  .chartCert {
+    position: relative;
+    margin: 20px auto 0 auto;
+    width: 1064px;
+    height: 462px;
+  }
+  .chartDuration {
     position: relative;
     margin: 20px auto 0 auto;
-    // width: 100%;
-    width: 860px;
-    height: 350px;
+    width: 1064px;
+    height: 380px;
   }
   .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 30px auto;
       // width: 70%;
-      width: 600px;
-      height: 350px;
+      width: 618px;
+      height: 320px;
     }
     .data-text {
-      position: relative;
-      float: left;
+      position: absolute;
+      top: 0;
+      left: 50%;
+      margin-left: 307px;
+      height: 320px;
       width: 30%;
-      height: 350px;
       .content-text {
         position: relative;
-        margin-top: 135px;
-        margin-left: 35%;
+        margin-top: 78px;
         text-align: left;
         p {
           margin-top: 20px;
@@ -960,25 +1274,24 @@ export default {
   .chart-recordChart {
     position: relative;
     margin: 20px auto 0 auto;
-    height: 350px;
-    width: 100%;
+    // height: 350px;
+    width: 1030px;
     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%;
+        margin-top: 56px;
         text-align: left;
         p {
           margin-top: 20px;
@@ -995,10 +1308,24 @@ export default {
     position: relative;
     margin-top: 20px;
     width: 100%;
+    .tabs-person {
+      margin: 0 auto;
+      width: 95%;
+      .el-tabs__header {
+        margin-bottom: 0px;
+      }
+      .el-tabs__nav-scroll {
+        margin-left: 0px;
+      }
+    }
     .person-title {
+      position: relative;
+      margin: 30px 0 25px 30px;
+      height: 25px;
       font-size:18px;
-      font-weight:700;
-      margin-bottom: 20px;
+      font-weight:600;
+      line-height: 25px;
+      color: #000000;
     }
     .person-radio {
       margin-top: 10px;
@@ -1019,6 +1346,15 @@ export default {
         }
       }
     }
+    .person-table {
+      padding: 0;
+      width: 95%;
+      margin:0 auto 20px auto;
+    }
+    .pagination {
+      margin-top: 30px;
+      margin-right: 13px;
+    }
   }
 }
 </style>
\ No newline at end of file

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

 <template>
   <div class="examination-analysis">
-    <div v-for="(item , index) in cardData" :key="index" class="box">
-      <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 class="box-list">
+      <div v-for="(item , index) in cardData" :key="index" class="box-card" v-bind:class="{ 'box-last': index == 2 }">
+        <!-- <el-card class="box-card" v-bind:class="{ 'box-last': index == 2 }"> -->
+          <p class="value">{{ item.value }}</p>
+          <p class="title">{{ item.title }}</p>
+        <!-- </el-card> -->
+      </div>
+    </div>
+    <div class="spacing"></div>
+    <div v-if="containOfficial === 1">
+    <div class="chart-title">完成项目考试次数情况</div>
+    <div v-if="showExamTimes === true" class="overflow-chart"> 
+      <div class="chart" id="examTimes" ref="examTimes"></div>
+    </div>
+    <div v-if="showExamTimes === false" class="empty-img">
+      <img src="../../assets/image/noData.png" />
+    </div>
+    <div class="chart-remarks">注：本报表数据来源包括用户参加正式考试次数，不包含摸底考试次数。</div>
+    <div class="spacing"></div>
+    <!-- <div class="chart-title">完成项目考试分数情况</div> -->
+    <div class="chart-title-more">
+      <p>完成项目考试分数情况</p>
+      <el-radio-group v-if="showExamScore === true && showRadioValue === 0" class="rank-radio" size="medium" v-model="rankType" @change="changeRank">
+        <el-radio-button label="1">1分</el-radio-button>
+        <el-radio-button label="5">5分</el-radio-button>
+        <el-radio-button label="10">10分</el-radio-button>
+      </el-radio-group>
+      <!-- <div v-if="showRadioValue === 1" class="change-radio">{{ changeRadio[rankType] }}</div> -->
+    </div>
+    <div v-if="showExamScore === true" class="overflow-chart">
+      <div class="chart" id="examScore" ref="examScore"></div>
+    </div>
+    <div v-if="showExamScore === false" class="empty-img">
+      <img src="../../assets/image/noData.png" />
+    </div>
+    <div class="chart-remarks">注：本报表数据来源包括用户参加正式考试，不包含摸底考试。</div>
+    <div class="spacing"></div>
+    </div>
+    <div class="chart-title">考试列表</div>
+    <div v-if="downloadId == null">
+      <el-table :data="tableData" class="exam-table">
+        <el-table-column prop="examType" label="类型" align="center"></el-table-column>
+        <el-table-column prop="examName" label="考试名" min-width="150" align="center"></el-table-column>
+        <el-table-column prop="doctorCount" label="应参与考试人数" align="center"></el-table-column>
+        <el-table-column prop="passCount" label="通过考试人数" align="center"></el-table-column>
+        <el-table-column prop="passRate" label="整体通过率" align="center">
+          <template slot-scope="scope">{{ scope.row.passRate | examRate }}</template>
+        </el-table-column>
+        <el-table-column prop="joinCount" label="参与考试人数" align="center"></el-table-column>
+        <el-table-column prop="joinRate" label="参与通过率" align="center">
+          <template slot-scope="scope">{{ scope.row.joinRate | examRate }}</template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" min-width="100">
+          <template slot-scope="scope">
+            <el-button class="button-jump" type="text" size="small" @click="goPage(scope.row)">查看名单</el-button>
+          </template>
+        </el-table-column>
+        <div slot="empty">
+          <div class="table-empty">
+            <img src="../../assets/image/noData.png" />
+          </div>
         </div>
-      </el-card>
-      <div v-if="index+1 !== cardData.length" class="line"></div>
+      </el-table>
     </div>
-    <div class="table">
-      <el-table :data="tableData" style="width: 100%" border>
+    <div v-if="downloadId != null">
+      <el-table :data="tableData.slice((pageNo-1)*pageSize,pageNo*pageSize)" class="exam-table">
+        <el-table-column prop="examType" label="类型" align="center"></el-table-column>
         <el-table-column prop="examName" label="考试名" min-width="150" align="center"></el-table-column>
-        <el-table-column prop="examUserCount" label="参与考试人数" min-width="100" align="center"></el-table-column>
-        <el-table-column prop="userCountForPassExam" label="通过考试人数" min-width="80" align="center"></el-table-column>
-        <el-table-column v-if="showTd[0]" prop="userCountList[0]" :label="labelTd[0]" min-width="80" align="center"></el-table-column>
-        <el-table-column v-if="showTd[1]" prop="userCountList[1]" :label="labelTd[1]" min-width="80" align="center"></el-table-column>
-        <el-table-column v-if="showTd[2]" prop="userCountList[2]" :label="labelTd[2]" min-width="80" align="center"></el-table-column>
-        <el-table-column v-if="showTd[3]" prop="userCountList[3]" :label="labelTd[3]" min-width="80" align="center"></el-table-column>
-        <el-table-column label="操作" fixed="right" align="center" min-width="100">
+        <el-table-column prop="doctorCount" label="应参与考试人数" align="center"></el-table-column>
+        <el-table-column prop="passCount" label="通过考试人数" align="center"></el-table-column>
+        <el-table-column prop="passRate" label="整体通过率" align="center">
+          <template slot-scope="scope">{{ scope.row.passRate | examRate }}</template>
+        </el-table-column>
+        <el-table-column prop="joinCount" label="参与考试人数" align="center"></el-table-column>
+        <el-table-column prop="joinRate" label="参与通过率" align="center">
+          <template slot-scope="scope">{{ scope.row.joinRate | examRate }}</template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" min-width="100">
           <template slot-scope="scope">
-            <el-button type="text" size="small" @click="goPage(scope.row)">查看名单</el-button>
+            <el-button class="button-jump" type="text" size="small" @click="goPage(scope.row)">查看名单</el-button>
           </template>
         </el-table-column>
         <div slot="empty">
           <div class="table-empty">
-            <img src="../../assets/image/no-content1.png">
-            <p>没有相关数据，请重新选择查询范围</p>
+            <img src="../../assets/image/noData.png" />
           </div>
         </div>
       </el-table>
     </div>
-    <!-- 分页 -->
     <div class="pagination">
       <el-pagination
+        class="pagination"
         background
         @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
         :current-page="pageNo"
-        :page-sizes="[20, 50 ,100]"
+        :page-sizes="[20, 50 ,100, 200]"
         :page-size="pageSize"
         layout="total, sizes, prev, pager, next, jumper"
         :total="totalRows"
       ></el-pagination>
     </div>
+    <div class="spacing"></div>
   </div>
 </template>
 
 <script>
-import { log } from 'util';
-import * as operationData from "../../utils/operation";
+import { log } from "util";
 import { openLoading, closeLoading } from "../../utils/utils";
 import * as commonUtil from "../../utils/utils";
-let vm
+import * as operationData from "../../utils/operation";
+import * as chartData from "../../utils/learning/chartData";
+import echarts from "echarts";
+let vm;
 export default {
   props: {
     formInline: {
@@ -69,147 +127,305 @@ export default {
     },
     organizationList: {
       type: Array
-    }
+    },
+    timeInfoData: {
+      type: Object
+    },
+    containOfficialFlag: {
+      type: Number
+    },
+    showRadio: {
+      type: Number
+    },
   },
   data() {
     return {
-      projectId: '',
+      projectId: "",
       tableData: [],
       cardData: [],
       totalRows: 0, //数据总数
       pageNo: 1, //当前是第几页
       pageSize: 20, //页面总数
       labelTd: [],
-      showTd: [false,false,false,false],
+      showTd: [false, false, false, false],
+      echartsData: {
+        chart0: {},
+        chart1: {}
+      },
+      examData: {},
+      rankType: '1',
+      timeInfoChild: {},
+      downloadId: null,
+      showExamTimes: true,
+      showExamScore: true,
+      containOfficial: 1,
+      changeRadio: {
+        '1': '1分',
+        '5': '5分',
+        '10': '10分',
+      },
+      showRadioValue: 0,
     };
   },
+  watch: {
+    timeInfoData: {
+      deep: true,
+      handler(nv, ov) {
+        vm.timeInfoChild = nv;
+      }
+    },
+    containOfficialFlag: {
+      deep: true,
+      handler(nv, ov) {
+        vm.containOfficial = nv;
+      }
+    },
+    showRadio: {
+      deep: true,
+      handler(nv, ov) {
+        vm.showRadioValue = nv;
+      }
+    },
+  },
   created() {
     vm = this;
-    this.projectId = vm.getUrlSearch(window.location.href, "id");
+    vm.projectId = vm.getUrlSearch(window.location.href, "id");
+    vm.downloadId = vm.getUrlSearch(window.location.href, "downloadId");
   },
-   // 挂载到Dom完成时
+  // 挂载到Dom完成时
   mounted: function() {
-    this.$on('search',()=>{
+    this.$on("search", () => {
       // console.log(this.formInline);
       this.pageNo = 1;
+      this.rankType = '1';
       this.search();
+      this.searchTable();
     });
     this.$on("init", () => {
       this.$nextTick(function() {
         if (vm.formInline.region.length != 0) {
           this.search();
+          this.searchTable();
         }
       });
     });
-    this.$on("reset",() =>{
+    this.$on("reset", () => {
       this.pageNo = 1;
       this.pageSize = 20;
       this.tableData = [];
       this.cardData = [];
     });
+    this.$on("static", () => {
+      vm.getStatic();
+    });
   },
   methods: {
-    setCardData(data) {
-      vm.totalRows = data.projectExamCount;
-      vm.cardData = [
-        {
-          title: "项目所有考试数",
-          num: data.projectExamCount,
-          unit: "门考试"
-        },
-        {
-          title: "项目所有考题数",
-          num: data.projectExamQuestionCount,
-          unit: "道题"
-        }
-      ];
-      // vm.cardData[0].num = data.projectExamCount;
-      // vm.cardData[1].num = data.projectExamQuestionCount;
-    },
     // 搜索列表
-    search() {
-      if (vm.formInline.region.length == 0) {
-        const h = this.$createElement;
-        vm.$message({
-          message: h('p', { style: 'color: #FF3399' }, '请先选择地区后再进行查询 ')
-        });
-        return;
+    getStatic() {
+      let examAnalysisModel = vm.timeInfoChild.examAnalysisModel;
+      vm.containOfficial = vm.timeInfoChild.doctorInfoRep.containOfficialFlag;
+      vm.setCardData(examAnalysisModel);
+      if(vm.containOfficial === 1) {
+        vm.setExamTimes(examAnalysisModel.examTimesList);
+        vm.setExamScore(examAnalysisModel.examScoreList);
       }
-      let checkAll = operationData.hasAll(vm.formInline.organization)
-       let req = {
+
+      vm.tableData = examAnalysisModel.examListDto.examInfoList;
+      vm.totalRows = examAnalysisModel.examListDto.totalRows;
+    },
+    search() {
+      let req = {
         projectId: vm.projectId,
-        ids: operationData.getIds(vm.formInline,vm.organizationList,checkAll),
-        type: operationData.getSearchType(vm.formInline,checkAll),
-        originalFlag: vm.formInline.checked == false ? 0 : 1
+        beginDate: operationData.setDuringTime(vm.formInline.during, "begin"),
+        endDate: operationData.setDuringTime(vm.formInline.during, "end"),
+        hospitalIdList: vm.formInline.organization,
+        originalFlag: vm.formInline.checked == false ? 2 : 1,
+        regionId: vm.formInline.region[vm.formInline.region.length - 1],
+        timeFlag: vm.formInline.timeFlag
       };
-      console.log("4 req", req);
-      openLoading(vm);
-      vm.reportGET("report/portalProjectExam/getTotal", req).then(res => {
-        closeLoading(vm);
+      vm.POST("stats/report/exam", req, '', '', true).then(res => {
         if (res.code == "000000") {
-          if(res.data.projectExamCount == 0 ) {
-            vm.$message("没有相关数据，请重新选择查询范围");
-          }
+          vm.examData = res.data;
           vm.setCardData(res.data);
-          vm.labelTd = res.data.gradeNameList;
+          if(vm.containOfficial === 1) {
+            vm.setExamTimes(res.data.examTimesList);
+            vm.setExamScore(res.data.examScoreList);
+          }
         } else {
           vm.$message(res.message);
         }
       });
+    },
+    searchTable() {
+      let req = {
+        projectId: vm.projectId,
+        beginDate: operationData.setDuringTime(vm.formInline.during, "begin"),
+        endDate: operationData.setDuringTime(vm.formInline.during, "end"),
+        hospitalIdList: vm.formInline.organization,
+        originalFlag: vm.formInline.checked == false ? 2 : 1,
+        regionId: vm.formInline.region[vm.formInline.region.length - 1],
+        timeFlag: vm.formInline.timeFlag
+      };
       let reqList = req;
       reqList.pageNo = vm.pageNo;
       reqList.pageSize = vm.pageSize;
-      vm.reportGET("report/portalProjectExam/getExamList", req).then(res => {
-        closeLoading(vm);
+      // openLoading(vm);
+      vm.POST("stats/report/exam/list", req, '', '', true).then(res => {
+        // closeLoading(vm);
         if (res.code == "000000") {
-          vm.tableData = res.data.list;
-          if(res.data.list.length == 0) {
-            return;
-          }
-          if(res.data.list[0].userCountList == null || res.data.list[0].userCountList.length == 0) {
-            vm.showTd = [false,false,false,false];
-          } else if (res.data.list[0].userCountList.length == 1){
-            vm.showTd = [true,false,false,false];
-          } else if (res.data.list[0].userCountList.length == 2){
-            vm.showTd = [true,true,false,false];
-          } else if (res.data.list[0].userCountList.length == 3){
-            vm.showTd = [true,true,true,false];
-          } else if (res.data.list[0].userCountList.length == 4){
-            vm.showTd = [true,true,true,true];
-          }
+          vm.tableData = res.data.examInfoList;
+          vm.totalRows = res.data.totalRows;
         }
       });
-
-      //
+    },
+    setCardData(data) {
+      vm.totalRows = data.projectExamCount;
+      let cardData = [
+        {
+          title: "项目正式考试数",
+          value: "0门"
+        },
+        {
+          title: "项目摸底考试数",
+          value: "0门"
+        },
+        {
+          title: "项目所有考题数",
+          value: "0道"
+        }
+      ];
+      cardData[0].value = data.afterExamCount + "门";
+      cardData[1].value = data.beforeExamCount + "门";
+      cardData[2].value = data.examTitleCount + "道";
+      vm.cardData = cardData;
+    },
+    updateResize() {
+      setTimeout(function() {
+        window.onresize = function() {
+          vm.echartsData.chart0.resize();
+          vm.echartsData.chart1.resize();
+        };
+      }, 30);
+    },
+    setExamTimes(data) {
+      if(data.length == 0) {
+        vm.showExamTimes = false;
+        return;
+      } else {
+        vm.showExamTimes = true;
+      }
+      let xAxisData = [];
+      let seriesData = [];
+      for (let i = 0; i < data.length; i++) {
+        xAxisData.push(data[i].times + "次");
+        seriesData.push(data[i].count);
+      }
+      setTimeout(function(){ 
+        let myChart = echarts.init(vm.$refs.examTimes);
+        let option = chartData.examTimes(xAxisData, seriesData);
+        myChart.setOption(option);
+        vm.echartsData.chart0 = myChart;
+      },20);
+    },
+    changeRank(value) {
+      console.log(value);
+      if(vm.downloadId == null) {
+        if(value == '1') {
+          vm.setExamScore(vm.examData.examScoreList);
+        } else if(value == '5') {
+          vm.setExamScore(vm.examData.fiveExamScoreList);
+        } else if(value == '10') {
+          vm.setExamScore(vm.examData.tenExamScoreList);
+        }
+      } else {
+        let examAnalysisModel = vm.timeInfoChild.examAnalysisModel;
+        if(value == '1') {
+          vm.setExamScore(examAnalysisModel.examScoreList);
+        } else if(value == '5') {
+          vm.setExamScore(examAnalysisModel.fiveExamScoreList);
+        } else if(value == '10') {
+          vm.setExamScore(examAnalysisModel.tenExamScoreList);
+        }
+      }
+    },
+    setExamScore(data) {
+      if(data.length == 0) {
+        vm.showExamScore = false;
+        return;
+      } else {
+        vm.showExamScore = true;
+      }
+      let xAxisData = [];
+      let seriesData = [];
+      for (let i = 0; i < data.length; i++) {
+        xAxisData.push(data[i].timesStr);
+        seriesData.push(data[i].count);
+      }
+      setTimeout(function(){ 
+        let myChart = echarts.init(vm.$refs.examScore);
+        let option = chartData.examScore(xAxisData, seriesData);
+        myChart.setOption(option);
+        vm.echartsData.chart1 = myChart;
+      },20);
     },
     // 跳转查看名单页面
     goPage(data) {
-      let checkAll = operationData.hasAll(vm.formInline.organization)
       let routerData = {};
-      routerData = this.dialogData;
-      routerData.projectId = vm.projectId;
-      routerData.projectName = vm.getUrlSearch(window.location.href, "projectName");
-      routerData.tableType = 2;
-      routerData.examId = data.examId;
-      routerData.ids = operationData.getIds(vm.formInline,vm.organizationList,checkAll);
-      routerData.type = operationData.getSearchType(vm.formInline,checkAll),
-      routerData.originalFlag = vm.formInline.checked == false ? 0 : 1
-     
+      if(vm.downloadId == null) {
+        routerData = this.dialogData;
+        routerData.projectId = vm.projectId;
+        routerData.projectName = vm.getUrlSearch(
+          window.location.href,
+          "projectName"
+        );
+        routerData.tableType = 2;
+        routerData.examId = data.examId;
+        routerData.beginDate = operationData.setDuringTime(vm.formInline.during, "begin"),
+        routerData.endDate = operationData.setDuringTime(vm.formInline.during, "end"),
+        routerData.regionId = vm.formInline.region[vm.formInline.region.length - 1];
+        routerData.originalFlag = vm.formInline.checked == false ? 2 : 1;
+        routerData.timeFlag = vm.formInline.timeFlag;
+        routerData.hospitalIdList = operationData.setHospitalIdList(vm.formInline.organization);
+      } else {
+        let reportParamModel = vm.timeInfoChild.reportParamModel;
+        routerData.base = 'static';
+        routerData.region = reportParamModel.regionNames;
+        routerData.organization = reportParamModel.hospitalNames;
+        routerData.projectId = reportParamModel.projectId,
+        routerData.projectName = reportParamModel.projectName,
+        routerData.tableType = 2;
+        routerData.examId = data.examId;
+        routerData.beginDate = reportParamModel.beginDate;
+        routerData.endDate = reportParamModel.endDate;
+        routerData.regionId = reportParamModel.regionId;
+        routerData.originalFlag = reportParamModel.originalFlag;
+        routerData.timeFlag = reportParamModel.timeFlag;
+        routerData.hospitalIdList = operationData.setHospitalIdList(reportParamModel.hospitalIdList);
+      }
+
       // this.$router.push({ path: '/name-list', query: routerData});
-      let routeData = this.$router.resolve({ path: '/name-list', query: routerData});
-      window.open(routeData.href, '_blank');
+      let routeData = this.$router.resolve({
+        path: "/name-list",
+        query: routerData
+      });
+      window.open(routeData.href, "_blank");
     },
     // 更改数据显示数量
     handleSizeChange(val) {
-      console.log(`每页 ${val} 条`)
-      vm.pageSize = val
-      vm.search()
+      console.log(`每页 ${val} 条`);
+      vm.pageSize = val;
+      vm.pageNo = 1;
+      if(vm.downloadId == null) {
+        vm.searchTable();
+      }
     },
     // 换页
     handleCurrentChange(val) {
-      console.log(`当前页: ${val}`)
-      vm.pageNo = val
-      vm.search()
+      console.log(`当前页: ${val}`);
+      vm.pageNo = val;
+      if(vm.downloadId == null) {
+        vm.searchTable();
+      }
     }
   }
 };
@@ -219,9 +435,20 @@ export default {
 .examination-analysis {
   background: #fff;
   overflow: hidden;
-  padding: 10px;
-  .weight {
-    font-weight: bold;
+  .change-radio {
+    position: relative;
+    float: right;
+    top: 27px;
+    right: 55px;
+    margin-left: -60px;
+    width: 80px;
+    height: 34px;
+    background:rgba(68,146,132,1);
+    border-radius:4px;
+    font-size:14px;
+    line-height: 34px;
+    text-align: center;
+    color: #fff;
   }
   .el-card {
     border-width: 0px;
@@ -236,25 +463,121 @@ export default {
     float: left;
     margin-top: 20px;
   }
-  .box {
-  }
   .table {
     margin-top: 30px;
   }
-  .box-card {
-    width: 48%;
-    margin-right: 1%;
-    float: left;
-    .el-card__header {
-      border-bottom-width: 0;
+  .spacing {
+    position: relative;
+    width: 100%;
+    height: 20px;
+    background: #f0f2f5;
+  }
+  .box-list {
+    position: relative;
+    height: 110px;
+    background: #f0f2f5;
+    .box-card {
+      position: relative;
+      background-color: #ffffff;
+      width: 32%;
+      margin-right: 2%;
+      height: 120px;
+      float: left;
+      .el-card__header {
+        border-bottom-width: 0;
+      }
+      .el-card__body {
+        padding: 0px;
+      }
+      .value {
+        color: #373839;
+        text-align: center;
+        margin-top: 24px;
+        margin-bottom: 8px;
+        height: 45px;
+        line-height: 45px;
+        font-size: 32px;
+        font-weight: 500;
+      }
+      .title {
+        color: #666666;
+        text-align: center;
+        font-size: 14px;
+        height: 20px;
+        line-height: 20px;
+      }
     }
-    .title {
-      text-align: center;
+    .box-last {
+      margin-right: 0%;
     }
-    .box-content {
-      text-align: center;
-      height: 40px;
-      font-size: 15px;
+  }
+  .chart-title {
+    position: relative;
+    margin-top: 30px;
+    margin-left: 30px;
+    height: 25px;
+    font-size:18px;
+    font-weight:600;
+    line-height: 25px;
+    color: #000000;
+  }
+  .chart-title-more {
+    position: relative;
+    width: 100%;
+    height: 70px;
+    p {
+      position: relative;
+      float: left;
+      width: 400px;
+      margin-top: 30px;
+      margin-left: 30px;
+      height: 25px;
+      font-size:18px;
+      font-weight:600;
+      line-height: 25px;
+      color: #000000;
+    }
+    .rank-radio {
+      position: relative;
+      margin: 30px 30px 0 0;
+      float: right;
+      .el-radio-button__inner {
+        padding: 7px 29px;
+      }
+    }
+  }
+  .chart {
+    position: relative;
+    margin: 0 auto 0 auto;
+    width: 1064px;
+    height: 380px;
+  }
+  .chart-remarks {
+    position: relative;
+    height: 66px;
+    padding: 20px 0 30px 30px;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 16px;
+    color: #666666;
+  }
+  .exam-table {
+    top: 20px;
+    padding: 0;
+    width: 95%;
+    margin:0 auto 20px auto;
+    .button-jump {
+      color: #449284;
+    }
+  }
+  .pagination {
+    margin-top: 30px;
+    margin-right: 13px;
+  }
+  .table-empty {
+    img {
+      height: 24px;
+      width: 106px;
     }
   }
 }

src/views/learning/item-learning-effect.vue

 <template>
   <div class="learning-effect">
-    <el-button type="default" size="small" @click="exportPDF">导出明细</el-button>
-    <div class="education" ref="education"></div>
-    <div class="learning" ref="learning"></div>
+    <div class="box-list">
+      <div v-for="(item , index) in cardData" :key="index" class="box-card" v-bind:class="{ 'box-last': index == 1 }">
+        <!-- <el-card class="box-card" v-bind:class="{ 'box-last': index == 1 }"> -->
+          <p class="value">{{ item.value }}</p>
+          <p class="title">{{ item.title }}</p>
+        <!-- </el-card> -->
+      </div>
+    </div>
+    <div class="spacing"></div>
+      <div class="chart-title">不同学历培训前后正确率对比</div>
+    <div v-if="showChartEdu === true" class="overflow-chart">
+      <div class="chartEdu" ref="education"></div>
+    </div>
+    <div v-if="showChartEdu === false" class="empty-img">
+      <img src="../../assets/image/noData.png" />
+    </div>
+    <div class="chart-remarks">注：本报表数据来源仅统计同时包含摸底考和正式考的课程培训。</div>
+    <div class="spacing"></div>
+    <div class="chart-title">培训前后知识点掌握情况</div>
+    <div v-if="showChartLearn === true" class="overflow-chart">
+      <div class="chartLearn" ref="learning"></div>
+    </div>
+    <div v-if="showChartLearn === false" class="empty-img">
+      <img src="../../assets/image/noData.png" />
+    </div>
+    <div class="chart-remarks">注：本报表数据来源仅统计同时包含摸底考和正式考的课程培训。</div>
   </div>
 </template>
 
 <script>
 import { openLoading, closeLoading } from "../../utils/utils";
 import * as commonUtil from "../../utils/utils";
+import * as operationData from "../../utils/operation";
+import * as chartData from "../../utils/learning/chartData";
 import echarts from "echarts";
-import html2Canvas from 'html2canvas'
-import JsPDF from 'jspdf'
 let vm = null;
 export default {
+  props: {
+    formInline: {
+      type: Object
+    },
+    activeName: {
+      type: String
+    },
+    timeInfoData: {
+      type: Object
+    },
+  },
   data() {
     return {
+      cardData: [],
       echartsData: {
         chart1: {},
         chart2: {}
-      }
+      },
+      timeInfoChild: {},
+      showChartEdu: true,
+      showChartLearn: true,
     };
   },
+  watch: {
+    timeInfoData: {
+      deep: true,
+      handler(nv, ov) {
+        vm.timeInfoChild = nv;
+      }
+    }
+  },
   created() {
     vm = this;
-    vm.$nextTick(() => {
-      vm.setEducation();
-      vm.setLearning();
-    });
+    vm.projectId = vm.getUrlSearch(window.location.href, "id");
   },
   mounted() {
     commonUtil.resizeHeight();
+    this.$on("search", () => {
+      this.search();
+    });
+    this.$on("static", () => {
+      vm.getStatic();
+    });
   },
   methods: {
-    exportPDF() {
-      let element = '';
-      element = document.querySelector('.data-all-wrap');
-      console.log(element);
-      if(element == null) {
-        return
-      }
-      setTimeout(() => {
-        html2Canvas(element).then(function(canvas) {
-          let contentWidth = canvas.width;
-          let contentHeight = canvas.height;
-
-          //一页pdf显示html页面生成的canvas高度;
-          let pageHeight = contentWidth / 592.28 * 841.89;
-          //未生成pdf的html页面高度
-          let leftHeight = contentHeight;
-          //页面偏移
-          let position = 0;
-          //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
-          let imgWidth = 595.28;
-          let imgHeight = 592.28 / contentWidth * contentHeight;
-
-          let pageData = canvas.toDataURL('image/jpeg', 1.0);
-
-          let pdf = new JsPDF('', 'pt', 'a4');
-
-          //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
-          //当内容未超过pdf一页显示的范围，无需分页
-          if (leftHeight < pageHeight) {
-            pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
-          } else {
-            while (leftHeight > 0) {
-              pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
-              leftHeight -= pageHeight;
-              position -= 841.89;
-              //避免添加空白页
-              if (leftHeight > 0) {
-                pdf.addPage();
-              }
-            }
-          }
-          let title = "导出学情报告";
-          pdf.save(title + '.pdf');
-        });
-      }, 0);
+    getStatic() {
+      let studyEffectDto = vm.timeInfoChild.studyEffectAnalysisModel.studyEffectDto;
+      vm.initCard(studyEffectDto);
+      vm.setEducation(studyEffectDto.educationEffectList);
+      vm.setLearning(studyEffectDto.knowledgeEffectList);
     },
     updateResize() {
       this.$nextTick(function() {
@@ -87,129 +96,169 @@ export default {
         };
       });
     },
-    setEducation() {
-      let myChart = echarts.init(this.$refs.education);
-      let option = {
-        title: {
-          text: ""
-        },
-        tooltip: {
-          trigger: "axis",
-          axisPointer: {
-            type: "shadow"
-          }
-        },
-        color: ['#5D7092','#FFB01B'],
-        legend: {
-          data: ["项目前总正确率", "项目后总正确率"]
-        },
-        grid: {
-          left: "3%",
-          right: "4%",
-          bottom: "3%",
-          containLabel: true
-        },
-        xAxis: {
-          type: "category",
-          data: ["本科", "大专", "中专及以下", "硕士", "博士", "其他"]
-        },
-        yAxis: {
-          min: 0,
-          max: 100,
-          type: "value",
-          axisLabel: {
-            formatter: "{value} %"
-          }
-        },
-        series: [
-          {
-            name: "项目前总正确率",
-            type: "bar",
-            barWidth: 10,
-            data: [45, 45, 34, 34, 4, 8]
-          },
-          {
-            name: "项目后总正确率",
-            type: "bar",
-            barWidth: 10,
-            data: [70, 66, 67, 67, 24, 24]
-          }
-        ]
+    search() {
+      let req = {
+        projectId: vm.projectId,
+        beginDate: operationData.setDuringTime(vm.formInline.during, "begin"),
+        endDate: operationData.setDuringTime(vm.formInline.during, "end"),
+        hospitalIdList: vm.formInline.organization,
+        originalFlag: vm.formInline.checked == false ? 2 : 1,
+        regionId: vm.formInline.region[vm.formInline.region.length - 1],
+        timeFlag: vm.formInline.timeFlag
       };
-      myChart.setOption(option);
-      vm.echartsData.chart1 = myChart;
-      vm.updateResize();
+      vm.POST("stats/report/studyEffect", req, '', '', true).then(res => {
+        if (res.code == "000000") {
+          vm.initCard(res.data);
+          setTimeout(function() {
+            vm.setEducation(res.data.educationEffectList);
+            vm.setLearning(res.data.knowledgeEffectList);
+          }, 20);
+        }
+      });
     },
-    setLearning() {
-      let myChart = echarts.init(this.$refs.learning);
-      let option = {
-        title: {
-          text: ""
-        },
-        tooltip: {
-          trigger: "axis",
-          axisPointer: {
-            type: "shadow"
-          }
-        },
-        color: ['#5D7092','#FFB01B'],
-        legend: {
-          data: ["培训前正确率", "培训后正确率"]
-        },
-        grid: {
-          left: "3%",
-          right: "4%",
-          bottom: "3%",
-          containLabel: true
-        },
-        xAxis: {
-          axisLabel: {
-            interval: 0,
-            rotate: 45
-          },
-          type: "category",
-          data: ["推荐联合用药方案"]
-        },
-        yAxis: {
-          min: 0,
-          max: 100,
-          type: "value",
-          axisLabel: {
-            formatter: "{value} %"
-          }
+    initCard(data) {
+      let cardData = [
+        {
+          value: "0%",
+          title: "培训前总正确率"
         },
-        series: [
-          {
-            name: "培训前正确率",
-            type: "bar",
-            barWidth: 10,
-            data: [45]
-          },
-          {
-            name: "培训后正确率",
-            type: "bar",
-            barWidth: 10,
-            data: [81]
-          }
-        ]
-      };
-      myChart.setOption(option);
-      vm.echartsData.chart2 = myChart;
-      vm.updateResize();
+        {
+          value: "0%",
+          title: "培训后总正确率"
+        }
+      ];
+      cardData[0].value = parseFloat((data.beforeRate*100).toFixed(1)) + "%";
+      cardData[1].value = parseFloat((data.afterRate*100).toFixed(1)) + "%";
+      vm.cardData = cardData;
     },
+    setEducation(data) {
+      if(data.length == 0) {
+        vm.showChartEdu = false;
+        return;
+      } else {
+        vm.showChartEdu = true;
+      }
+      let xAxisData = [];
+      let seriesBefore = [];
+      let seriesAfter = [];
+      for(let i = 0; i < data.length ; i++) {
+        xAxisData.push(data[i].classifyName);
+        seriesBefore.push(parseFloat((data[i].beforeRate*100).toFixed(1)));
+        seriesAfter.push(parseFloat((data[i].afterRate*100).toFixed(1)));
+      }
+      setTimeout(function(){
+        let myChart = echarts.init(vm.$refs.education);
+        let option = chartData.educationEffect(xAxisData, seriesBefore ,seriesAfter);
+        myChart.setOption(option);
+        vm.echartsData.chart1 = myChart;
+      },20);
+    },
+    setLearning(data) {
+      if(data.length == 0) {
+        vm.showChartLearn = false;
+        return;
+      } else {
+        vm.showChartLearn = true;
+      }
+      let xAxisData = [];
+      let seriesBefore = [];
+      let seriesAfter = [];
+      for(let i = 0; i < data.length ; i++) {
+        xAxisData.push(data[i].classifyName);
+        seriesBefore.push(parseFloat((data[i].beforeRate*100).toFixed(1)));
+        seriesAfter.push(parseFloat((data[i].afterRate*100).toFixed(1)));
+      }
+      setTimeout(function(){
+        let myChart = echarts.init(vm.$refs.learning);
+        let option = chartData.knowledgeEffect(xAxisData, seriesBefore ,seriesAfter);
+        myChart.setOption(option);
+        vm.echartsData.chart2 = myChart;
+      },20);
+    }
   }
 };
 </script>
 
 <style lang='scss' rel='stylesheet/scss'>
 .learning-effect {
-  width: 100%;
-  .learning,
-  .education {
-    margin-top: 40px;
-    min-width: 400px;
-    height: 400px;
-    background: #fff;
+  background: #fff;
+  overflow: hidden;
+  // padding: 10px;
+  .spacing {
+    position: relative;
+    width: 100%;
+    height: 20px;
+    background: #f0f2f5;
+  }
+  .box-list {
+    position: relative;
+    height: 110px;
+    background: #f0f2f5;
+    .box-card {
+      position: relative;
+      background-color: #ffffff;
+      width: 49%;
+      margin-right: 2%;
+      height: 120px;
+      float: left;
+      .el-card__header {
+        border-bottom-width: 0;
+      }
+      .el-card__body {
+        padding: 0px;
+      }
+      .value {
+        color: #373839;
+        text-align: center;
+        margin-top: 24px;
+        margin-bottom: 8px;
+        height: 45px;
+        line-height: 45px;
+        font-size: 32px;
+        font-weight: 500;
+      }
+      .title {
+        color: #666666;
+        text-align: center;
+        font-size: 14px;
+        height: 20px;
+        line-height: 20px;
+      }
+    }
+    .box-last {
+      margin-right: 0%;
+    }
+  }
+  .chart-title {
+    position: relative;
+    margin-top: 30px;
+    margin-left: 30px;
+    height: 25px;
+    font-size:18px;
+    font-weight:600;
+    line-height: 25px;
+    color: #000000;
+  }
+  .chartEdu {
+    position: relative;
+    margin: 20px auto 0 auto;
+    width: 1064px;
+    height: 380px;
+  }
+  .chartLearn {
+    position: relative;
+    margin: 20px auto 0 auto;
+    width: 1064px;
+    height: 462px;
+  }
+  .chart-remarks {
+    position: relative;
+    height: 66px;
+    padding: 20px 0 30px 30px;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 16px;
+    color: #666666;
   }
 }
 </style>

src/views/learning/item-list.vue

@@ -2,9 +2,33 @@
   <div class="item-list-wrap">
     <bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond" :curmbThird="curmbThird" :jumPathThird="jumPathThird"></bread-crumb>
     <div class="component-content screenSet" id="screenSet">
-      <el-form class="item-form" ref="formInline" :model="formInline" label-width="80px">
+      <div v-if="staticData == 1" class="item-form">
+        <div class="form-title">查询条件</div>
+        <div class="form-p">
+          <p>
+            <span>选择地区</span>  
+            <span class="span-value">{{ reportParamModel.regionNames }}</span>
+          </p>
+          <p>
+            <span>原始数据</span> 
+            <span class="span-value">{{ reportParamModel.originalFlag === 2 ? '否' : '是' }}</span>
+          </p>
+          <p>
+            <span>选择机构</span> 
+            <span class="span-value">{{ reportParamModel.hospitalNames }}</span>
+          </p>
+          <p>
+            <span >选择时间</span>
+            <span class="span-value">{{ reportParamModel.beginDate }}-{{ reportParamModel.endDate }}</span>
+          </p>
+        </div>
+        <div class="buttom-line"></div>
+      </div>
+      <el-form v-if="staticData == 0" class="item-form" ref="formInline" :model="formInline" label-width="80px">
+        <div class="form-title">查询条件</div>
         <el-form-item label="选择地区：">
           <!-- :props="props" -->
+          <el-col :span="12">
           <el-cascader
             size="small"
             ref="cascaderRegion"
@@ -17,16 +41,22 @@
             placeholder="请先选择地区后再进行查询"
             style="width:330px"
           ></el-cascader>
+          </el-col>
+          <el-col :span="6">
+            <el-checkbox v-if="showOriginal == 1" size="small" v-model="formInline.checked">查看原始数据</el-checkbox>
+          </el-col>
         </el-form-item>
         <el-form-item label="选择机构：">
+          <div class="form-text" v-if="optionsRegion.length == 1 && hospitalCntList.length == 1">{{ hospitalCntList[0].hospitalName }}</div>
           <el-select
+            v-else
             size="small"
             v-model="formInline.organization"
             :placeholder="organizationNotice"
             @change="changeOrganization"
             multiple
             collapse-tags
-            :disabled="formInline.region.length < 3"
+            :disabled="areaLen < 3"
             style="width:330px"
           >
             <el-option
@@ -46,23 +76,64 @@
             @close="handleTagClose(tag)"
           >{{ tag.label }}</el-tag>
         </div>
-        <el-form-item label v-if="showOriginal == 1">
-          <el-checkbox size="small" v-model="formInline.checked">查看原始数据</el-checkbox>
+        <el-form-item label="选择时间：">
+          <el-col :span="12">
+            <el-select 
+              size="small"
+              v-model="formInline.timeFlag" 
+              placeholder="请选择"
+              style="width:330px;"
+              @change="changeTimeFlag"
+              >
+              <el-option
+                v-for="item in timeFlagList"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+          </el-col>
+          <el-col :span="8" v-show="formInline.timeFlag == 2">
+            <el-date-picker
+              size="small"
+              v-model="formInline.during"
+              value-format="yyyy-MM-dd"
+              type="daterange"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              :picker-options="pickerOptions0">
+            </el-date-picker>
+          </el-col>
         </el-form-item>
+        <div class="buttom-line"></div>
+        <!-- <el-form-item label v-if="showOriginal !== 1">
+          <el-checkbox size="small" v-model="formInline.checked">查看原始数据</el-checkbox>
+        </el-form-item> -->
+        <div v-if="staticData == 0" class="form-button">
+          <el-button size="small" @click="search()" type="primary">查询</el-button>
+          <el-button size="small" @click="resetForm()">重置</el-button>
+        </div>
       </el-form>
-      <div class="form-button">
-        <el-button @click="search()" type="primary">查询</el-button>
-        <el-button @click="resetForm()">重置</el-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="exportExcel">导出明细</el-button>
+        <el-button class="" v-if="roleType == 1 || roleType == 2" type="default" size="small" @click="changeDate">数据修改</el-button>
+        <el-button class="" type="default" size="small" @click="exportPDF">导出PDF</el-button>
+        <el-button class="" type="default" size="small" :disabled="exportStatus" @click="exportExcel">导出明细</el-button>
       </div>
-      <!-- <div class="item-tab"></div> -->
-      <el-tabs id="item-list-tabs" v-model="activeName" @tab-click="handleClick" :before-leave="beforeLeave">
-        <el-tab-pane label="参与情况" name="first">
+      <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
+            ref="childDataAll"
+            :formInline="formInline"
+            :activeName="activeName"
+            :organizationNum="organizationNum"
+            :organizationList="organizationList"
+            :timeInfoData="timeInfoData"
+            :showRadio="showRadio"
+          ></data-all>
+        </el-tab-pane>
+        <!-- <el-tab-pane label="参与情况" name="first">
           <part-in
             ref="childPart"
             :formInline="formInline"
@@ -70,22 +141,25 @@
             :organizationNum="organizationNum"
             :organizationList="organizationList"
           ></part-in>
-        </el-tab-pane>
+        </el-tab-pane> -->
         <el-tab-pane label="人群分析" name="second">
           <crowd-analysis
             ref="childCrowd"
             :formInline="formInline"
             :activeName="activeName"
             :organizationList="organizationList"
+            :timeInfoData="timeInfoData"
+            :showRadio="showRadio"
           ></crowd-analysis>
         </el-tab-pane>
-        <el-tab-pane label="课程分析" name="third">
+        <el-tab-pane label="课程分析" name="third" v-if="displayCourse == 1">
           <course-analysis
             ref="childCourse"
             :formInline="formInline"
             :activeName="activeName"
             :dialogData="dialogData"
             :organizationList="organizationList"
+            :timeInfoData="timeInfoData"
           ></course-analysis>
         </el-tab-pane>
         <el-tab-pane label="考试分析" name="fourth" v-if="displayExam == 1">
@@ -95,26 +169,32 @@
             :activeName="activeName"
             :dialogData="dialogData"
             :organizationList="organizationList"
+            :timeInfoData="timeInfoData"
+            :containOfficialFlag="containOfficialFlag"
+            :showRadio="showRadio"
           ></examination-analysisfrom>
         </el-tab-pane>
-        <!-- <el-tab-pane label="数据总览" name="zero" >
-          <data-all
-            ref="childDataAll"
+        <el-tab-pane label="学习效果分析" name="fifth" v-if="displayEffect == 1">
+          <learning-effect 
+            ref="childEffect"
             :formInline="formInline"
             :activeName="activeName"
-            :organizationNum="organizationNum"
-            :organizationList="organizationList"
-          ></data-all>
+            :timeInfoData="timeInfoData"
+          ></learning-effect>
         </el-tab-pane>
-        <el-tab-pane label="学习效果分析" name="fifth" :lazy=true>
-          <learning-effect></learning-effect>
-        </el-tab-pane> -->
       </el-tabs>
       <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" center>
-        <p style="text-align:center">文件正在生成，你可以去“我的导出下载”页，下载文件</p>
+        <p style="text-align:center">您的导出预计将在24小时内完成，是否继续？</p>
         <span slot="footer" class="dialog-footer">
-          <el-button @click="dialogVisible = false">留在当前页</el-button>
-          <el-button type="primary" @click="toDownload()">去下载</el-button>
+          <el-button @click="dialogVisible = false">取消</el-button>
+          <el-button type="primary" @click="exportHttp()">继续导出</el-button>
+        </span>
+      </el-dialog>
+      <el-dialog title="提示" :visible.sync="dialogSearch" width="30%" center>
+        <p style="text-align:center">您的报告预计将在24小时内生成，是否继续？</p>
+        <span slot="footer" class="dialog-footer">
+          <el-button @click="dialogSearch = false">取消</el-button>
+          <el-button type="primary" @click="exportTime()">继续生成</el-button>
         </span>
       </el-dialog>
       <el-dialog title :visible.sync="dialogUpdate" width="80%" center>
@@ -146,6 +226,8 @@ import { openLoading, closeLoading } from "../../utils/utils";
 import * as commonUtil from "../../utils/utils";
 import * as operationData from "../../utils/operation";
 import { log } from "util";
+import html2Canvas from 'html2canvas';
+import JsPDF from 'jspdf';
 
 let vm = null;
 export default {
@@ -174,61 +256,91 @@ export default {
         lazy: true,
         lazyLoad(node, resolve) {
           const { level } = node;
-          console.log("node", node);
-          if (node.level == 1) {
-            let req = {
-              provinceId: node.data.value
-            };
-            vm.GET("basic-data/position/cities", req).then(res => {
-              let newData = vm.setMoreOption(res.data.cityList, "cities");
-              console.log("newData", newData);
-              resolve(newData);
-            });
-          } else if (node.level == 2) {
+          // console.log("node props", node);
+          if (node.level >= 1 && node.loaded === false && node.children.length == 0) {
             let req = {
-              cityId: node.data.value
+              projectId: vm.projectId,
+              regionId: node.data.value
             };
-            vm.GET("basic-data/position/counties", req).then(res => {
-              let newData = vm.setMoreOption(res.data.countyList, "counties");
-              console.log("newData", newData);
-              resolve(newData);
-            });
-          } else if (node.level == 3) {
-            let req = {
-              countyId: node.data.value
-            };
-            vm.GET("basic-data/position/towns", req).then(res => {
-              let newData = vm.setMoreOption(res.data.townList, "towns");
-              console.log("newData", newData);
+            vm.GET("stats/region", req).then(res => {
+              let newData = vm.setRegionOptionMore(res.data.list);
+              // console.log("newData", newData);
               resolve(newData);
             });
+          } else {
+            resolve()
           }
         }
       },
       showOriginal: 2,
       roleType: '',
       formInline: {
-        region: [0],
+        region: [],
         date: "",
         organization: [],
         checked: false,
+        timeFlag: 1,
+        during: null,
         pageNo: 1,
-        pageSize: 20
+        pageSize: 20,
       },
       organizationNotice: '选择地区筛选到区才能选择机构',
       dialogData: {
-        region: "",
+        region: "全部",
         // regionData: "",
         organization: ""
         // organizationData: "",
       },
       tags: [],
-      activeName: "first",
+      activeName: "zero",
       organizationNum: 0,
       dialogVisible: false,
       dialogUpdate: false,
-      displayExam: 2,
+      displayExam: 1,
       flag: 1,
+      //v2.0更新data部分
+      timeFlagList: [
+        {
+          value: 1,
+          label: '截至昨日',
+        },
+        {
+          value: 2,
+          label: '自定义时间',
+        }
+      ],
+      areaLen: 1,
+      hospitalCnt: 0,
+      hospitalId: [],
+      certFlag: 0,
+      displayCourse: 1,
+      displayEffect: 1,
+      exportReq: {},
+      dialogSearch: false,
+      downloadId: null,
+      staticData: 0,
+      timeInfoData: {},
+      reportParamModel: {
+        beginDate: "",
+        endDate: "",
+        regionNames: "",
+        hospitalNames: "",
+        originalFlag: 2
+      },
+      hospitalCntList: [],
+      maxDate: '',
+      minDate: '',
+      allRegionId: '',
+      containOfficialFlag: 1,
+      showRadio: 0,
+      pickerOptions0: {
+        disabledDate: time => {
+          // 在科学计数法中，为了使公式简便，可以用带“E”的格式表示。例如1.03乘10的8次方，可简写为“1.03e8”的形式
+          // 一天是24*60*60*1000 = 86400000 = 8.64e7
+          // console.log('this.maxDate',this.maxDate)
+          return time.getTime() > new Date(this.maxDate).getTime() || time.getTime() < new Date(this.minDate).getTime() - 8.64e7;
+        }
+      }, 
     };
   },
   computed: {
@@ -237,6 +349,11 @@ export default {
   watch: {
     tags: function(val) {
       this.setDialogData();
+    },
+    formInline() {
+      if (this.$refs.optionsRegion) {
+        this.$refs.optionsRegion.dropDownVisible = false; //监听值发生变化就关闭它
+      }
     }
   },
   created() {
@@ -244,84 +361,163 @@ export default {
     this.projectId = vm.getUrlSearch(window.location.href, "id");
     this.projectName = vm.getUrlSearch(window.location.href, "projectName");
     this.curmbThird = vm.getUrlSearch(window.location.href, "projectName");
-    this.getDisplay();
-    this.search();
+    this.downloadId = vm.getUrlSearch(window.location.href, "downloadId");
+    this.checkShowType();
+    // this.getDisplay();
+    // this.search();
     // this.getRegionOption();
   },
   mounted: function() {
     commonUtil.resizeHeight();
+    // setInterval(function() {
+    //   document.querySelectorAll(".el-cascader-node").forEach(el => {
+    //     el.onclick = function() {
+    //       if (this.previousElementSibling) this.previousElementSibling.click();
+    //     };
+    //   });
+    // }, 1000);
   },
   methods: {
+    checkShowType() {
+      if(vm.downloadId == null) {
+        vm.getDisplay();
+
+        vm.curmbSecond = "项目列表";
+        vm.jumPathThird = "/report-list";
+      }
+      if(vm.downloadId != null) {
+        vm.staticData = 1;
+        vm.exportTimeInfo();
+
+        vm.curmbSecond = "任务列表";
+        vm.jumPathThird = "/export-download";
+      }
+    },
+    exportTimeInfo() {
+      let req = {};
+      openLoading(vm);
+      vm.GET("stats/export/time/info/"+ vm.downloadId, req).then(res => {
+        closeLoading(vm);
+        if(res.code == "000000") {
+          vm.timeInfoData = res.data;
+          vm.reportParamModel = res.data.reportParamModel;
+          let doctorInfoRep = res.data.doctorInfoRep;
+          vm.displayCourse = doctorInfoRep.existCourse;
+          vm.displayExam = doctorInfoRep.existExam;
+          vm.displayEffect = doctorInfoRep.existEffect;
+          vm.curmbThird = res.data.reportParamModel.projectName;
+          setTimeout(function() {
+            vm.$refs.childDataAll.$emit("static");
+            vm.$refs.childCrowd.$emit("static");
+            if(doctorInfoRep.existCourse == 1) {
+              vm.$refs.childCourse.$emit("static");
+            }
+            if(doctorInfoRep.existExam == 1) {
+              vm.$refs.childExam.$emit("static");
+            }
+            if(doctorInfoRep.existEffect == 1) {
+              vm.$refs.childEffect.$emit("static");
+            }
+          },20);
+        } else {
+          vm.$message(res.message);
+        }
+      });
+    },
     getDisplay(type) {
-      let req = {
+      let reqInfo = {
         projectId: vm.projectId,
-        projectName: vm.projectName,
       };
-      openLoading(vm);
-      vm.reportGET("report/portal/display", req).then(res => {
-        closeLoading(vm);
+      vm.GET("stats/region/info", reqInfo).then(res => {
         if (res.code == "000000") {
-          console.log('vm.showOriginal',res.data)
           vm.showOriginal = res.data.status;
           vm.roleType = res.data.roleType;
+          vm.displayCourse = res.data.existCourse;
           vm.displayExam = res.data.existExam;
-          vm.flag = res.data.flag;
-        }
-        if(type !=2) {
+          vm.displayEffect = res.data.existEffect;
+          vm.certFlag = res.data.certFlag;
+          vm.maxDate =  new Date(res.data.maxDate);
+          vm.minDate = new Date(res.data.minDate);
+          vm.containOfficialFlag = res.data.containOfficialFlag;
+          // console.log('日期:',vm.maxDate,vm.minDate)
           vm.getRegionOption();
         }
       });
     },
     beforeLeave(activeName, oldActiveName) {
-      console.log('action',activeName,'oldActive',oldActiveName)
+      // console.log('action',activeName,'oldActive',oldActiveName)
     },
     handleClick(tab, event) {
-      //console.log(tab, event);
-      // if(tab.name == this.activeName) {
-      //   return;
+      // console.log("activeName", this.activeName, tab.name);
+      // if (tab.name == "first") {
+      //   this.$refs.childPart.$emit("init");
+      // } else if (tab.name == "second") {
+      //   this.$refs.childCrowd.$emit("init");
+      // } else if (tab.name == "third") {
+      //   this.$refs.childCourse.$emit("init");
+      // } else if (tab.name == "fourth") {
+      //   this.$refs.childExam.$emit("init");
       // }
-      console.log("activeName", this.activeName, tab.name);
-      if (tab.name == "first") {
-        this.$refs.childPart.$emit("init");
-      } else if (tab.name == "second") {
-        this.$refs.childCrowd.$emit("init");
-      } else if (tab.name == "third") {
-        this.$refs.childCourse.$emit("init");
-      } else if (tab.name == "fourth") {
-        this.$refs.childExam.$emit("init");
-      }
     },
     handleChange(value) {
       this.formInline.organization = [];
       this.tags = [];
+      let node =this.$refs.cascaderRegion.getCheckedNodes()[0];
+      console.log('node change',node)
+
       setTimeout(function() {
-        // console.log(vm.$refs["cascaderRegion"].inputValue);
+        // console.log('行政区域改变',vm.$refs["cascaderRegion"].inputValue);
         vm.dialogData.region = vm.$refs["cascaderRegion"].inputValue;
-        // vm.dialogData.regionData = value[value.length-1];
-        // console.log('vm.dialogData.region',vm.dialogData.region)
       }, 20);
       // console.log('region',value,vm.formInline);
-      if (value.length >= 3) {
-        this.getOrganizationList();
-        this.organizationNotice = "请选择机构";
+
+      if(node.label !== '全部') {
+        let areaArr = value[value.length -1].split('_');
+        vm.areaLen = areaArr.length;
+        // console.log('areaArr!!',areaArr);
+        if (areaArr.length >= 3) {
+          this.getOrganizationList();
+          this.organizationNotice = "请选择机构";
+        } else {
+          this.organizationNotice = "选择地区筛选到区才能选择机构";
+        }
       } else {
-        this.organizationNotice = "选择地区筛选到区才能选择机构";
+        vm.areaLen = 1;
+        vm.organizationNotice = "选择地区筛选到区才能选择机构";
       }
+
+      vm.gethHspitalsCnt()
+
+      //添加子节点
+      // let node =this.$refs.cascaderRegion.getCheckedNodes()[0];
+      if(node.data && node.data.id && node.hasChildren === true && node.loaded === false) {
+        let req = {
+          projectId: vm.projectId,
+          regionId: node.data.value
+        };
+        vm.GET("stats/region", req).then(res => {
+          let newData = vm.setRegionOptionMore(res.data.list);
+          vm.searchNode(vm.optionsRegion, node.data.id, newData);
+        });
+      }
+    },
+    searchNode(val,id,data){
+      val.map(item=>{
+          if(item.id===id){
+              vm.$set(item,'children',data)
+          }else if(item.children&&item.children.length){
+              return vm.searchNode(item.children,id,data)
+          }
+          return item
+      })
     },
-    setMoreOption(data, type) {
+    setRegionOptionMore(data) {
       let option = [];
       for (let i = 0; i < data.length; i++) {
         let obj = data[i];
-        if (type == "cities") {
-          obj.label = data[i].cityName;
-          obj.value = data[i].cityId;
-        } else if (type == "counties") {
-          obj.label = data[i].countyName;
-          obj.value = data[i].countyId;
-          // obj.leaf = true;
-        } else if (type == "towns") {
-          obj.label = data[i].townName;
-          obj.value = data[i].townId;
+        obj.label = data[i].label;
+        obj.value = data[i].id;
+        if(obj.degree == 4) {
           obj.leaf = true;
         }
         option.push(obj);
@@ -391,45 +587,46 @@ export default {
     },
     //获取地区
     getRegionOption() {
-      if(vm.flag == 2 && vm.roleType == "L2") {
-         this.optionsRegion = [{id: 11, provinceId: 330, provinceName: "浙江省",value: 330, label: "浙江省"}]
-      } else {
-        let req = {};
-        openLoading(vm);
-        vm.GET("basic-data/position/provinces", req).then(res => {
-          closeLoading(vm);
-          // let list = [];
-          // for(let i =0;i<res.data.provinceList.length;i++) {
-          //   list[i] = res.data.provinceList[i].provinceName;
-          // }
-          // console.log(list);
-          if (res.code == "000000") {
-            this.optionsRegion = operationData.setRegionOption(
-              res.data.provinceList
-            );
-            // console.log("this.optionsRegion", this.optionsRegion);
-          }
-        });
-      }
+      let req = {
+        projectId: vm.projectId,
+      };
+      vm.GET("stats/region", req, '', '', true).then(res => {
+        if (res.code == "000000") {
+          vm.formInline.region = [];
+          vm.formInline.region[0] = res.data.list[0].id;
+          vm.allRegionId = res.data.list[0].id;
+          vm.optionsRegion = operationData.setRegionOptionNew(
+            res.data.list
+          );
+          vm.search();
+          vm.gethHspitalsCnt();
+        }
+      });
+    },
+    gethHspitalsCnt() {
+      let req = {
+        projectId: vm.projectId,
+        regionId: vm.formInline.region[vm.formInline.region.length - 1]
+      };
+      vm.GET("stats/region/hospitals/cnt", req, '', '', false).then(res => {
+        if (res.code == "000000") {
+          vm.hospitalCnt = res.data.hospitalCnt;
+          vm.hospitalCntList = res.data.list
+        }
+      });
     },
+    //获取机构列表
     getOrganizationList() {
-      this.organizationList = [];
-      let countyId = vm.formInline.region[vm.formInline.region.length - 1];
-      let type = 3;
-      if(vm.formInline.region.length == 4) {
-        type = 5;
-      }
+      vm.organizationList = [];
+      let regionId = vm.formInline.region[vm.formInline.region.length - 1];
       let req = {
         projectId: vm.projectId,
-        type: type,
-        id: countyId
+        regionId : regionId
       };
-      openLoading(vm);
-      vm.reportGET("report/portal/getOrganizationList", req).then(res => {
-        closeLoading(vm);
+      vm.GET("stats/region/hospital", req, '', '', true).then(res => {
         if (res.code == "000000") {
           this.organizationList = operationData.getLearnOrganization(
-            res.data.hospitalList
+            res.data.list
           );
         }
       });
@@ -451,23 +648,96 @@ export default {
     closeSearch() {
       vm.dialogUpdate = false;
       vm.getDisplay(2);
-      vm.search();
+      vm.resetForm();
+    },
+    setExportReq() {
+      vm.exportReq = {
+        projectId: vm.projectId,
+        beginDate: operationData.setDuringTime(vm.formInline.during,'begin'),
+        endDate: operationData.setDuringTime(vm.formInline.during,'end'),
+        hospitalIdList: vm.formInline.organization,
+        originalFlag: vm.formInline.checked == false ? 2 : 1,
+        regionId: vm.formInline.region[vm.formInline.region.length - 1],
+        timeFlag: vm.formInline.timeFlag,
+      };
+    },
+    changeTimeFlag(value) {
+      if(value == 1) {
+        vm.formInline.during = null;
+      }
+    },
+    exportTime() {
+      let req = {
+        projectId: vm.projectId,
+        beginDate: operationData.setDuringTime(vm.formInline.during, "begin"),
+        endDate: operationData.setDuringTime(vm.formInline.during, "end"),
+        hospitalIdList: vm.formInline.organization,
+        originalFlag: vm.formInline.checked == false ? 2 : 1,
+        regionId: vm.formInline.region[vm.formInline.region.length - 1],
+        timeFlag: vm.formInline.timeFlag,
+        hospitalNames: vm.dialogData.organization,
+        regionNames: vm.dialogData.region,
+      };
+      if(vm.organizationList.length == 1) {
+        req.hospitalIdList = [];
+        req.hospitalIdList[0] = vm.organizationList[0].value;
+      }
+      // if(req.regionNames == '全部') {
+        //全部地区 机构只有一个情况
+      if(vm.hospitalCntList.length == 1) {
+        req.hospitalIdList = [];
+        req.hospitalIdList[0] = vm.hospitalCntList[0].hospitalId;
+      }
+      // }
+      openLoading(vm);
+      vm.POST("stats/export/time", req).then(res => {
+        closeLoading(vm);
+        if(res.code == "000000") {
+          vm.$router.push("export-download?projectId="+vm.projectId+'&listType=2');
+        } else {
+          vm.$message(res.message)
+        }
+        vm.dialogSearch = false;
+      });
     },
     search() {
-      // console.log(this.formInline,this.activeName);
-      if (this.activeName == "first") {
-        this.organizationNum = this.getOrganizationNum();
-        // console.log('this.organizationNum',this.organizationNum)
-        this.$nextTick(function() {
-          this.$refs.childPart.$emit("search");
-        });
-      } else if (this.activeName == "second") {
-        this.$refs.childCrowd.$emit("search");
-      } else if (this.activeName == "third") {
-        this.$refs.childCourse.$emit("search");
-      } else if (this.activeName == "fourth") {
-        this.$refs.childExam.$emit("search");
+      // console.log(vm.formInline);
+      if(vm.formInline.timeFlag == 1) {
+        //截止昨日
+        vm.setExportReq();
+        vm.$refs.childDataAll.$emit("search");
+        vm.$refs.childCrowd.$emit("search");
+        if(vm.displayCourse == 1) {
+          vm.$refs.childCourse.$emit("search");
+        }
+        if(vm.displayExam == 1) {
+          vm.$refs.childExam.$emit("search");
+        }
+        if(vm.displayEffect == 1) {
+          vm.$refs.childEffect.$emit("search");
+        }
+      } else if(vm.formInline.timeFlag == 2) {
+        //开始时间结束时间
+        if(vm.formInline.during == null) {
+          vm.$message('自定义时间，请选择时间段！')
+        } else {
+          vm.dialogSearch = true;
+        }
       }
+
+      // if (this.activeName == "first") {
+      //   this.organizationNum = this.getOrganizationNum();
+      //   // console.log('this.organizationNum',this.organizationNum)
+      //   this.$nextTick(function() {
+      //     this.$refs.childPart.$emit("search");
+      //   });
+      // } else if (this.activeName == "second") {
+      //   this.$refs.childCrowd.$emit("search");
+      // } else if (this.activeName == "third") {
+      //   this.$refs.childCourse.$emit("search");
+      // } else if (this.activeName == "fourth") {
+      //   this.$refs.childExam.$emit("search");
+      // }
     },
     //重置
     resetForm() {
@@ -478,51 +748,56 @@ export default {
           date: "",
           organization: [],
           checked: false,
+          timeFlag: 1,
+          during: null,
           pageNo: 1,
           pageSize: 20,
         }
       );
+      vm.formInline.region[0] = vm.allRegionId;
+      vm.areaLen = 0;
       vm.tags = [];
-      if (this.activeName == "first") {
-        this.$refs.childPart.$emit("reset");
-      } else if (this.activeName == "second") {
-        this.$refs.childCrowd.$emit("reset");
-      } else if (this.activeName == "third") {
-        this.$refs.childCourse.$emit("reset");
-      } else if (this.activeName == "fourth") {
-        this.$refs.childExam.$emit("reset");
-      }
+
+      setTimeout(function(){
+        vm.search();
+      },20)
+
+      // if (this.activeName == "first") {
+      //   this.$refs.childPart.$emit("reset");
+      // } else if (this.activeName == "second") {
+      //   this.$refs.childCrowd.$emit("reset");
+      // } else if (this.activeName == "third") {
+      //   this.$refs.childCourse.$emit("reset");
+      // } else if (this.activeName == "fourth") {
+      //   this.$refs.childExam.$emit("reset");
+      // }
     },
     exportExcel() {
-      if (vm.formInline.region.length == 0) {
-        const h = this.$createElement;
-        vm.$message({
-          message: h('p', { style: 'color: #FF3399' }, '请先选择地区后再进行导出 ')
-        });
-        return;
+      if(vm.downloadId == null) {
+        //按钮置灰三秒
+        vm.exportStatus = true;
+        setTimeout(function() {
+          vm.exportStatus = false;
+        },3000);
+        this.dialogVisible = true;
+      } else {
+        let downloadUrl = vm.timeInfoData.excelDownUrl;
+        setTimeout(() => {
+          window.open(downloadUrl);
+        }, 500);
       }
-      //按钮置灰三秒
-      vm.exportStatus = true;
-      setTimeout(function() {
-        vm.exportStatus = false;
-      },3000);
-      this.dialogVisible = true;
-      //download接口
-      let checkAll = operationData.hasAll(vm.formInline.organization)
-      let req = {
-        projectId : vm.projectId,
-        ids: operationData.getIds(vm.formInline,vm.organizationList,checkAll),
-        type: operationData.getSearchType(vm.formInline,checkAll),
-        originalFlag: vm.formInline.checked == false ? 0 : 1,
-        projectName: vm.$route.query.projectName,
-        cityName: vm.getCityName(),
-      };
+    },
+    exportHttp() {
+      let req = vm.exportReq;
       openLoading(vm);
-      vm.reportGET("report/downLoad/downLoad", req).then(res => {
+      vm.POST("stats/export/current", req).then(res => {
         closeLoading(vm);
-        // console
-        if (res.code == "000000") {
+        if(res.code == "000000") {
+          vm.$router.push("export-download?projectId="+vm.projectId+'&listType=1');
+        } else {
+          vm.$message(res.message)
         }
+        vm.dialogVisible = false;
       });
     },
     getCityName() {
@@ -543,8 +818,6 @@ export default {
       };
       vm.$router.push({ path: "export-download", query: routerData });
     },
-    update() {},
-    release() {},
     setDialogData() {
       //传递给dialog数据
       this.dialogData.organization = "";
@@ -570,13 +843,89 @@ export default {
       this.$nextTick(function() {
         this.$refs.childAlignment.$emit("search");
       });
-    }
+    },
+    exportPDF() {
+      openLoading(vm);
+      let tabsList = vm.$refs.tabs.$children;
+      for(let i= 1;i<tabsList.length;i++) {
+        tabsList[i].$el.style.display = 'block';
+      }
+
+      let element = '';
+      element = document.querySelector('.item-list-tabs .el-tabs__content');
+      if(element == null) {
+        return
+      }
+      let opts = {
+        // scale:window.devicePixelRatio, // 添加的scale 参数
+        // logging: true, //日志开关
+        // width:element.offsetWidth, //dom 原始宽度
+        // height:element.offsetHeight, //dom 原始高度
+        // useCORS: true,
+        // taintTest: true, //是否在渲染前测试图片
+        // dpi:300,
+        background: '#F0F2F5',
+      };
+      vm.showRadio = 1;
+      setTimeout(() => {
+        html2Canvas(element,opts).then(function(canvas) {
+          let contentWidth = canvas.width;
+          let contentHeight = canvas.height;
+
+          //一页pdf显示html页面生成的canvas高度;
+          let pageHeight = contentWidth / 592.28 * 841.89;
+          //未生成pdf的html页面高度
+          let leftHeight = contentHeight;
+          //页面偏移
+          let position = 0;
+          //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
+          let imgWidth = 595.28;
+          let imgHeight = 592.28 / contentWidth * contentHeight;
+
+          // let pageData = canvas.toDataURL('image/jpeg', 1.0);
+          let pageData = canvas.toDataURL('image/png');
+
+          let pdf = new JsPDF('', 'pt', [contentWidth*0.8,contentHeight*0.8]);
+          
+          // pdf.addImage(pageData, 'JPEG', 0, position, contentWidth*0.8, contentHeight*0.8)
+          pdf.addImage(pageData, 'PNG', 0, position, contentWidth*0.8, contentHeight*0.8)
+
+          let title = "导出学情报告";
+          pdf.save(title + '.pdf');
+
+          for(let i= 1;i<tabsList.length;i++) {
+            let idStr = tabsList[i].$el.id;
+            // console.log(idStr,vm.activeName);
+            if(idStr.indexOf(vm.activeName) == -1) {
+              tabsList[i].$el.style.display = 'none';
+            }
+          }
+          vm.showRadio = 0;
+          closeLoading(vm);
+        });
+      }, 100);
+    },
   }
 };
 </script>
 <style lang="scss">
 .item-list-wrap {
+  .el-radio-button__inner:hover {
+    color: #449284;
+  }
+  .is-active {
+    .el-radio-button__inner:hover {
+      color: #fff;
+    }
+  }
+  .overflow-chart {
+    overflow-x: auto;
+  }
+  .el-radio-button {
+    display: contents;
+  }
   .component-content {
+    // position: relative;
     // background: #fff;
     padding: 10px;
     .header-title {
@@ -586,48 +935,137 @@ export default {
       border-bottom: 1px solid #efefef;
     }
     .item-form {
-      padding: 10px;
-      background: #fff;
-      width:100%;
-      border-radius: 4px;
-    }
-    .form-button {
-      width: 45%;
-      top: -120px;
       position: relative;
-      left: 50%;
+      // margin-bottom: 20px;
+      padding: 10px 0 10px 0;
+      background: #fff;
+      width: 100%;
+      border-radius: 4px 4px 0 0;
+      .form-text {
+        color: #606266;
+        font-size: 12px;
+      }
+      .form-p {
+        margin: 17px 0 0 30px;
+        line-height:20px;
+        font-size:14px;
+        color: #666666;
+        p { 
+          margin-bottom: 12px;
+          .span-value {
+            margin-left: 20px;
+          }
+        }
+      }
+      .buttom-line {
+        margin: 30px auto 10px auto;
+        height: 1px;
+        background: #E4E7ED;
+        width: 94.66%
+      }
+      .form-title {
+        position: relative;
+        margin: 20px 0 24px 30px;
+        height: 25px;
+        font-size:18px;
+        font-weight:600;
+        line-height: 25px;
+        color: #000000;
+      }
+      .el-form-item {
+        margin-left: 25px;
+      }
+      .is-checked {
+        .el-checkbox__inner {
+          background-color: #449284;
+          border-color: #449284;
+        }
+        .el-checkbox__label {
+          color: #449284;
+        }
+      }
+      .form-button {
+        position: absolute;
+        width: 140px;
+        top: 78px;
+        right: 10px;
+        .el-button--default{
+          border:1px solid #449284;
+          color: #449284;
+        }
+        .el-button:hover {
+          background: #F1F7F6;
+        }
+      }
+      .col-text {
+        font-size: 12px;
+      }
     }
     .button-group {
       position: relative;
       // right: 100px;
       float: right;
       margin-right: 20px;
+      z-index: 999;
+      .el-button {
+        border:1px solid #449284;
+        color: #449284;
+      }
+      .is-disabled {
+        color: #fff;
+      }
+      .el-button:hover {
+        background: #F1F7F6;
+      }
     }
     .choose {
       font-size: 12px;
       margin-bottom: 20px;
     }
     .item-tab {
-      width: 95%;
+      width: 100%;
       height: 46px;
       background: #F0F2F5;
       position: absolute;
     }
     .el-tabs__item.is-active {
-      color: #409eff;
+      color: #449284;
+    }
+    .el-tabs__item:hover {
+      color: #449284;
     }
     .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;
     }
     .tag-group {
-      margin-left: 78px;
+      margin-left: 104px;
+      margin-bottom: 20px;
       .el-tag {
         margin-right: 20px;
       }
     }
+    .el-tabs__active-bar {
+      background-color: #449284;
+    }
+    .el-tabs__content {
+      ::-webkit-scrollbar
+      {
+        width: 4px;
+        height: 10px;
+        background-color: #D8D8D8;
+      }
+      ::-webkit-scrollbar-thumb {
+        background-color: #D8D8D8;
+      }
+    }
   }
 }
 </style>
\ No newline at end of file

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

@@ -121,7 +121,7 @@ export default {
         projectId: vm.projectId,
         ids: operationData.getIds(vm.formInline,vm.organizationList,checkAll),
         type: operationData.getSearchType(vm.formInline,checkAll),
-        originalFlag: vm.formInline.checked == false ? 0 : 1
+        originalFlag: vm.formInline.checked == false ? 2 : 1
       };
       console.log("1 req", req);
       openLoading(vm);

src/views/learning/name-list.vue

@@ -31,8 +31,8 @@
             <el-option
               v-for="(item,index) in rankList"
               :key="index"
-              :label="item.gradeName"
-              :value="item.gradeFlag"
+              :label="item.label"
+              :value="item.value"
             ></el-option>
           </el-select>
         </el-form-item>
@@ -45,26 +45,42 @@
         <el-button @click="resetForm()">重置</el-button>
       </div>
       <el-table :data="tableData" class="course-table">
-        <el-table-column prop="doctorName" label="姓名" align="center"></el-table-column>
-        <el-table-column prop="sex" label="性别" align="center"></el-table-column>
-        <el-table-column prop="age" label="年龄" align="center"></el-table-column>
-        <el-table-column prop="titleName" label="职称" align="center"></el-table-column>
+        <el-table-column prop="doctorName" label="姓名" align="center">
+          <template slot-scope="scope">
+            <span>{{ scope.row.doctorName | nullOfValue }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="sex" label="性别" align="center">
+          <template slot-scope="scope">
+            <span>{{ scope.row.sex  | sexValue}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="age" label="年龄" align="center">
+          <template slot-scope="scope">
+            <span>{{ scope.row.age | nullOfValue }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="titleName" label="职称" align="center">
+          <template slot-scope="scope">
+            <span>{{ scope.row.titleName | nullOfValue }}</span>
+          </template>
+        </el-table-column>
         <el-table-column prop="hospitalName" label="机构" align="center"></el-table-column>
         <el-table-column prop="addressName" label="地区" align="center"></el-table-column>
-        <el-table-column v-if="tableType == 1" prop="learnStatus" label="参与课程状态" align="center">
+        <el-table-column v-if="tableType == 1" prop="finishFlag" label="参与课程状态" align="center">
           <template slot-scope="scope">
-            <span>{{ scope.row.learnStatus }}</span>
+            <span>{{ [scope.row.finishFlag , base] | finishFlagType }}</span>
           </template>
         </el-table-column>
         <el-table-column
           v-if="tableType == 1"
-          prop="finishedTime"
+          prop="finishTime"
           label="完成培训日期"
           align="center"
           min-width="150"
         >
           <template slot-scope="scope">
-            <span>{{ scope.row.finishedTime }}</span>
+            <span>{{ scope.row.finishTime | nullOfValue }}</span>
           </template>
         </el-table-column>
         <el-table-column
@@ -75,7 +91,7 @@
           align="center"
         >
           <template slot-scope="scope">
-            <span>{{ scope.row.passTime }}</span>
+            <span>{{ scope.row.passTime | nullOfValue }}</span>
           </template>
         </el-table-column>
         <el-table-column
@@ -91,8 +107,7 @@
         </el-table-column>
         <div slot="empty">
           <div class="table-empty">
-            <img src="../../assets/image/no-content1.png">
-            <p>没有相关数据，请重新选择查询范围</p>
+            <img src="../../assets/image/noData.png" />
           </div>
         </div>
       </el-table>
@@ -102,7 +117,7 @@
           @size-change="handleSizeChange"
           @current-change="handleCurrentChange"
           :current-page="formData.pageNo"
-          :page-sizes="[20, 50 ,100]"
+          :page-sizes="[20, 50 ,100, 200]"
           :page-size="formData.pageSize"
           layout="total, sizes, prev, pager, next, jumper"
           :total="totalRows"
@@ -148,26 +163,43 @@ export default {
       tableData: [],
       tableType: 1,
       totalRows: 0,
-      statusList: [
+      statusList: [],
+      rankList: [
         {
           value: -1,
           label: "全部"
         },
         {
           value: 0,
-          label: "未参与"
+          label: "无成绩"
         },
         {
           value: 1,
-          label: "参与中"
+          label: "优秀"
         },
         {
           value: 2,
-          label: "已完成"
-        }
+          label: "良好"
+        },
+        {
+          value: 3,
+          label: "及格"
+        },
+        {
+          value: 4,
+          label: "不及格"
+        },
+        {
+          value: 5,
+          label: "通过"
+        },
+        {
+          value: 6,
+          label: "不通过"
+        },
       ],
-      rankList: [],
-      queryData: {}
+      queryData: {},
+      base: null,
     };
   },
   // computed: {
@@ -177,13 +209,52 @@ export default {
   // },
   created() {
     vm = this;
+    vm.base = vm.getUrlSearch(window.location.href, "base");
     vm.getInitData();
     vm.search();
+    vm.initStatusList();
   },
   mounted: function() {
     commonUtil.resizeHeight();
   },
   methods: {
+    initStatusList() {
+      if(vm.base == null) {
+        vm.statusList = [
+          {
+            value: -1,
+            label: "全部"
+          },
+          {
+            value: 0,
+            label: "未参与"
+          },
+          {
+            value: 1,
+            label: "未完成"
+          },
+          {
+            value: 2,
+            label: "已完成"
+          }
+        ];
+      } else {
+        vm.statusList = [
+          {
+            value: -1,
+            label: "全部"
+          },
+          {
+            value: 0,
+            label: "未参与"
+          },
+          {
+            value: 1,
+            label: "已参与"
+          },
+        ]
+      }
+    },
     getHostital() {
       let req = {
         projectId: vm.queryData.projectId,
@@ -200,9 +271,9 @@ export default {
       vm.curmbThird = vm.getUrlSearch(window.location.href, "projectName");
       vm.jumPathFouth = '/item-list?id=' + vm.queryData.projectId + '&projectName=' + vm.queryData.projectName;
       console.log("queryData", vm.queryData);
-      if(vm.queryData.type == 4) {
-        vm.getHostital();
-      }
+      // if(vm.queryData.hospitalIdList.length > 0) {
+      //   vm.getHostital();
+      // }
     },
     searchData() {
       vm.formData.pageNo = 1;
@@ -216,18 +287,27 @@ export default {
         // console.log('this.tableType',this.tableType)
         let req = {
           projectId: query.projectId,
+          beginDate: query.beginDate,
+          endDate: query.endDate,
+          hospitalIdList: operationData.getHospitalIdList(query.hospitalIdList),
           originalFlag: query.originalFlag,
-          ids: query.ids,
-          type: query.type,
+          regionId: query.regionId,
+          timeFlag: query.timeFlag,
           courseId: query.courseId,
-          learnFlag: vm.formData.learnFlag,
-          doctorName: vm.formData.doctorName,
+          type: vm.formData.learnFlag,
+          name: vm.formData.doctorName,
           pageNo: vm.formData.pageNo,
           pageSize: vm.formData.pageSize,
         };
-        console.log("course req", req);
+        let reqUrl = '';
+        if(vm.base == null) {
+          reqUrl = 'stats/report/courseDetail';
+        } else {
+          reqUrl = 'stats/export/time/info/course';
+        }
+        console.log("course req", req , reqUrl);
         openLoading(vm);
-        vm.reportGET("report/portalProjectCourse/getUserList", req).then(res => {
+        vm.POST(reqUrl, req).then(res => {
           closeLoading(vm);
           if (res.code == "000000") {
             if(res.data.totalCount == 0 ) {
@@ -242,28 +322,29 @@ export default {
       } else if (this.tableType == 2) {
         vm.curmbFouth = "考试培训情况";
         //考试分析
-        let reqRank = {
-          projectId: query.projectId,
-        }
-        vm.reportGET("report/portalProjectExam/getGradeList", reqRank).then(res => {
-          if (res.code == "000000") {
-            vm.rankList = operationData.initRank(res.data.list);
-          }
-        });
         let req = {
           projectId: query.projectId,
+          beginDate: query.beginDate,
+          endDate: query.endDate,
+          hospitalIdList: operationData.getHospitalIdList(query.hospitalIdList),
           originalFlag: query.originalFlag,
-          ids: query.ids,
-          type: query.type,
+          regionId: query.regionId,
+          timeFlag: query.timeFlag,
           examId: query.examId,
           gradeFlag: vm.formData.gradeFlag,
           doctorName: vm.formData.doctorName,
           pageNo: vm.formData.pageNo,
           pageSize: vm.formData.pageSize,
         };
-        console.log("exam req", req);
+        let reqUrl = '';
+        if(vm.base == null) {
+          reqUrl = 'stats/report/getUserList';
+        } else {
+          reqUrl = 'stats/export/time/info/exam';
+        }
+        // console.log("exam req", req);
         openLoading(vm);
-        vm.reportGET("report/portalProjectExam/getUserList", req).then(res => {
+        vm.POST(reqUrl, req).then(res => {
           closeLoading(vm);
           if (res.code == "000000") {
             if(res.data.totalCount == 0 ) {
@@ -275,6 +356,8 @@ export default {
             vm.$message(res.message);
           }
         });
+
+
       }
     },
     resetForm() {
@@ -293,6 +376,7 @@ export default {
     handleSizeChange(val) {
       console.log(`每页 ${val} 条`);
       this.formData.pageSize = val;
+      this.formData.pageNo = 1;
       this.search();
     },
     handleCurrentChange(val) {
@@ -328,6 +412,12 @@ export default {
       position: relative;
       left: 50%;
     }
+    .table-empty {
+      img {
+        height: 24px;
+        width: 106px;
+      }
+    }
   }
 }
 </style>
\ No newline at end of file

src/views/learning/report-list.vue

@@ -54,8 +54,7 @@
         </el-table-column>
         <div slot="empty">
           <div class="table-empty">
-            <img src="../../assets/image/no-content1.png" />
-            <p>没有找到符合的结果</p>
+            <img src="../../assets/image/noData.png" />
           </div>
         </div>
       </el-table>
@@ -65,7 +64,7 @@
           @size-change="handleSizeChange"
           @current-change="handleCurrentChange"
           :current-page="formData.pageNo"
-          :page-sizes="[20, 50 ,100]"
+          :page-sizes="[20, 50 ,100, 200]"
           :page-size="formData.pageSize"
           layout="total, sizes, prev, pager, next, jumper"
           :total="totalRows"
@@ -134,9 +133,9 @@ export default {
     search() {
       let req = {};
       req = this.formData;
-      openLoading(vm);
+
       vm.GET("portal/portalInfo/getPortalReportProject", req).then(res => {
-        closeLoading(vm);
+
         if (res.code == "000000") {
           if(res.data.totalRows == 0) {
             vm.$message("没有找到符合的结果");
@@ -186,6 +185,12 @@ export default {
   .itemlist-content {
     padding: 10px;
     background: #fff;
+    .table-empty {
+      img {
+        height: 24px;
+        width: 106px;
+      }
+    }
   }
 }
 </style>
\ No newline at end of file