<template>
|
<div class="app-container">
|
<!--部门数据-->
|
<el-col :span="4" :xs="24">
|
<div class="head-container">
|
<el-input v-model="tjNumber" placeholder="请输入体检号" clearable size="small" prefix-icon="el-icon-search"
|
style="margin-bottom: 15px" />
|
</div>
|
<div>
|
<el-row :gutter="10" class="mb8">
|
<el-col :span="1.5">
|
<el-button type="success" plain size="mini" @click="handleAll"
|
v-hasPermi="['hosp:Userinfo:edit']">全选</el-button>
|
</el-col>
|
<el-col :span="1.5">
|
<el-button type="success" plain size="mini" @click="handleInvert"
|
v-hasPermi="['hosp:Userinfo:remove']">反选</el-button>
|
</el-col>
|
<el-col :span="1.5">
|
<el-button type="success" plain size="mini" @click="handleContrast"
|
v-hasPermi="['hosp:Userinfo:remove']">历史对比</el-button>
|
</el-col>
|
</el-row>
|
</div>
|
<div class="head-container1">
|
<!-- <el-tree :data="deptOptions" :props="defaultProps" :expand-on-click-node="false"
|
:filter-node-method="filterNode" ref="tree" node-key="id" default-expand-all highlight-current
|
@node-click="handleNodeClick" /> -->
|
<el-tree ref="tree" :props="props" :data="deptOptions" show-checkbox node-key="id"
|
:default-checked-keys="menuIds" @check-change="handleCheckChange">
|
</el-tree>
|
</div>
|
</el-col>
|
|
<el-col :span="20" :xs="24">
|
<div style="margin-left: 60px;">
|
<el-row :gutter="10">
|
<el-form :model="model" ref="queryForm" size="small" :inline="true" label-width="68px">
|
<el-col :span="1.5">
|
<el-form-item label="姓名" prop="name">
|
<el-input v-model="model.tjCustomerName" placeholder="请输入姓名" clearable size="small"
|
style="margin-bottom: 15px" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="1.5">
|
<el-form-item label="性别" prop="tjNum">
|
<el-input v-model="model.tjCustomerSex" placeholder="请输入性别" clearable size="small"
|
style="margin-bottom: 15px" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="1.5">
|
<el-form-item label="电话" prop="createTimeList">
|
<el-input v-model="model.tjCustomerPhone" placeholder="请输入电话" clearable size="small"
|
style="margin-bottom: 15px" />
|
</el-form-item>
|
</el-col>
|
</el-form>
|
</el-row>
|
<!-- <el-row :gutter="10">
|
<el-col :span="1.5">
|
<el-input v-model="tjCustomerName" placeholder="请输入姓名" clearable size="small"
|
prefix-icon="el-icon-search" style="margin-bottom: 15px" />
|
</el-col>
|
<el-col :span="1.5">
|
<el-input v-model="tjCustomerSex" placeholder="请输入性别" clearable size="small"
|
prefix-icon="el-icon-search" style="margin-bottom: 15px" />
|
</el-col>
|
<el-col :span="1.5">
|
<el-input v-model="tjCustomerPhone" placeholder="请输入电话" clearable size="small"
|
prefix-icon="el-icon-search" style="margin-bottom: 15px" />
|
</el-col>
|
</el-row> -->
|
</div>
|
<div class="eachr">
|
<div class="view" v-for="(item, index) in aaa" :key="index" ref="roseChart">
|
</div>
|
</div>
|
</el-col>
|
|
|
</div>
|
</template>
|
|
<script>
|
import {
|
getcontrastList,
|
getHistoryContrast
|
} from "@/api/hosp/contrast";
|
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: "Contrast",
|
data() {
|
return {
|
// tjNumber: "10001230331183934",
|
tjNumber: "",
|
menuIds: [],
|
roseChart: "roseChart",
|
dataCheckList: {},
|
aaa: [],
|
deptOptions: [],
|
proIds: [],
|
LineChart: [],
|
personYYNum: [],
|
reportNum: [],
|
teamYYNum: [],
|
proName: [],
|
props: {
|
children: "children",
|
label: "proName",
|
},
|
model: {
|
tjCustomerName: "",
|
tjCustomerSex: "",
|
tjCustomerPhone: "",
|
}
|
};
|
},
|
|
watch: {
|
$route(to, from) {
|
window.location.reload(); //监测到路由发生跳转时刷新一次页面
|
// this.$router.go(0);
|
},
|
},
|
|
created() {
|
if (this.$route.query.tjNumber) {
|
this.tjNumber = this.$route.query.tjNumber
|
this.model.tjCustomerName = this.$route.query.tjCustomerName
|
this.model.tjCustomerSex = this.$route.query.tjCustomerSex
|
if (this.model.tjCustomerSex == "0") {
|
this.model.tjCustomerSex = "男"
|
} else {
|
this.model.tjCustomerSex = "女"
|
}
|
this.model.tjCustomerPhone = this.$route.query.tjCustomerPhone
|
}
|
|
this.getList();
|
},
|
methods: {
|
/** 查询体检项目对比列表 */
|
getList() {
|
getcontrastList().then((response) => {
|
this.deptOptions = response.data
|
})
|
},
|
handleCheckChange(data, checked, indeterminate) {
|
this.dataCheckList = data
|
if (checked == true) {
|
this.proIds.push(this.dataCheckList.proId)
|
} else if (checked == false) {
|
this.proIds.forEach((item, index) => {
|
if (item == this.dataCheckList.proId) {
|
this.proIds.splice(index, 1)
|
}
|
})
|
}
|
|
},
|
handleContrast() {
|
let data = {
|
proIds: this.proIds,
|
tjNumber: this.tjNumber
|
}
|
// 折线图
|
getHistoryContrast(data).then((response) => {
|
var echarts = require("echarts");
|
this.aaa = response.data
|
let _this = this
|
_this.$nextTick(() => {
|
for (var i = 0; i < _this.$refs.roseChart.length; i++) {
|
(function (i) {
|
_this.LineChart = []
|
_this.personYYNum = []
|
_this.proName = []
|
_this.aaa[i].contrastVo.forEach(item => {
|
_this.LineChart.push(item.time)
|
_this.personYYNum.push(item.proResult
|
);
|
})
|
_this.proName.push(_this.aaa[i].proName)
|
var myChart = echarts.init(_this.$refs.roseChart[i]);
|
myChart.setOption({
|
tooltip: {
|
trigger: 'axis'
|
},
|
legend: {
|
data: _this.proName,
|
},
|
grid: {
|
left: '4%',
|
right: '8%',
|
bottom: '3%',
|
containLabel: true
|
},
|
toolbox: {
|
feature: {
|
saveAsImage: {}
|
}
|
},
|
xAxis: {
|
// name: '时间',
|
type: 'category',
|
boundaryGap: false,
|
axisLine: {
|
show: true,
|
lineStyle: {
|
color: "blue",
|
size: 12,
|
width: 0,
|
tyle: "solid"
|
}
|
},
|
data: _this.LineChart
|
},
|
yAxis: {
|
type: 'value',
|
min: 0,
|
max: 190,
|
interval: 50
|
},
|
series: [
|
{
|
name: _this.proName,
|
type: 'line',
|
stack: 'Total',
|
data: _this.personYYNum
|
},
|
]
|
|
})
|
let sizeFun = function () {
|
myChart.resize()
|
}
|
window.addEventListener("resize", sizeFun)
|
})(i)
|
|
}
|
})
|
|
// }
|
this.loading = false;
|
});
|
},
|
handleAll() {
|
this.proIds = []
|
this.deptOptions.forEach(item => {
|
this.menuIds.push(item.id)
|
this.proIds.push(item.proId)
|
})
|
this.$refs.tree.setCheckedKeys(this.menuIds)
|
},
|
handleInvert() {
|
this.menuIds = []
|
this.proIds = []
|
this.$refs.tree.setCheckedKeys(this.menuIds)
|
},
|
|
}
|
}
|
|
</script>
|
|
|
<style scoped>
|
.head-container1 {
|
height: 600px;
|
overflow-y: auto;
|
}
|
|
.eachr {
|
width: 1200px;
|
height: 800px;
|
overflow-y: scroll;
|
display: flex;
|
flex-wrap: wrap;
|
}
|
|
.view {
|
margin: 0px 15px;
|
height: 400px;
|
width: calc(50% - 30px);
|
/* border: 1px solid red; */
|
margin-bottom: 10px;
|
}
|
</style>
|
