<template>
|
<div class="app-container">
|
<!-- 头部盒子 -->
|
<div class="personages">
|
<el-row :gutter="20">
|
<el-col :span="4"
|
><div class="headportrait">
|
<div class="text-center">
|
<img v-imgError="require('@/assets/common/head.jpg')" src="" />
|
</div>
|
<div>吴大龙</div>
|
</div></el-col
|
>
|
<el-col :span="4"
|
><div class="xinz-inf">
|
<div class="addtag">＋新增标签</div>
|
<div class="tagvalue">心血管</div>
|
</div></el-col
|
>
|
<el-col :span="4"
|
><div class="info-xx">男<span>66岁</span></div></el-col
|
>
|
<el-col :span="4"><div class="info-xx">13803963330</div></el-col>
|
</el-row>
|
</div>
|
|
<el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
|
<el-tab-pane name="health">
|
<span class="mulsz" slot="label"
|
><i class="el-icon-date"></i> 健康档案</span
|
>
|
基本信息
|
</el-tab-pane>
|
<el-tab-pane name="medical">
|
<span class="mulsz" slot="label"
|
><i class="el-icon-s-management"></i> 医疗档案</span
|
>
|
<el-tabs v-model="sonactiveName" @tab-click="handleClick">
|
<el-tab-pane name="outpatient"
|
><span class="mulsz" slot="label"
|
>门诊({{ mznumber }})</span
|
></el-tab-pane
|
>
|
<el-tab-pane name="inhospital"
|
><span class="mulsz" slot="label"
|
>住院({{ zynumber }})
|
</span></el-tab-pane
|
>
|
<el-tab-pane name="checkout"
|
><span class="mulsz" slot="label"
|
>检验({{ jynumber }})
|
</span></el-tab-pane
|
>
|
<el-tab-pane name="examine"
|
><span class="mulsz" slot="label"
|
>检查({{ jcnumber }})
|
</span></el-tab-pane
|
>
|
<el-tab-pane name="physical"
|
><span class="mulsz" slot="label">
|
体检({{ tjnumber }})</span
|
></el-tab-pane
|
>
|
<el-tab-pane name="pharmacy"
|
><span class="mulsz" slot="label"
|
>用药({{ yynumber }})
|
</span></el-tab-pane
|
>
|
</el-tabs>
|
</el-tab-pane>
|
<el-tab-pane name="monitor">
|
<span class="mulsz" slot="label"
|
><i class="el-icon-s-data"></i> 健康监测</span
|
>
|
|
<el-tabs v-model="sontwoactiveName" @tab-click="handleClick">
|
<el-tab-pane name="blood"
|
><span class="mulsz" slot="label"
|
><i class="el-icon-s-operation"></i> 血压</span
|
></el-tab-pane
|
>
|
<el-tab-pane name="glucose"
|
><span class="mulsz" slot="label"
|
><i class="el-icon-odometer"></i>血糖
|
</span></el-tab-pane
|
>
|
<el-tab-pane name="weight"
|
><span class="mulsz" slot="label"
|
><i class="el-icon-s-data"></i>体重
|
</span></el-tab-pane
|
>
|
</el-tabs></el-tab-pane
|
>
|
<el-tab-pane name="serve">
|
<span class="mulsz" slot="label"
|
><i class="el-icon-s-custom"></i> 服务记录</span
|
>
|
|
定时任务补偿</el-tab-pane
|
>
|
</el-tabs>
|
|
<!-- 健康档案模块 -->
|
<div class="information-content" v-if="activeName == 'health'">
|
<div class="top-message">
|
<div class="headline">基础信息</div>
|
<div class="detailed">
|
<div class="one-column">
|
<div>患者姓名：<span class="spanvalue">王大美</span></div>
|
<div>性别：<span class="spanvalue">男</span></div>
|
|
<div>证件类型：<span class="spanvalue">身份证</span></div>
|
</div>
|
<div class="one-column">
|
<div>出生日期：<span class="spanvalue">1999-01-02</span></div>
|
|
<div>年龄：<span class="spanvalue">121</span></div>
|
|
<div class="">
|
证件号码：<span class="spanvalue">312223222322232223</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="bottom-message">
|
<div class="headline">号码维护</div>
|
<div class="Table-screen">
|
<el-table :data="tableData" style="width: 100%">
|
<el-table-column prop="name" label="姓名" width="180">
|
</el-table-column>
|
<el-table-column prop="phonenumber" label="联系方式" width="180">
|
</el-table-column>
|
<el-table-column prop="concern" label="关系"> </el-table-column>
|
<el-table-column prop="source" label="联系人来源">
|
</el-table-column>
|
<el-table-column prop="default" label="默认联系方式">
|
</el-table-column>
|
<el-table-column
|
label-class-name="columcz"
|
fixed="right"
|
label="操作"
|
width="300"
|
>
|
<template slot-scope="scope">
|
<el-button type="success" size="small"
|
>设为默认联系方式</el-button
|
>
|
<el-button type="warning" size="small">编辑</el-button>
|
<el-button type="danger" size="small">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
</div>
|
<!-- 医疗档案 -->
|
<div class="medical-record" v-else-if="activeName == 'medical'">
|
<!-- 门诊 -->
|
<div v-if="sonactiveName == 'outpatient'">
|
<el-table :data="serviceData" style="width: 100%">
|
<el-table-column prop="daya" label="就诊日期" width="180">
|
</el-table-column>
|
<el-table-column prop="hospitalname" label="医院名称" width="180">
|
</el-table-column>
|
<el-table-column prop="result" label="诊断结果"> </el-table-column>
|
<el-table-column prop="administrative" label="就诊科室">
|
</el-table-column>
|
<el-table-column prop="doctor" label="医生"> </el-table-column>
|
<el-table-column label-class-name="columcz" label="操作" width="300">
|
<template slot-scope="scope">
|
<el-button type="text" size="small">详情</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<pagination
|
v-show="total > 0"
|
:total="total"
|
:page.sync="queryParams.pageNum"
|
:limit.sync="queryParams.pageSize"
|
@pagination="getList"
|
/>
|
</div>
|
<!-- 住院 -->
|
<div v-if="sonactiveName == 'inhospital'">
|
<el-table :data="serviceData" style="width: 100%">
|
<el-table-column prop="godaya" label="入院日期"> </el-table-column>
|
<el-table-column prop="hospitalname" label="医院名称">
|
</el-table-column>
|
<el-table-column prop="result" label="入院科别"> </el-table-column>
|
<el-table-column prop="administrative" label="病区">
|
</el-table-column>
|
<el-table-column prop="bed" label="床位号"> </el-table-column>
|
<el-table-column prop="doctor" label="入院诊断"> </el-table-column>
|
<el-table-column prop="today" label="出院时间"> </el-table-column>
|
</el-table>
|
</div>
|
<!-- 检验 -->
|
<div v-if="sonactiveName == 'checkout'">
|
<el-table :data="serviceData" style="width: 100%">
|
<el-table-column prop="godaya" label="检验单号"> </el-table-column>
|
<el-table-column prop="hospitalname" label="报告日期">
|
</el-table-column>
|
<el-table-column prop="result" label="检验项目"> </el-table-column>
|
<el-table-column prop="administrative" label="医院名称">
|
</el-table-column>
|
</el-table>
|
</div>
|
<!-- 检查 -->
|
<div v-if="sonactiveName == 'examine'">
|
<el-table :data="serviceData" style="width: 100%">
|
<el-table-column prop="godaya" label="报告单"> </el-table-column>
|
<el-table-column prop="hospitalname" label="报告时间">
|
</el-table-column>
|
<el-table-column prop="result" label="检查项目"> </el-table-column>
|
<el-table-column prop="administrative" label="医院名称">
|
</el-table-column>
|
</el-table>
|
</div>
|
<!-- 体检 -->
|
<div v-if="sonactiveName == 'physical'">
|
<el-table :data="serviceData" style="width: 100%">
|
<el-table-column prop="daya" label="就诊日期"> </el-table-column>
|
<el-table-column prop="hospitalname" label="医院名称">
|
</el-table-column>
|
<el-table-column prop="result" label="诊断结果"> </el-table-column>
|
<el-table-column prop="administrative" label="就诊科室">
|
</el-table-column>
|
<el-table-column prop="doctor" label="医生"> </el-table-column>
|
<!-- <el-table-column
|
label-class-name="columcz"
|
fixed="right"
|
label="操作"
|
width="300"
|
>
|
<template slot-scope="scope">
|
<el-button type="text" size="small">详情</el-button>
|
</template>
|
</el-table-column> -->
|
</el-table>
|
</div>
|
<!-- 用药 -->
|
<div v-if="sonactiveName == 'pharmacy'">
|
<el-table :data="serviceData" style="width: 100%">
|
<el-table-column prop="daya" label="就诊日期"> </el-table-column>
|
<el-table-column prop="hospitalname" label="医院名称">
|
</el-table-column>
|
<el-table-column prop="result" label="诊断结果"> </el-table-column>
|
<el-table-column prop="administrative" label="就诊科室">
|
</el-table-column>
|
<el-table-column prop="doctor" label="医生"> </el-table-column>
|
</el-table>
|
</div>
|
</div>
|
|
<!-- 服务记录 -->
|
<div class="medical-record" v-else-if="activeName == 'serve'">sdaad</div>
|
<!-- 健康监测 -->
|
<div class="medical-record" v-show="activeName == 'monitor'">
|
<!-- 血压图标 -->
|
<div v-show="sontwoactiveName == 'blood'">
|
<div
|
id="xyeCharts"
|
class="sontwoactiveName"
|
style="width: 1300px; height: 800px"
|
></div>
|
</div>
|
<!-- 血糖 -->
|
<div v-show="sontwoactiveName == 'glucose'">
|
<div
|
id="xteCharts"
|
class="sontwoactiveName"
|
style="width: 1300px; height: 800px"
|
></div>
|
</div>
|
<!-- 体重 -->
|
<div v-show="sontwoactiveName == 'weight'">
|
<div
|
id="tzeCharts"
|
class="sontwoactiveName"
|
style="width: 1300px; height: 800px"
|
></div>
|
</div>
|
</div>
|
|
<!-- <div id="xyeCharts" style="width: 500px; height: 500px"></div> -->
|
</div>
|
</template>
|
|
<script>
|
import userAvatar from "./userAvatar";
|
import userInfo from "./userInfo";
|
import resetPwd from "./resetPwd";
|
import * as echarts from "echarts";
|
|
import { getUserProfile } from "@/api/system/user";
|
import { listJob } from "@/api/monitor/job"; //获取列表接口待定
|
|
export default {
|
name: "Profile",
|
components: { userAvatar, userInfo, resetPwd },
|
data() {
|
return {
|
user: {},
|
roleGroup: {},
|
postGroup: {},
|
mznumber: 14,
|
zynumber: 34,
|
jynumber: 32,
|
jcnumber: 12,
|
tjnumber: 12,
|
yynumber: 12,
|
total: 0, // 总条数
|
activeTab: "userinfo",
|
activeName: "health", //一类导航
|
sonactiveName: "outpatient", //健康监测导航
|
sontwoactiveName: "blood", //医疗档案导航
|
// 查询参数
|
queryParams: {
|
pageNum: 1,
|
pageSize: 10,
|
jobName: undefined,
|
jobGroup: undefined,
|
status: undefined,
|
},
|
echartdom: {},
|
xtechartdom: {},
|
tzechartdom: {},
|
tableData: [
|
{
|
date: "2016-05-02",
|
name: "王小虎",
|
address: "上海市普陀区金沙江路 1518 弄",
|
},
|
{
|
date: "2016-05-04",
|
name: "王小虎",
|
address: "上海市普陀区金沙江路 1517 弄",
|
},
|
{
|
date: "2016-05-01",
|
name: "王小虎",
|
address: "上海市普陀区金沙江路 1519 弄",
|
},
|
{
|
date: "2016-05-03",
|
name: "王小虎",
|
address: "上海市普陀区金沙江路 1516 弄",
|
},
|
],
|
serviceData: [
|
{
|
daya: "2023-12-12",
|
hospitalname: "协和",
|
result: "韧带拉伤",
|
administrative: "骨科",
|
doctor: "吴大龙",
|
},
|
],
|
};
|
},
|
created() {
|
this.$nextTick(function () {
|
this.echartdom = document.getElementById("xyeCharts");
|
this.xtechartdom = document.getElementById("xteCharts");
|
this.tzechartdom = document.getElementById("tzeCharts");
|
console.log(this.echartdom);
|
console.log(this.xtechartdom);
|
console.log(this.tzechartdom);
|
this.echartsInit();
|
this.xtechartsInit();
|
this.tzechartsInit();
|
});
|
this.getList();
|
},
|
methods() {},
|
|
methods: {
|
// 查询列表
|
getList() {
|
this.loading = true;
|
listJob(this.queryParams).then((response) => {
|
this.jobList = 1;
|
this.total = 1;
|
this.loading = false;
|
});
|
},
|
// getUser() {
|
// getUserProfile().then((response) => {
|
// this.user = response.data;
|
// this.roleGroup = response.roleGroup;
|
// this.postGroup = response.postGroup;
|
// });
|
// },
|
handleClick(tab, event) {
|
console.log(tab, event);
|
},
|
|
// 血压图表部分
|
echartsInit() {
|
// 基于准备好的dom，初始化echarts实例
|
console.log(echarts);
|
console.log(this.echartdom);
|
console.log(this.$refs.xyeCharts);
|
var myxyChart = echarts.init(this.echartdom);
|
console.log(myxyChart);
|
// var myxyChart = this.$echarts.init(document.getElementById("xyeCharts"));
|
// var myxyChart = this.$echarts.init(this.$refs.xyeCharts);
|
var option = {
|
title: {
|
text: "历史血压记录",
|
},
|
tooltip: {
|
trigger: "axis",
|
},
|
legend: {},
|
toolbox: {
|
show: true,
|
feature: {
|
dataZoom: {
|
yAxisIndex: "none",
|
},
|
dataView: { readOnly: false },
|
magicType: { type: ["line", "bar"] },
|
restore: {},
|
saveAsImage: {},
|
},
|
},
|
xAxis: {
|
type: "category",
|
boundaryGap: false,
|
data: ["一月", "二月", "三月", "四月", "五月", "六月", "七月"],
|
},
|
yAxis: {
|
type: "value",
|
axisLabel: {
|
formatter: "{value}",
|
},
|
},
|
series: [
|
{
|
name: "收缩压",
|
type: "line",
|
data: [100, 120, 130, 121, 132, 142, 119],
|
itemStyle: {
|
normal: {
|
color: "#ff7979",
|
},
|
},
|
markPoint: {
|
data: [{ type: "max", name: "舒张压高值" }],
|
},
|
markLine: {
|
data: [{ yAxis: 140, name: "正常舒张压高值" }],
|
},
|
},
|
{
|
name: "舒张压",
|
type: "line",
|
data: [71, 79, 82, 85, 93, 82, 90],
|
itemStyle: {
|
normal: {
|
color: "#409eff",
|
},
|
},
|
markPoint: {
|
data: [{ name: "周最低", type: "min" }],
|
},
|
markLine: {
|
data: [{ yAxis: 80, name: "正常舒张压高值" }],
|
},
|
},
|
],
|
};
|
console.log("ss");
|
// 使用刚指定的配置项和数据显示图表。
|
myxyChart.setOption(option);
|
},
|
// 血糖图表
|
xtechartsInit() {
|
// 基于准备好的dom，初始化echarts实例
|
// console.log(echarts);
|
console.log(this.xtechartdom);
|
var myxyChart = echarts.init(this.xtechartdom);
|
console.log(myxyChart);
|
const data = [
|
["2000-06-05", 116],
|
["2000-06-06", 129],
|
["2000-06-07", 135],
|
["2000-06-08", 86],
|
["2000-06-09", 73],
|
["2000-06-10", 85],
|
["2000-06-11", 73],
|
["2000-06-12", 68],
|
["2000-06-13", 92],
|
["2000-06-14", 130],
|
["2000-06-15", 245],
|
["2000-06-16", 139],
|
["2000-06-17", 115],
|
["2000-06-18", 111],
|
["2000-06-19", 309],
|
["2000-06-20", 206],
|
["2000-06-21", 137],
|
["2000-06-22", 128],
|
["2000-06-23", 85],
|
];
|
const dateList = data.map(function (item) {
|
return item[0];
|
});
|
const valueList = data.map(function (item) {
|
return item[1];
|
});
|
var option = {
|
title: {
|
text: "历史血糖记录",
|
},
|
visualMap: [
|
{
|
show: false,
|
type: "continuous",
|
seriesIndex: 0,
|
min: 0,
|
max: 400,
|
},
|
],
|
title: [
|
{
|
left: "center",
|
text: "血糖历史监测",
|
},
|
],
|
tooltip: {
|
trigger: "axis",
|
},
|
xAxis: [
|
{
|
data: dateList,
|
},
|
],
|
yAxis: [{}],
|
series: [
|
{
|
type: "line",
|
showSymbol: false,
|
data: valueList,
|
},
|
],
|
};
|
console.log("ss");
|
// 使用刚指定的配置项和数据显示图表。
|
myxyChart.setOption(option);
|
},
|
// 体重图表
|
tzechartsInit() {
|
// 基于准备好的dom，初始化echarts实例
|
console.log(echarts);
|
console.log(this.tzechartdom);
|
var myxyChart = echarts.init(this.tzechartdom);
|
console.log(myxyChart);
|
const data = [
|
["2000-06-05", 116],
|
["2000-06-06", 99],
|
["2000-06-07", 105],
|
["2000-06-08", 126],
|
["2000-06-09", 73],
|
["2000-06-10", 85],
|
["2000-06-11", 73],
|
["2000-06-12", 68],
|
["2000-06-13", 92],
|
["2000-06-14", 130],
|
["2000-06-15", 245],
|
["2000-06-16", 119],
|
["2000-06-17", 115],
|
["2000-06-18", 201],
|
["2000-06-19", 209],
|
["2000-06-20", 106],
|
["2000-06-21", 137],
|
["2000-06-22", 128],
|
["2000-06-23", 85],
|
];
|
const dateList = data.map(function (item) {
|
return item[0];
|
});
|
const valueList = data.map(function (item) {
|
return item[1];
|
});
|
var option = {
|
title: {
|
text: "历史血糖记录",
|
},
|
toolbox: {
|
show: true,
|
feature: {
|
dataZoom: {
|
yAxisIndex: "none",
|
},
|
dataView: { readOnly: false },
|
magicType: { type: ["line", "bar"] },
|
restore: {},
|
saveAsImage: {},
|
},
|
},
|
visualMap: [
|
{
|
show: false,
|
type: "continuous",
|
seriesIndex: 0,
|
min: 0,
|
max: 400,
|
},
|
],
|
title: [
|
{
|
left: "center",
|
text: "血糖历史监测",
|
},
|
],
|
tooltip: {
|
trigger: "axis",
|
},
|
xAxis: [
|
{
|
data: dateList,
|
},
|
],
|
yAxis: [{}],
|
series: [
|
{
|
type: "line",
|
showSymbol: false,
|
data: valueList,
|
lineStyle: {
|
width: 3,
|
type: "solid",
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
{
|
offset: 0,
|
color: "#FE7D2F",
|
},
|
{
|
offset: 1,
|
color: "#F9D423",
|
},
|
]),
|
},
|
},
|
],
|
};
|
console.log("ss");
|
// 使用刚指定的配置项和数据显示图表。
|
myxyChart.setOption(option);
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.personages {
|
height: 88px;
|
width: 100%;
|
background-color: #2486b9;
|
border-radius: 5px;
|
padding: 20px;
|
margin-bottom: 10px;
|
line-height: 48px;
|
font-size: 25px;
|
font-weight: 600;
|
color: #ffffff;
|
.headportrait {
|
display: flex;
|
.text-center {
|
width: 55px;
|
height: 55px;
|
margin-right: 10px;
|
img {
|
width: 100%;
|
height: 100%;
|
border-radius: 50%;
|
}
|
}
|
}
|
.xinz-inf {
|
display: flex;
|
font-size: 18px;
|
cursor: pointer;
|
.addtag{
|
|
}
|
}
|
}
|
.el-tabs--border-card {
|
font-size: 25px;
|
.mulsz {
|
font-size: 25px;
|
margin-top: 20px;
|
}
|
}
|
.information-content {
|
margin-top: 20px;
|
background: #ffffff;
|
border: 1px solid #dcdfe6;
|
-webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12),
|
0 0 6px 0 rgba(0, 0, 0, 0.04);
|
.top-message {
|
margin-top: 25px;
|
margin-left: 100px;
|
.detailed {
|
width: 70%;
|
padding: 30px;
|
margin-bottom: 30px;
|
background-color: #ddf0f8;
|
.one-column {
|
display: flex;
|
font-size: 20px;
|
margin-bottom: 30px;
|
padding-bottom: 3px;
|
.spanvalue {
|
display: inline-block;
|
min-width: 200px;
|
border-bottom: 1px solid rgb(172, 172, 172);
|
}
|
|
div {
|
width: 330px;
|
}
|
}
|
}
|
}
|
|
.headline {
|
font-size: 25px;
|
padding-left: 5px;
|
margin-bottom: 10px;
|
border-left: 8px solid rgb(65, 161, 190);
|
}
|
.bottom-message {
|
margin-bottom: 25px;
|
margin-left: 100px;
|
.Table-screen {
|
width: 70%;
|
padding: 30px;
|
margin-bottom: 30px;
|
background-color: #ddf0f8;
|
font-size: 20px !important;
|
}
|
}
|
}
|
.medical-record {
|
margin-top: 20px;
|
margin: 20px;
|
padding: 30px;
|
background: #ffffff;
|
border: 1px solid #dcdfe6;
|
-webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12),
|
0 0 6px 0 rgba(0, 0, 0, 0.04);
|
}
|
.sontwoactiveName {
|
margin: 0 auto;
|
}
|
// .columcz {
|
// align-items: center!important;
|
// }
|
</style>
|
