提交 2d6b9720 编写于 作者: zhentian.jia's avatar zhentian.jia

update

上级 dfcd30a3
...@@ -2306,9 +2306,9 @@ ...@@ -2306,9 +2306,9 @@
"dev": true "dev": true
}, },
"element-ui": { "element-ui": {
"version": "2.6.1", "version": "2.10.0",
"resolved": "http://192.168.110.93:4873/element-ui/-/element-ui-2.6.1.tgz", "resolved": "http://192.168.110.93:4873/element-ui/-/element-ui-2.10.0.tgz",
"integrity": "sha1-htt5/13psbzDGHtls3crDFQHRxg=", "integrity": "sha1-5hKfa21v/g260SWkqNF9RHpfY5w=",
"requires": { "requires": {
"async-validator": "~1.8.1", "async-validator": "~1.8.1",
"babel-helper-vue-jsx-merge-props": "^2.0.0", "babel-helper-vue-jsx-merge-props": "^2.0.0",
...@@ -2777,8 +2777,7 @@ ...@@ -2777,8 +2777,7 @@
"ansi-regex": { "ansi-regex": {
"version": "2.1.1", "version": "2.1.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"aproba": { "aproba": {
"version": "1.2.0", "version": "1.2.0",
......
...@@ -20,18 +20,18 @@ ...@@ -20,18 +20,18 @@
"axios": "0.16.2", "axios": "0.16.2",
"better-scroll": "^0.1.15", "better-scroll": "^0.1.15",
"echarts": "^4.2.0-rc.2", "echarts": "^4.2.0-rc.2",
"element-ui": "2.6.1", "element-ui": "^2.10.0",
"fastclick": "^1.0.6", "fastclick": "^1.0.6",
"iscroll": "^5.2.0", "iscroll": "^5.2.0",
"js-cookie": "^2.2.0", "js-cookie": "^2.2.0",
"js-md5": "^0.7.3", "js-md5": "^0.7.3",
"node-sass": "^4.9.2",
"qrcode": "^1.3.3", "qrcode": "^1.3.3",
"showdown": "^1.6.4", "showdown": "^1.6.4",
"vue": "^2.1.0", "vue": "^2.1.0",
"vue-infinite-scroll": "^2.0.2", "vue-infinite-scroll": "^2.0.2",
"vue-router": "^2.1.1", "vue-router": "^2.1.1",
"vuex": "^2.0.0", "vuex": "^2.0.0"
"node-sass": "^4.9.2"
}, },
"devDependencies": { "devDependencies": {
"autoprefixer": "^6.4.0", "autoprefixer": "^6.4.0",
......
...@@ -171,6 +171,19 @@ const vueFilter = { ...@@ -171,6 +171,19 @@ const vueFilter = {
return '已结束' return '已结束'
} }
}, },
partJoin: (value) => {
if(value == 1) {
return '是'
}else {
return '否'
}
},
partFinish: (value) => {
if(value == 1) {
return '是'
}else {
return '否'
}
},
} }
export default vueFilter export default vueFilter
\ No newline at end of file
...@@ -2,8 +2,7 @@ ...@@ -2,8 +2,7 @@
<div class="course-analysis-wrap"> <div class="course-analysis-wrap">
<bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond"></bread-crumb> <bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond"></bread-crumb>
<div class="component-content screenSet" id="screenSet"> <div class="component-content screenSet" id="screenSet">
<el-form ref="formInline" :model="formInline" label-width="80px" style="width:50%">
<el-form ref="formInline" :model="formInline" label-width="80px">
<el-form-item label="选择地区:"> <el-form-item label="选择地区:">
<el-cascader <el-cascader
size="small" size="small"
...@@ -23,6 +22,7 @@ ...@@ -23,6 +22,7 @@
@change="changeOrganization" @change="changeOrganization"
multiple multiple
collapse-tags collapse-tags
:disabled="formInline.region.length !== 3"
style="width:330px" style="width:330px"
> >
<el-option <el-option
...@@ -33,18 +33,24 @@ ...@@ -33,18 +33,24 @@
></el-option> ></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<div class="choose">{{ chooseOrganization }}</div> <div class="tag-group" >
<el-tag <el-tag
v-for="tag in tags" v-for="tag in tags"
:key="tag.name" :key="tag.value"
closable> type="info"
{{ tag }} closable
</el-tag> @close="handleTagClose(tag)">
{{ tag.label }}
</el-tag>
</div>
<el-form-item label=""> <el-form-item label="">
<el-checkbox size="small" v-model="formInline.checked">查看原始数据</el-checkbox> <el-checkbox size="small" v-model="formInline.checked">查看原始数据</el-checkbox>
</el-form-item> </el-form-item>
</el-form> </el-form>
<!-- <div class="choose">{{ chooseOrganization }}</div> --> <div class="form-button">
<el-button @click="search()" type="primary">查询</el-button>
<el-button @click="resetForm()">重置</el-button>
</div>
<div class="button-group"> <div class="button-group">
<el-button type="default" size="small" @click="exportExcel">导出Excel</el-button> <el-button type="default" size="small" @click="exportExcel">导出Excel</el-button>
<el-button type="default" size="small" @click="changeDate" v-if="activeName=='first'">数据调整</el-button> <el-button type="default" size="small" @click="changeDate" v-if="activeName=='first'">数据调整</el-button>
...@@ -53,7 +59,7 @@ ...@@ -53,7 +59,7 @@
</div> </div>
<el-tabs v-model="activeName" @tab-click="handleClick"> <el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="参与情况" name="first"> <el-tab-pane label="参与情况" name="first">
<part-in></part-in> <part-in ref="childPart" :formInline="formInline" :activeName="activeName" :organizationNum="organizationNum"></part-in>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="人群分析" name="second"> <el-tab-pane label="人群分析" name="second">
<crowd-analysis ref="childCrowd" :formInline="formInline" :activeName="activeName"> <crowd-analysis ref="childCrowd" :formInline="formInline" :activeName="activeName">
...@@ -108,14 +114,17 @@ export default { ...@@ -108,14 +114,17 @@ export default {
}, },
{ {
label: "西湖区第二人民医院", label: "西湖区第二人民医院",
value: 1, value: 66,
}, },
{ {
label: "杭州市中医院", label: "杭州市中医院",
value: 2, value: 233,
},
{
label: "仁济医院",
value: 999,
} }
], ],
chooseOrganization: "",
optionsRegion: [], optionsRegion: [],
formInline: { formInline: {
region: [], region: [],
...@@ -123,10 +132,11 @@ export default { ...@@ -123,10 +132,11 @@ export default {
organization: [], organization: [],
checked: false, checked: false,
pageNo: 1, pageNo: 1,
pageSize: 10 pageSize: 10,
}, },
tags: [], tags: [],
activeName: "first", activeName: "first",
organizationNum: 0,
}; };
}, },
computed: { computed: {
...@@ -151,37 +161,102 @@ export default { ...@@ -151,37 +161,102 @@ export default {
} }
}, },
handleChange(value) { handleChange(value) {
console.log(value); // console.log(value);
this.formInline.organization = [];
this.tags = [];
}, },
changeOrganization(value) { changeOrganization(value) {
console.log(value); // console.log('formInline',this.formInline.organization);
this.chooseOrganization = "";
this.tags = []; this.tags = [];
//选了全部的情况下
for (let a = 0; a < this.formInline.organization.length; a++) {
if(this.formInline.organization[a] == 0) {//选了全部
let tagItem = {
label: '全部',
value: 0,
}
this.tags.push(tagItem);
return;
}
}
//没选全部
for (let i = 0; i < this.organizationList.length; i++) { for (let i = 0; i < this.organizationList.length; i++) {
for(let j=0; j<value.length;j++) { for(let j=0; j<value.length;j++) {
if (value[j] == this.organizationList[i].value) { if (value[j] == this.organizationList[i].value) {
console.log('value[j]',j,value[j],this.organizationList[i].label ) // console.log('value[j]',j,value[j],this.organizationList[i].label )
this.chooseOrganization += this.organizationList[i].label + ' '; let tagItem = {
this.tags.push(this.organizationList[i].label); label: this.organizationList[i].label,
value: this.organizationList[i].value,
};
this.tags.push(tagItem);
} }
} }
} }
}, },
handleTagClose(tag) {
// console.log(tag);
//选了全部的情况下
if(this.tags.length > 0 && this.tags[0].value == 0) {
this.tags.splice(0, 1);
this.formInline.organization = [];
return;
}
//没全部的情况下
for(let i=0;i<this.tags.length;i++) {
if(tag.value == this.tags[i].value) {
this.tags.splice(i, 1);
this.formInline.organization.splice(this.formInline.organization.indexOf(tag.value), 1);
break;
}
}
},
getRegionOption() { getRegionOption() {
this.optionsRegion = operationData.getRegionOption(); this.optionsRegion = operationData.getRegionOption();
}, },
getOrganizationNum() {
//选择全部
let num = 0;
if(this.tags[0].value == 0) {
num = this.organizationList.length - 1;
return num;
}
//没有选择全部
num = this.tags.length;
return num;
},
search() { search() {
//console.log(this.formInline,this.activeName); // console.log(this.formInline,this.activeName);
if (this.activeName == "first") { 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") { } else if (this.activeName == "second") {
this.$refs.childCrowd.$emit("search"); this.$refs.childCrowd.$emit("search");
} else if (this.activeName == "third") { } else if (this.activeName == "third") {
this.$refs.childCourse.$emit("search"); this.$refs.childCourse.$emit("search");
} else if (this.activeName == "fourth") { } else if (this.activeName == "fourth") {
} else if (this.activeName == "fifth") { } else if (this.activeName == "fifth") {
} }
}, },
reset() {}, //重置
resetForm() {
vm.formInline = Object.assign(
{},
{
region: [],
date: "",
organization: [],
checked: false,
pageNo: 1,
pageSize: 10,
}
);
vm.tags = [];
},
exportExcel() { exportExcel() {
console.log('excel'); console.log('excel');
}, },
...@@ -204,6 +279,12 @@ export default { ...@@ -204,6 +279,12 @@ export default {
color: #449284; color: #449284;
border-bottom: 1px solid #efefef; border-bottom: 1px solid #efefef;
} }
.form-button {
width: 45%;
top: -120px;
position: relative;
left: 50%;
}
.button-group { .button-group {
// position: absolute; // position: absolute;
// right: 100px; // right: 100px;
...@@ -218,7 +299,13 @@ export default { ...@@ -218,7 +299,13 @@ export default {
color: #409eff; color: #409eff;
} }
.el-tabs__header { .el-tabs__header {
width: 81%; width: 65%;
}
.tag-group {
margin-left: 78px;
.el-tag {
margin-right: 20px;
}
} }
} }
} }
......
<template> <template>
<div class="part-in"> <div class="part-in">
<el-card> <div v-for="(item , index) in cardData" :key="index" class>
<el-table :data="reportDetail" style="width: 100%"> <el-card class="box-card">
<el-table-column prop="coverOrganizationNum" label="项目覆盖机构数" align="center"></el-table-column> <div slot="header" class="title">
<el-table-column prop="coverPeopleNum" label="项目覆盖人数" align="center"></el-table-column> <span class="weight">{{ item.title }}</span>
<el-table-column prop="joinPeopleNum" label="项目参与人数" align="center"></el-table-column>
<el-table-column prop="finishPeopleNum" label="项目完成人数" align="center"></el-table-column>
<el-table-column prop="goodPeopleNum" label="成绩优秀人数" align="center"></el-table-column>
<el-table-column prop="standardPeopleNum" label="成绩合格人数" align="center"></el-table-column>
<div slot="empty">
<div class="table-empty">
<img src="../../assets/image/no-content1.png">
<p>没有查询到相关结果</p>
</div>
</div> </div>
</el-table> <div class="box-content">
</el-card> <span class="weight">{{ item.num }}</span>
<div class="charts" ref="chartsBox" v-show="isShowEcharts"></div> {{ item.unit }}
<el-card class="finish-table" v-show="!isShowEcharts"> </div>
<el-table :data="finishDetail" style="width: 100%" border> </el-card>
<el-table-column prop="name" label="姓名" align="center"></el-table-column> </div>
<el-table-column prop="desk" label="科室" align="center"></el-table-column> <!-- <div class="charts" id="rankChart" ref="rankChart"></div> -->
<el-table-column prop="join" label="是否参与项目" align="center"></el-table-column> <div class="charts" id="age" ref="age"></div>
<el-table-column prop="finish" label="是否完成项目" align="center"></el-table-column> <el-table v-show="organizationNum < 2" :data="finishDetail" class="project-table" style="width: 100%" border>
<el-table-column prop="endTime" label="完成项目日期" align="center"></el-table-column> <el-table-column prop="name" label="姓名" align="center"></el-table-column>
</el-table> <el-table-column prop="desk" label="科室" align="center"></el-table-column>
</el-card> <el-table-column prop="join" label="是否参与项目" align="center">
<template slot-scope="scope">
{{ scope.row.join | partJoin }}
</template>
</el-table-column>
<el-table-column prop="finish" label="是否完成项目" align="center">
<template slot-scope="scope">
{{ scope.row.finish | partFinish }}
</template>
</el-table-column>
<el-table-column prop="endTime" label="完成项目日期" align="center">
<template slot-scope="scope">
{{ scope.row.endTime | liveDateFilter }}
</template>
</el-table-column>
</el-table>
</div> </div>
</template> </template>
<script> <script>
import { openLoading, closeLoading } from "../../utils/utils" import { openLoading, closeLoading } from "../../utils/utils";
const echarts = require("echarts") import * as commonUtil from "../../utils/utils";
import * as operationData from "../../utils/operation";
let vm; import echarts from "echarts";
let vm = null;
export default { export default {
props: {
formInline: {
type: Object
},
activeName: {
type: String
},
organizationNum: {
type: Number
},
},
data() { data() {
return { return {
reportDetail: [
{
// 报告详情数据
coverOrganizationNum:2,
coverPeopleNum: 0,
joinPeopleNum: 0,
finishPeopleNum: 0,
goodPeopleNum: 0,
standardPeopleNum: 0
}
],
// 图表数据 // 图表数据
chartOption: { chartOption: {
xAxisData: ["周一", "周二", "周三", "周一", "周二", "周三"], xAxisData: ["周一", "周二", "周三", "周一", "周二", "周三"],
seriesPass: [120, 132, 101, 120, 132, 101], seriesPass: [120, 132, 101, 120, 132, 101],
seriesJoin: [220, 182, 191, 220, 182, 191] seriesJoin: [220, 182, 191, 220, 182, 191]
}, },
// 只有一个机构时显示人员完成情况 // 只有一个机构时显示人员完成情况
finishDetail:[{ finishDetail: [],
name: '', cardData: [],
desk: '', showChart: true,
join: '是', showTable: false,
finish: '是',
endTime: '12-12-12'
}],
}; };
}, },
computed: {
isShowEcharts() {
return vm.reportDetail[0].coverOrganizationNum > 1
}
},
created() { created() {
vm = this; vm = this;
this.getCardData();
// this.getRank();
this.getAgeData();
this.getTableData();
}, },
mounted() { mounted: function() {
vm.initEcharts(); commonUtil.resizeHeight();
this.$on('search',()=>{
console.log(this.formInline,this.organizationNum);
if(this.organizationNum > 1) {
this.getCardData();
} else {
this.getTableData();
}
});
if (this.activeName == "first") {
// this.updateResize();
}
}, },
methods: { methods: {
// 初始化图表 updateResize() {
initEcharts() { this.$nextTick(function() {
openLoading(vm); let chartRank = echarts.init(document.getElementById("rankChart"))
let myChart = echarts.init(vm.$refs["chartsBox"]) window.onresize = function() {
myChart.setOption(vm.initEchartOption(vm.chartOption)) chartRank.resize();
closeLoading(vm) }
});
},
getTableData() {
vm.finishDetail = [
{
name: "张三",
desk: "神经内科",
join: 1,
finish: 1,
endTime: 1561707567000,
}
];
},
getRank() {
// let myChart = echarts.init(this.$refs.rankChart);
// let optionValue = operationData.getRank();
// console.log('optionValue值',optionValue)
// debugger;
// myChart.setOption(optionValue);
debugger;
let myChart = echarts.init(document.getElementById("rankChart"));
let data = [22, 50, 350, 80, 95];
let legendData = ["博士", "硕士", "本科", "大专", "大专以下"];
let colorData = ["#FF9F7F", "#FFDB5C", "#E062AE", "#37A2DA", "#67E0E3"];
let seriesData = [
{ value: 22, name: "博士" },
{ value: 50, name: "硕士" },
{ value: 350, name: "本科" },
{ value: 80, name: "大专" },
{ value: 95, name: "大专以下" }
];
for (let i = 0; i < data.length; i++) {
seriesData[i].value = data[i];
}
let option = operationData.getPicOption(
"用户学历分布",
legendData,
colorData,
seriesData
);
myChart.setOption(option);
}, },
// 图表参数 getCardData() {
initEchartOption(params) { this.cardData = [
// 图表相关的数据 {
let option = { title: "应参与机构数",
color: ['#1E90FF','#32CD32'], num: 10290,
title: { unit: ""
text: "排行榜",
x: "left",
textStyle: {
//主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
fontSize: 20,
fontStyle: "normal",
fontWeight: "normal",
color: "#000"
}
}, },
tooltip: { {
trigger: "axis", title: "应参与人数",
axisPointer: { num: 59287,
// 坐标轴指示器,坐标轴触发有效 unit: ""
type: "shadow" // 默认为直线,可选为:'line' | 'shadow'
}
}, },
legend: { {
data: ["完成人数", "参与人数"], title: "已参与人数",
bottom: 0 num: 47262,
unit: ""
}, },
grid: { {
left: "3%", title: "项目获证人数",
right: "4%", num: 47262,
bottom: "10%", unit: ""
containLabel: true
}, },
xAxis: [ {
{ title: "优秀证书人数",
type: "category", num: 47262,
data: params.xAxisData unit: ""
} },
], {
yAxis: [ title: "合格证书人数",
{ num: 47262,
type: "value" unit: ""
} },
], ];
series: [ },
{ getAgeData() {
name: "完成人数", let data = [1000, 25000, 15000, 8000, 7000, 500];
type: "bar", this.ageDivision(data);
stack: "人数", },
barMaxWidth: "80", ageDivision(data) {
data: params.seriesPass let myChart = echarts.init(this.$refs.age);
}, let xAxisData = [
{ "16-30",
name: "参与人数", "30-40",
type: "bar", "40-50",
stack: "人数", "50-60",
barMaxWidth: "80", "60以上",
data: params.seriesJoin "未完善信息"
} ];
] let seriesData = data;
} let option = operationData.getBarOption(xAxisData, seriesData);
return option
} myChart.setOption(option);
},
} }
}; };
</script> </script>
<style lang='scss' rel='stylesheet/scss'> <style lang='scss' rel='stylesheet/scss'>
.part-in { .part-in {
.box-card {
width: 15%;
margin-right: 1%;
float: left;
.el-card__header {
border-bottom-width: 0;
}
.title {
text-align: center;
}
.box-content {
text-align: center;
height: 40px;
}
}
.charts { .charts {
top: 20px;
margin-left: 10%;
width: 80%;
border-radius: 4px; border-radius: 4px;
border: 1px solid #ebeef5; border: 1px solid #ebeef5;
background-color: #fff; background-color: #fff;
...@@ -163,11 +226,10 @@ export default { ...@@ -163,11 +226,10 @@ export default {
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
height: 600px; height: 600px;
background: #fff; background: #fff;
margin-top: 50px;
padding: 20px; padding: 20px;
} }
.finish-table { .project-table {
margin-top: 30px; top: 15px;
background: #fff; background: #fff;
} }
} }
......
...@@ -51,7 +51,7 @@ ...@@ -51,7 +51,7 @@
</el-table-column> </el-table-column>
<el-table-column label="操作" fixed="right" align="center" min-width="200"> <el-table-column label="操作" fixed="right" align="center" min-width="200">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button type="text" size="small" @click="go(scope.row)">查看学情报告</el-button> <el-button style="color:#509284" type="text" size="small" @click="go(scope.row)">查看学情报告</el-button>
</template> </template>
</el-table-column> </el-table-column>
<div slot="empty"> <div slot="empty">
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册