<template>
|
<div class="app-container">
|
<el-row :gutter="10" class="mb8">
|
<el-col :span="1.5">
|
<el-form :model="objs" :rules="rules" ref="form" size="small" :inline="true" label-width="80px">
|
<el-form-item label="单位名称" prop="firmId">
|
<el-select :remote-method="getRemoteData" v-model="objs.firmId" remote filterable
|
style="width: 200px" placeholder="请选择单位名称" clearable @change="idFn">
|
<el-option v-for="dict in CompanyList" :key="dict.cnName" :label="dict.cnName"
|
:value="dict.drugManufacturerId" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="部门" prop="dwDeptId">
|
<el-select v-model="objs.dwDeptId" placeholder="请选择部门" style="width: 200px" clearable
|
@change="idBm">
|
<el-option v-for="dict in deptList" :key="dict.id" :label="dict.dwDeptName" :value="dict.id" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="分组" prop="groupId">
|
<el-select v-model="objs.groupId" placeholder="请选择结算方式" style="width: 200px" clearable>
|
<el-option v-for="dict in groupingList" :key="dict.id" :label="dict.groupingName"
|
:value="dict.id" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="登记时间" prop="createTimeList">
|
<el-date-picker v-model="createTimeList" type="datetimerange" align="right"
|
:picker-options="pickerOptions" style="width: 260px" start-placeholder="开始日期"
|
end-placeholder="结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
|
@change="dateChangebirthday1">
|
</el-date-picker>
|
</el-form-item>
|
</el-form>
|
|
</el-col>
|
<el-col :span="1.5">
|
<el-button type="primary" size="mini" @click="handlequery"
|
v-hasPermi="['system:user:import']">查询</el-button>
|
</el-col>
|
|
</el-row>
|
|
<div style="margin: 5px 20px;width: 94%">
|
<el-row :gutter="10" class="mb8">
|
<!-- <el-col :span="1.5">
|
<el-button type="primary" size="mini" :disabled="single" @click="handleTeamfees">保存团队收费明细</el-button>
|
</el-col> -->
|
<el-col :span="1.5">
|
<el-button type="primary" size="mini" @click="handleAll">查看详细信息</el-button>
|
</el-col>
|
<el-col :span="1.5">
|
<el-button type="primary" size="mini" @click="handleothen"
|
v-hasPermi="['system:user:import']">导出团队信息</el-button>
|
</el-col>
|
</el-row>
|
<div style="display: flex;" v-if="userList.length != 0">
|
<div>人数合计：{{ Listdata.all }}</div>
|
<div style="margin: 0 20px;">检中：{{ Listdata.jianzhong }}</div>
|
<div style="margin: 0 15px;">未检：{{ Listdata.weijian }}</div>
|
<div>已完成：{{ Listdata.yijian }}</div>
|
</div>
|
<el-table v-loading="loading" ref="tree" :data="userList" border @selection-change="handleSelectionChange">
|
<el-table-column label="状态" align="center" prop="tjStatus" width="75">
|
<template slot-scope="scope">
|
<dict-tag :options="dict.type.tj_status" :value="scope.row.tjStatus" />
|
</template>
|
</el-table-column>
|
<el-table-column label="体检号" align="center" prop="tjNumber" width="165" />
|
<el-table-column label="姓名" align="center" prop="name" width="75" />
|
<el-table-column label="性别" align="center" prop="sex" width="75">
|
<template slot-scope="scope">
|
<dict-tag :options="dict.type.sys_user_sex" :value="scope.row.sex" />
|
</template>
|
</el-table-column>
|
<el-table-column label="年龄" align="center" prop="age" width="120" />
|
<el-table-column label="联系电话" align="center" prop="phoe" width="120" />
|
<el-table-column label="身份证号" align="center" prop="idCard" width="200" />
|
<el-table-column label="单位名称" align="center" prop="company" width="200" />
|
<el-table-column label="部门" align="center" prop="department" />
|
<el-table-column label="分组" align="center" prop="groupingName" />
|
<el-table-column label="创建时间" align="center" prop="updateTime" width="165" />
|
<el-table-column label="预约时间" align="center" prop="reservationTime" />
|
</el-table>
|
</div>
|
|
|
<!-- 查看详细信息对话框 -->
|
<div class="dia">
|
<el-dialog :title="title" :visible.sync="open" width="1300px" append-to-body>
|
<el-row :gutter="10" class="mb8">
|
<el-col :span="1.5">
|
<el-input v-model="bingZhong" placeholder="请输入病种名称" clearable @keyup.enter.native="handleQuery1"
|
style="width: 160px;" />
|
</el-col>
|
|
<!-- <el-col :span="1.5">
|
<el-button type="primary" size="mini" :disabled="single" @click="handlecan"
|
style="margin-top: 5px;">查看</el-button>
|
</el-col> -->
|
<el-col :span="1.5">
|
<el-button type="primary" size="mini" @click="handlesetup" v-hasPermi="['system:user:import']"
|
style="margin-top: 5px;">查看统计图</el-button>
|
</el-col>
|
<!-- <el-col :span="1.5">
|
<el-button type="primary" size="mini" @click="handlechart" v-hasPermi="['system:user:import']"
|
style="margin-top: 5px;">查看统计图</el-button>
|
</el-col> -->
|
|
</el-row>
|
<el-row :gutter="20">
|
<!--部门数据-->
|
<el-col :span="7" :xs="24">
|
<el-table v-loading="loading" ref="treeTable" :data="ListdataAll" height="500" border
|
@selection-change="handleChange">
|
<el-table-column type="selection" width="45">
|
</el-table-column>
|
<el-table-column label="病种" align="center" prop="rules.bingzhong" />
|
|
<el-table-column label="数量" align="center" prop="num" width="75" />
|
</el-table>
|
</el-col>
|
|
<!--用户数据-->
|
<el-col :span="16" :xs="24">
|
<el-table v-loading="loading" ref="tree" :data="orderList" border height="500">
|
<el-table-column label="病种" align="center" prop="bingzhong" width="100" />
|
<el-table-column label="体检号" align="center" prop="tjNumber" />
|
<el-table-column label="姓名" align="center" prop="cusName" width="60" />
|
<el-table-column label="性别" align="center" prop="cusSex" width="55">
|
<template slot-scope="scope">
|
<dict-tag :options="dict.type.sys_user_sex" :value="scope.row.cusSex" />
|
</template>
|
</el-table-column>
|
<el-table-column label="年龄" align="center" prop="cusAge" width="55" />
|
<el-table-column label="单位名称" align="center" prop="dwName" width="150" />
|
<el-table-column label="部门" align="center" prop="dwDeptName" />
|
<el-table-column label="分组" align="center" prop="groupName" width="78" />
|
</el-table>
|
</el-col>
|
</el-row>
|
</el-dialog>
|
</div>
|
|
<!-- 查看统计图 -->
|
<div class="dia">
|
<el-dialog :title="title2" :visible.sync="open2" width="1300px" append-to-body>
|
<div style=" height:620px;margin-top: 10px;">
|
<div id="main" style="width:95%;height:400px"> </div>
|
</div>
|
</el-dialog>
|
</div>
|
|
<!-- 设置对话框 -->
|
<div class="dia">
|
<el-dialog :title="title1" :visible.sync="open1" width="960px" append-to-body>
|
<div style="text-align: center;">
|
<el-transfer style="text-align: left; display: inline-block;" v-model="value" filterable
|
:render-content="renderFunc" :titles="['显示病种', '隐藏病种']" :button-texts="['显示', '隐藏']"
|
@change="handleChange1" :data="datalist">
|
</el-transfer>
|
</div>
|
<div slot="footer" class="dialog-footer2">
|
<el-button type="primary" @click="submitFormS">生成统计图</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
|
</div>
|
</template>
|
|
<script>
|
import { Deptlist, getDwAndDwDept } from "@/api/system/comp";
|
import { getCompany, queryCompany } from "@/api/team/tuanti";
|
import { tuanTiListById, tuanTiBingById, tuanTiBingChart } from "@/api/team/teams";
|
const echarts = require('echarts/lib/echarts');
|
require('echarts/lib/component/title');
|
require('echarts/lib/component/tooltip');
|
require('echarts/lib/component/legend');
|
require('echarts/lib/chart/pie');
|
|
export default {
|
name: "Tijian",
|
dicts: [
|
"dict_user_national",
|
"dict_user_marry",
|
"sys_yes_no",
|
"sys_user_sex",
|
"reservation_pay_type",
|
"sys_normal_disable",
|
"tj_status"
|
],
|
data() {
|
return {
|
datalist: [],
|
value: [],
|
renderFunc(h, option) {
|
return <span>{option.label}</span>;
|
},
|
objs: {
|
firmId: "",
|
dwDeptId: "",
|
groupId: "",
|
beginTime: "",
|
endTime: "",
|
pageNum: 1,
|
pageSize: 10,
|
|
},
|
data: {
|
dwId: "",
|
deptId: "",
|
},
|
// 弹出层标题
|
title: "",
|
bingZhong: "",
|
Listdata: {},
|
ListdataAll: [],
|
aidList: [],
|
// 弹出层标题
|
title1: "",
|
title2: "",
|
deptList: [],
|
CompanyList: [],
|
groupingList: [],
|
orderList: [],
|
userList: [],
|
menuIds: [],
|
proIds: [],
|
valueList: [],
|
// 是否显示弹出层
|
open: false,
|
open1: false,
|
open2: false,
|
// 非单个禁用
|
single: false,
|
cnName: "",
|
// 表单参数
|
form: {},
|
pickerOptions: {
|
shortcuts: [
|
{
|
text: "最近一周",
|
onClick(picker) {
|
const end = new Date();
|
const start = new Date(new Date().setHours(0, 0, 0, 0));
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
picker.$emit("pick", [start, end]);
|
},
|
},
|
{
|
text: "最近一个月",
|
onClick(picker) {
|
const end = new Date();
|
const start = new Date(new Date().setHours(0, 0, 0, 0));
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
picker.$emit("pick", [start, end]);
|
},
|
},
|
{
|
text: "最近三个月",
|
onClick(picker) {
|
const end = new Date();
|
const start = new Date(new Date().setHours(0, 0, 0, 0));
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
|
picker.$emit("pick", [start, end]);
|
},
|
},
|
],
|
},
|
// 表单校验
|
rules: {
|
firmId: [
|
{ required: true, message: "", trigger: "change" },
|
],
|
beginTime: [
|
{ required: true, message: "", trigger: "blur" },
|
],
|
dwDeptId: [
|
{ required: true, message: "", trigger: "change" },
|
],
|
groupId: [
|
{ required: true, message: "", trigger: "change" },
|
],
|
},
|
};
|
},
|
created() {
|
this.getNowTime()
|
this.getList();
|
},
|
|
methods: {
|
getList() {
|
this.loading = true;
|
getCompany(this.queryParam).then((response) => {
|
this.CompanyList = response.data;
|
this.total = response.total;
|
this.loading = false;
|
});
|
},
|
handlequery() {
|
if (this.objs.firmId && this.objs.dwDeptId) {
|
this.objs.beginTime = this.createTimeList[0]
|
this.objs.endTime = this.createTimeList[1]
|
tuanTiListById(this.objs).then((response) => {
|
this.Listdata = response.data
|
this.userList = response.data.list;
|
});
|
} else {
|
this.$message.warning("带星号为必填项")
|
}
|
|
},
|
handleQuery1() {
|
let data = {
|
firmId: this.data.dwId,
|
firmDeptId: this.data.deptId,
|
bingZhong: this.bingZhong
|
}
|
tuanTiBingById(data).then((response) => {
|
this.ListdataAll = response.data
|
});
|
},
|
// 多选框选中数据
|
handleSelectionChange(selection) {
|
|
// this.ids = selection.map((item) => item.id);
|
this.single = selection.length !== 1;
|
},
|
// 表单重置
|
reset() {
|
this.form = {
|
company: null,
|
payType: null,
|
name: null,
|
phoe: null,
|
signingPic: null,
|
pacStatus: "启用"
|
};
|
this.resetForm("form");
|
},
|
idFn(value) {
|
if (value) {
|
this.data.dwId = value
|
Deptlist(value).then((response) => {
|
this.deptList = response.data;
|
});
|
}
|
|
},
|
idBm(value) {
|
if (value) {
|
this.data.deptId = value
|
getDwAndDwDept(this.data).then((response) => {
|
this.groupingList = response.data;
|
});
|
}
|
},
|
|
// 搜索
|
getRemoteData(query) {
|
if (query) {
|
let compName = query;
|
queryCompany(compName).then((response) => {
|
this.CompanyList = response.data;
|
this.CompanyList.forEach((item) => {
|
this.objs = item;
|
});
|
});
|
}
|
},
|
// / 处理默认选中当前日期
|
getNowTime() {
|
var curDate = new Date().getTime();
|
var dayNum = 7 * 24 * 3600 * 1000;
|
var threeDays = curDate - dayNum;
|
var sDay = this.getLocalTime(threeDays);
|
var end = this.getLocalTime(curDate);
|
this.createTimeList = [sDay, end];
|
},
|
add0(m) {
|
return m < 10 ? "0" + m : m;
|
},
|
getLocalTime(nS) {
|
var time = new Date(nS);
|
var y = time.getFullYear();
|
var m = time.getMonth() + 1;
|
var d = time.getDate();
|
// var h = time.getHours();
|
// var mm = time.getMinutes();
|
return (
|
y +
|
"-" +
|
this.add0(m) +
|
"-" +
|
this.add0(d)
|
);
|
},
|
//获取时间
|
dateChangebirthday1(val) {
|
if (val == null) {
|
this.createTimeList = []
|
} else {
|
this.createTimeList = val;
|
}
|
},
|
// 取消按钮
|
cancel() {
|
this.open = false;
|
this.reset();
|
},
|
/** 查看详细信息按钮操作 */
|
handleAll() {
|
if (this.data.dwId && this.data.deptId) {
|
this.open = true;
|
this.title = "团检检出率";
|
let data = {
|
firmId: this.data.dwId,
|
firmDeptId: this.data.deptId,
|
}
|
tuanTiBingById(data).then((response) => {
|
this.ListdataAll = response.data
|
});
|
} else {
|
this.$message.warning("请选择单位或部门")
|
}
|
|
},
|
handleothen() {
|
|
},
|
handleChange(selection) {
|
|
if (selection.length > 1) {
|
const newRows = selection.filter((it, index) => {
|
if (index == selection.length - 1) {
|
this.$refs.treeTable.toggleRowSelection(it, true);
|
return true;
|
} else {
|
this.$refs.treeTable.toggleRowSelection(it, false);
|
return false;
|
}
|
});
|
|
newRows.forEach(item => {
|
this.orderList = item.orderList
|
})
|
} else {
|
selection.forEach(item => {
|
this.orderList = item.orderList
|
})
|
}
|
},
|
handleTeamfees() {
|
|
},
|
handlecan() {
|
|
},
|
|
handlechart() {
|
this.open2 = true;
|
this.title2 = "统计图表";
|
let data = {
|
firmId: this.data.dwId,
|
firmDeptId: this.data.deptId,
|
aidList: this.aidList
|
}
|
console.log(data)
|
tuanTiBingChart(data).then(res => {
|
console.log(res)
|
this.$nextTick(() => {
|
|
var chartDom = document.getElementById('main');
|
var myChart = echarts.init(chartDom);
|
var option;
|
|
const data = genData(50);
|
option = {
|
title: {
|
text: '团队体检情况',
|
// subtext: '纯属虚构',
|
left: 'center',
|
},
|
tooltip: {
|
trigger: 'item',
|
formatter: '{a} <br/>{b} : {c} ({d}%)'
|
},
|
legend: {
|
// type: 'scroll',
|
orient: 'vertical',
|
right: 10,
|
top: 80,
|
bottom: 20,
|
data: data.legendData
|
},
|
series: [
|
{
|
name: '姓名',
|
type: 'pie',
|
radius: '55%',
|
center: ['25%', '60%'],
|
// labelLine: {
|
// normal: {
|
// length: 40,
|
// length2: 30,
|
// lineStyle: {
|
// width: 1
|
// }
|
// }
|
// },
|
|
data: data.seriesData,
|
emphasis: {
|
itemStyle: {
|
shadowBlur: 10,
|
shadowOffsetX: 0,
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
}
|
}
|
}
|
]
|
};
|
function genData(count) {
|
// prettier-ignore
|
const nameList = [
|
'赵', '钱', '孙', '李', '周', '吴', '郑', '王', '冯', '陈', '褚', '卫', '蒋', '沈', '韩', '杨', '朱', '秦', '尤', '许', '何', '吕', '施', '张', '孔', '曹', '严', '华', '金', '魏', '陶', '姜', '戚', '谢', '邹', '喻', '柏', '水', '窦', '章', '云', '苏', '潘', '葛', '奚', '范', '彭', '郎', '鲁', '韦', '昌', '马', '苗', '凤', '花', '方', '俞', '任', '袁', '柳', '酆', '鲍', '史', '唐', '费', '廉', '岑', '薛', '雷', '贺', '倪', '汤', '滕', '殷', '罗', '毕', '郝', '邬', '安', '常', '乐', '于', '时', '傅', '皮', '卞', '齐', '康', '伍', '余', '元', '卜', '顾', '孟', '平', '黄', '和', '穆', '萧', '尹', '姚', '邵', '湛', '汪', '祁', '毛', '禹', '狄', '米', '贝', '明', '臧', '计', '伏', '成', '戴', '谈', '宋', '茅', '庞', '熊', '纪', '舒', '屈', '项', '祝', '董', '梁', '杜', '阮', '蓝', '闵', '席', '季', '麻', '强', '贾', '路', '娄', '危'
|
];
|
const legendData = [];
|
const seriesData = [];
|
for (var i = 0; i < count; i++) {
|
var name =
|
Math.random() > 0.65
|
? makeWord(4, 1) + '·' + makeWord(3, 0)
|
: makeWord(2, 1);
|
legendData.push(name);
|
seriesData.push({
|
name: name,
|
value: Math.round(Math.random() * 100000)
|
});
|
}
|
return {
|
legendData: legendData,
|
seriesData: seriesData
|
};
|
function makeWord(max, min) {
|
const nameLen = Math.ceil(Math.random() * max + min);
|
const name = [];
|
for (var i = 0; i < nameLen; i++) {
|
name.push(nameList[Math.round(Math.random() * nameList.length - 1)]);
|
}
|
return name.join('');
|
}
|
}
|
|
option && myChart.setOption(option);
|
let sizeFun = function () {
|
myChart.resize()
|
}
|
window.addEventListener("resize", sizeFun)
|
|
});
|
})
|
|
|
},
|
handlesetup() {
|
this.open1 = true;
|
this.title1 = "统计图设置";
|
this.datalist = []
|
if (this.data.dwId && this.data.deptId) {
|
let data = {
|
firmId: this.data.dwId,
|
firmDeptId: this.data.deptId,
|
}
|
tuanTiBingById(data).then((response) => {
|
response.data.forEach((item, index) => {
|
this.datalist.push(
|
{
|
key: item.rules.aid,
|
label: item.rules.bingzhong,
|
}
|
)
|
})
|
});
|
} else {
|
this.$message.warning("请选择单位或部门")
|
}
|
|
},
|
handleChange1(value, direction, movedKeys) {
|
this.valueList = value
|
},
|
submitFormS() {
|
if (this.valueList.length >= 1) {
|
this.aidList = []
|
this.datalist.forEach((item, index) => {
|
this.aidList.push(item.key)
|
})
|
let num = this.valueList.length
|
this.aidList.forEach((item, index) => {
|
this.valueList.forEach((item1, index1) => {
|
if (item == item1) {
|
this.aidList.splice(index, num)
|
}
|
})
|
})
|
}else if(this.valueList.length == 0){
|
this.aidList = []
|
this.datalist.forEach((item, index) => {
|
this.aidList.push(item.key)
|
})
|
}
|
this.open2 = true;
|
this.title2 = "统计图表";
|
let bingZhongVO = {
|
firmId: this.data.dwId,
|
firmDeptId: this.data.deptId,
|
aidList: this.aidList
|
}
|
tuanTiBingChart(bingZhongVO).then(res => {
|
this.echartsList = res.data
|
this.$nextTick(() => {
|
var chartDom = document.getElementById('main');
|
var myChart = echarts.init(chartDom);
|
var option;
|
|
option = {
|
title: {
|
text: '团队体检情况',
|
// subtext: '纯属虚构',
|
left: 'center',
|
},
|
tooltip: {
|
trigger: 'item',
|
formatter: '{a} <br/>{b} : {c} ({d}%)'
|
},
|
legend: {
|
// type: 'scroll',
|
orient: 'vertical',
|
right: 10,
|
top: 80,
|
bottom: 20,
|
data:this.echartsList
|
},
|
series: [
|
{
|
name: '病种名称',
|
type: 'pie',
|
radius: '55%',
|
center: ['25%', '60%'],
|
|
data: this.echartsList ,
|
emphasis: {
|
itemStyle: {
|
shadowBlur: 10,
|
shadowOffsetX: 0,
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
}
|
}
|
}
|
]
|
};
|
|
|
option && myChart.setOption(option);
|
let sizeFun = function () {
|
myChart.resize()
|
}
|
window.addEventListener("resize", sizeFun)
|
|
});
|
})
|
}
|
},
|
};
|
</script>
|
|
<style>
|
.el-transfer-panel {
|
width: 360px;
|
height: 480px;
|
}
|
|
.el-transfer-panel__body {
|
/* border: 1px solid red; */
|
height: 480px;
|
}
|
|
.el-transfer-panel__list.is-filterable {
|
height: 352px;
|
}
|
|
.el-button--primary.el-transfer__button {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
|
}
|
|
.el-transfer__button:first-child {
|
width: 82px;
|
margin-bottom: 10px;
|
}
|
|
.el-button+.el-button {
|
margin-left: 0px;
|
}
|
</style>
|
