前端vue实现echarts+甘特图全动态显示数据，提供翻页功能，提供数据更新功能，根据数据更新横线，并提供hover效果，展示当前列描述信息
效果<div id="myChart" :style="{width: '1633px', height: '300px'}"></div><!--表格--><div style="margin-left: 3px;width: 1633px;"><table style="border: 1px solid bl...
·
场景：
1.在开发一个后台系统时，遇到一个甘特图的需求
2.通过特定的数据结构和vue的循环判断加上table原生表格的合并行列实现需求
效果
<template>
<div class="hello">
<!--Echarts图表盒子-->
<div id="myChart" :style="{width: '1633px', height: '300px'}"></div>
<!--表格-->
<div style="margin-left: 3px;width: 1633px;">
<table style="border: 1px solid blue;" id="infotableid">
<!--住院天数-->
<!--<tr>-->
<!--<td style="text-align: right;" colspan="2">住院天数</td>-->
<!--<td v-for="dayS in dayS" style="width: 142px;text-align: center;font-size: 12px;">{{dayS}}</td>-->
<!--</tr>-->
<tr>
<td style="text-align: right;" colspan="2">疼痛评分</td>
<td v-for="dayS in FixedGuardianshipChartInfoList" style="width: 142px;text-align: center;font-size: 12px;"><span v-for="PainLevelListdata in dayS.PainLevelList">{{PainLevelListdata}} </span></td>
</tr>
<tr>
<td style="text-align: right;" colspan="2">住院天数</td>
<td v-for="dayS in FixedGuardianshipChartInfoList" style="width: 142px;text-align: center;font-size: 12px;">{{dayS.InhsopCount}}</td>
</tr>
<tr>
<td colspan="2" style="text-align: right;">呼吸（次/分）</td>
<td v-if="FixedGuardianshipChartInfoList.length!==undefined && FixedGuardianshipChartInfoList.length>0" v-for="Breathings in FixedGuardianshipChartInfoList" style="width: 135px;">{{Breathings.Breathing}}</td>
<td v-if="FixedGuardianshipChartInfoList.length!==undefined && FixedGuardianshipChartInfoList.length==0" v-for="cellength in [1,2,3,4,5,6,7,8,9,10]"></td>
</tr>
<tr>
<td rowspan="4">
出量
</td>
<td style="text-align: right;">小便量（ml）</td>
<td v-if="FixedGuardianshipChartInfoList.length!==undefined && FixedGuardianshipChartInfoList.length>0" v-for="OuputClss in FixedGuardianshipChartInfoList" style="">{{OuputClss.OuputCls.UrineVolume}}</td>
<td v-if="FixedGuardianshipChartInfoList.length!==undefined && FixedGuardianshipChartInfoList.length==0" v-for="cellength in [1,2,3,4,5,6,7,8,9,10]"></td>
</tr>
<tr>
<td style="text-align: right;">大便（次）</td>
<td v-if="FixedGuardianshipChartInfoList.length!==undefined && FixedGuardianshipChartInfoList.length>0" v-for="OuputClss in FixedGuardianshipChartInfoList" style="">{{OuputClss.OuputCls.StoolTimes}}</td>
<td v-if="FixedGuardianshipChartInfoList.length!==undefined && FixedGuardianshipChartInfoList.length==0" v-for="cellength in [1,2,3,4,5,6,7,8,9,10]"></td>
</tr>
<tr>
<td style="text-align: right;">引流量（ml）</td>
<td v-if="FixedGuardianshipChartInfoList.length!==undefined && FixedGuardianshipChartInfoList.length>0" v-for="OuputClss in FixedGuardianshipChartInfoList" style="">{{OuputClss.OuputCls.InducedFlow}}</td>
<td v-if="FixedGuardianshipChartInfoList.length!==undefined && FixedGuardianshipChartInfoList.length==0" v-for="cellength in [1,2,3,4,5,6,7,8,9,10]"></td>
</tr>
<tr>
<td style="text-align: right;">其他（ml）</td>
<td v-if="FixedGuardianshipChartInfoList.length!==undefined && FixedGuardianshipChartInfoList.length>0" v-for="OuputClss in FixedGuardianshipChartInfoList" style="">{{OuputClss.OuputCls.Other}}</td>
<td v-if="FixedGuardianshipChartInfoList.length!==undefined && FixedGuardianshipChartInfoList.length==0" v-for="cellength in [1,2,3,4,5,6,7,8,9,10]"></td>
</tr>
<!--入量-->
<tr>
<td rowspan="2">
入量
</td>
<td style="text-align: right;">饮入量（ml）</td>
<td v-if="FixedGuardianshipChartInfoList.length!==undefined && FixedGuardianshipChartInfoList.length>0" v-for="InputClsobject in FixedGuardianshipChartInfoList" style="">{{InputClsobject.InputCls.Intake}}</td>
<td v-if="FixedGuardianshipChartInfoList.length!==undefined && FixedGuardianshipChartInfoList.length==0" v-for="cellength in [1,2,3,4,5,6,7,8,9,10]"></td>
</tr>
<tr>
<td style="text-align: right;">输入量（ml）</td>
<td v-if="FixedGuardianshipChartInfoList.length!==undefined && FixedGuardianshipChartInfoList.length>0" v-for="InputClsobject in FixedGuardianshipChartInfoList" style="">{{InputClsobject.InputCls.Input}}</td>
<td v-if="FixedGuardianshipChartInfoList.length!==undefined && FixedGuardianshipChartInfoList.length==0" v-for="cellength in [1,2,3,4,5,6,7,8,9,10]"></td>
</tr>
<!--血压-->
<tr>
<td rowspan="2">
血压
</td>
<td style="text-align: right;">收缩压（mmHg）</td>
<td v-if="FixedGuardianshipChartInfoList.length!==undefined && FixedGuardianshipChartInfoList.length>0" v-for="BloodPressureDetailobj in FixedGuardianshipChartInfoList" style="">{{BloodPressureDetailobj.BloodPressureDetail.SystolicPressure}}</td>
<td v-if="FixedGuardianshipChartInfoList.length!==undefined && FixedGuardianshipChartInfoList.length==0" v-for="cellength in [1,2,3,4,5,6,7,8,9,10]"></td>
</tr>
<tr>
<td style="text-align: right;">舒张压（mmHg）</td>
<td v-if="FixedGuardianshipChartInfoList.length!==undefined && FixedGuardianshipChartInfoList.length>0" v-for="BloodPressureDetailobj in FixedGuardianshipChartInfoList" style="">{{BloodPressureDetailobj.BloodPressureDetail.DiastolicPressure}}</td>
<td v-if="FixedGuardianshipChartInfoList.length!==undefined && FixedGuardianshipChartInfoList.length==0" v-for="cellength in [1,2,3,4,5,6,7,8,9,10]"></td>
</tr>
<!--手术-->
<!--<tr>-->
<!--<td style="text-align: right;" colspan="2">手术</td>-->
<!--<td v-for="OperationInfoListinfo in OperationInfoList" style="">-->
<!--<span class="iconcolor OperationBacImg" v-if="OperationInfoListinfo.IsUse">-->
<!--<p class="tdtip">-->
<!--<span v-for="OprLists in OperationInfoListinfo.OprList" v-if="OprLists.IsUse">{{OprLists.OprInfo}}<br></span>-->
<!--</p>-->
<!--</span>-->
<!--</td>-->
<!--<td v-if="OperationInfoList.length!==undefined && OperationInfoList.length==0" v-for="cellength in [1,2,3,4,5,6,7,8,9,10]"></td>-->
<!--</tr>-->
<!--病原学送检申请-->
<!--<tr>-->
<!--<td style="text-align: right;" colspan="2">病原学送检申请</td>-->
<!--<td v-for="PathogenicExaminationListinfo in PathogenicExaminationList" style="">-->
<!--<span class="PEiconcolor" v-if="PathogenicExaminationListinfo.IsUse" style="color: green">-->
<!--检-->
<!--<p class="PEtdtip">-->
<!--<span v-for="PElist in PathogenicExaminationListinfo.ExamList" v-if="PElist.IsUse">-->
<!--{{PElist.RequestNo}} -->
<!--{{PElist.SamplingTime}} -->
<!--{{PElist.LabName}} -->
<!--{{PElist.ReportTime}} -->
<!--{{PElist.LabResult}} -->
<!--<br></span>-->
<!--</p>-->
<!--</span>-->
<!--</td>-->
<!--<td v-if="PathogenicExaminationList.length!==undefined && PathogenicExaminationList.length==0" v-for="cellength in [1,2,3,4,5,6,7,8,9,10]"></td>-->
<!--</tr>-->
<!--药品-->
<tr v-for="DrugNameArrays in YAntibacterialDrugList">
<td style="text-align: right;" colspan="2">{{DrugNameArrays.DrugName}}</td>
<td v-for="tableDatainfo in AntibacterialDrugList">
<span class="Drugiconcolor" v-for="drugs in tableDatainfo.AntibacterialDrugList" v-if="drugs.DrugCode==DrugNameArrays.DrugCode&&drugs.IsUse">
<span class="Drugtdtip">
<!--<span v-if="drugs.IsTemp==1">【临】 </span>-->
<!--<span v-if="drugs.IsTemp==0">【长】 </span>-->
{{drugs.DrugInfo}}
</span>
</span>
</td>
</tr>
<!--自定义项目检验结果项目-->
<tr v-for="defineLabNameArrays in YUserDefineLabList">
<td style="text-align: right;" colspan="2">{{defineLabNameArrays.ItemName}}</td>
<td v-for="UserDefineLabListinfo in UserDefineLabList">
<span class="Drugiconcolor" v-for="DefineLabS in UserDefineLabListinfo.UserDefineLabList" v-if="DefineLabS.ItemCode==defineLabNameArrays.ItemCode&&DefineLabS.IsUse">
<!--<span class="Drugtdtip">{{DefineLabS.LabInfo}}</span>-->
<span class="Drugtdtip">
<span>{{DefineLabS.TakeTime}} </span>
<!--<span>{{DefineLabS.LabResult}} </span>-->
<span v-if="DefineLabS.ResultFlag=='H'" style="color: red;">{{DefineLabS.LabResult}} ↑ </span>
<span v-if="DefineLabS.ResultFlag=='M'">{{DefineLabS.LabResult}}</span>
<span v-if="DefineLabS.ResultFlag=='L'" style="color: red;">{{DefineLabS.LabResult}} ↓ </span>
<span v-if="DefineLabS.ResultFlag=='P'" style="color: red;">{{DefineLabS.LabResult}} 阳性 </span>
<span v-if="DefineLabS.ResultFlag=='Q'" style="color: red;">{{DefineLabS.LabResult}} 弱阳性 </span>
<span v-if="DefineLabS.ResultFlag=='N'" style="color: red;">{{DefineLabS.LabResult}} 阴性 </span>
<span v-if="DefineLabS.ResultFlag=='E'" style="color: red;">{{DefineLabS.LabResult}} 错误 </span>
<span>（{{DefineLabS.Range}}） </span>
<span>{{DefineLabS.Unit}} </span>
</span>
</span>
</td>
</tr>
<!--自定义项目药品-->
<tr v-for="YUserDefineDrugListNameArrays in YUserDefineDrugList">
<td style="" colspan="2">{{YUserDefineDrugListNameArrays.DrugName}}</td>
<td v-for="UserDefineLabListinfo in UserDefineDrugList">
<span class="Drugiconcolor" v-for="UserDefineDrugListS in UserDefineLabListinfo.UserDefineDrugList" v-if="UserDefineDrugListS.DrugCode==YUserDefineDrugListNameArrays.DrugCode&&UserDefineDrugListS.IsUse">
<span class="Drugtdtip">{{UserDefineDrugListS.DrugInfo}}</span>
</span>
</td>
</tr>
</table>
</div>
</div>
</template>
<script>
export default {
name: 'hello',
data () {
return {
AntibacterialDrugList: [],
YAntibacterialDrugList: [],//药品y轴
/*每天固定所有数据*/
FixedGuardianshipChartInfoList: [
{
Date: "2019-09-28",//日期
InhsopCount: "40",//住院天数
Pulse: "100",//脉搏
Breathing: "20",//呼吸
Temperature: "36",//体温
/*出量*/
OuputCls: {
UrineVolume: "10",
StoolTimes: "20",
InducedFlow: "30",
Other: "40"
},
/*入量*/
InputCls: {
Intake: "50",
Input: "60"
},
/*血压*/
BloodPressureDetail: {
SystolicPressure: "70",
DiastolicPressure: "80"
},
PainLevelList: [3]//疼痛评分
}, {
Date: "2019-09-29",
InhsopCount: "41",
Pulse: "90",
Breathing: "63",
Temperature: "40",
/*出量*/
OuputCls: {
UrineVolume: "10",
StoolTimes: "20",
InducedFlow: "30",
Other: "40"
},
/*入量*/
InputCls: {
Intake: "50",
Input: "60"
},
/*血压*/
BloodPressureDetail: {
SystolicPressure: "70",
DiastolicPressure: "80"
},
PainLevelList: [3]//疼痛评分
}, {
Date: "2019-09-30",
InhsopCount: "42",
Pulse: "80",
Breathing: "62",
Temperature: "38",
/*出量*/
OuputCls: {
UrineVolume: "10",
StoolTimes: "20",
InducedFlow: "30",
Other: "40"
},
/*入量*/
InputCls: {
Intake: "50",
Input: "60"
},
/*血压*/
BloodPressureDetail: {
SystolicPressure: "70",
DiastolicPressure: "80"
},
PainLevelList: [3]//疼痛评分
}, {
Date: "2019-10-01",
InhsopCount: "43",
Pulse: "80",
Breathing: "15",
Temperature: "35",
/*出量*/
OuputCls: {
UrineVolume: "10",
StoolTimes: "20",
InducedFlow: "30",
Other: "40"
},
/*入量*/
InputCls: {
Intake: "50",
Input: "60"
},
/*血压*/
BloodPressureDetail: {
SystolicPressure: "70",
DiastolicPressure: "80"
},
PainLevelList: [3]//疼痛评分
}, {
Date: "2019-10-02",
InhsopCount: "44",
Pulse: "120",
Breathing: "14",
Temperature: "37",
/*出量*/
OuputCls: {
UrineVolume: "10",
StoolTimes: "20",
InducedFlow: "30",
Other: "40"
},
/*入量*/
InputCls: {
Intake: "50",
Input: "60"
},
/*血压*/
BloodPressureDetail: {
SystolicPressure: "70",
DiastolicPressure: "80"
},
PainLevelList: [3]//疼痛评分
}, {
Date: "2019-10-03",
InhsopCount: "45",
Pulse: "80",
Breathing: "36",
Temperature: "37",
/*出量*/
OuputCls: {
UrineVolume: "10",
StoolTimes: "20",
InducedFlow: "30",
Other: "40"
},
/*入量*/
InputCls: {
Intake: "50",
Input: "60"
},
/*血压*/
BloodPressureDetail: {
SystolicPressure: "70",
DiastolicPressure: "80"
},
PainLevelList: [3]//疼痛评分
}, {
Date: "2019-10-04",
InhsopCount: "46",
Pulse: "90",
Breathing: "33",
Temperature: "35",
/*出量*/
OuputCls: {
UrineVolume: "10",
StoolTimes: "20",
InducedFlow: "30",
Other: "40"
},
/*入量*/
InputCls: {
Intake: "50",
Input: "60"
},
/*血压*/
BloodPressureDetail: {
SystolicPressure: "70",
DiastolicPressure: "80"
},
PainLevelList: [3]//疼痛评分
}, {
Date: "2019-10-05",
InhsopCount: "47",
Pulse: "80",
Breathing: "34",
Temperature: "38",
/*出量*/
OuputCls: {
UrineVolume: "10",
StoolTimes: "20",
InducedFlow: "30",
Other: "40"
},
/*入量*/
InputCls: {
Intake: "50",
Input: "60"
},
/*血压*/
BloodPressureDetail: {
SystolicPressure: "70",
DiastolicPressure: "80"
},
PainLevelList: [3]//疼痛评分
}, {
Date: "2019-10-06",
InhsopCount: "48",
Pulse: "70",
Breathing: "52",
Temperature: "35",
/*出量*/
OuputCls: {
UrineVolume: "10",
StoolTimes: "20",
InducedFlow: "30",
Other: "40"
},
/*入量*/
InputCls: {
Intake: "50",
Input: "60"
},
/*血压*/
BloodPressureDetail: {
SystolicPressure: "70",
DiastolicPressure: "80"
},
PainLevelList: [3]//疼痛评分
}, {
Date: "2019-10-07",
InhsopCount: "49",
Pulse: "110",
Breathing: "11",
Temperature: "37",
/*出量*/
OuputCls: {
UrineVolume: "10",
StoolTimes: "20",
InducedFlow: "30",
Other: "40"
},
/*入量*/
InputCls: {
Intake: "50",
Input: "60"
},
/*血压*/
BloodPressureDetail: {
SystolicPressure: "70",
DiastolicPressure: "80"
},
PainLevelList: [3]//疼痛评分
}, {
Date: "2019-10-08",
InhsopCount: "50",
Pulse: "90",
Breathing: "12",
Temperature: "36",
/*出量*/
OuputCls: {
UrineVolume: "10",
StoolTimes: "20",
InducedFlow: "30",
Other: "40"
},
/*入量*/
InputCls: {
Intake: "50",
Input: "60"
},
/*血压*/
BloodPressureDetail: {
SystolicPressure: "70",
DiastolicPressure: "80"
},
PainLevelList: [3]//疼痛评分
}, {
Date: "2019-10-09",
InhsopCount: "51",
Pulse: "70",
Breathing: "14",
Temperature: "38.8",
/*出量*/
OuputCls: {
UrineVolume: "10",
StoolTimes: "20",
InducedFlow: "30",
Other: "40"
},
/*入量*/
InputCls: {
Intake: "50",
Input: "60"
},
/*血压*/
BloodPressureDetail: {
SystolicPressure: "70",
DiastolicPressure: "80"
},
PainLevelList: [3]//疼痛评分
}, {
Date: "2019-10-10",
InhsopCount: "52",
Pulse: "70",
Breathing: "15",
Temperature: "36",
/*出量*/
OuputCls: {
UrineVolume: "10",
StoolTimes: "20",
InducedFlow: "30",
Other: "40"
},
/*入量*/
InputCls: {
Intake: "50",
Input: "60"
},
/*血压*/
BloodPressureDetail: {
SystolicPressure: "70",
DiastolicPressure: "80"
},
PainLevelList: [3]//疼痛评分
}, {
Date: "2019-10-11",
InhsopCount: "53",
Pulse: "90",
Breathing: "30",
Temperature: "36.5",
/*出量*/
OuputCls: {
UrineVolume: "10",
StoolTimes: "20",
InducedFlow: "30",
Other: "40"
},
/*入量*/
InputCls: {
Intake: "50",
Input: "60"
},
/*血压*/
BloodPressureDetail: {
SystolicPressure: "70",
DiastolicPressure: "80"
},
PainLevelList: [3]//疼痛评分
}, {
Date: "2019-10-12",
InhsopCount: "54",
Pulse: "80",
Breathing: "25",
Temperature: "36.5",
/*出量*/
OuputCls: {
UrineVolume: "10",
StoolTimes: "20",
InducedFlow: "30",
Other: "40"
},
/*入量*/
InputCls: {
Intake: "50",
Input: "60"
},
/*血压*/
BloodPressureDetail: {
SystolicPressure: "70",
DiastolicPressure: "80"
},
PainLevelList: [3]//疼痛评分
}],
/*手术*/
OperationInfoList: [],
/*病原学送检申请*/
PathogenicExaminationList: [],
/*自定义药品X轴药品使用数据情况循环，加hover标注了用药途径*/
UserDefineDrugList: [
{
Date: "2019-09-28",
UserDefineDrugList: [
{
DrugCode: "Y00000000668",
DrugInfo: "【长】08-29 11:07:59 10mg/QD/im 注射用胸腺五肽 （孔翔宇）",
IsTemp: 0,
IsUse: false//是否显示划线背景
}, {
DrugCode: "Y00000000532",
DrugInfo: "【长】10-07 16:07:59 2.5mg/ST/P.O 来曲唑片 （孔翔宇）",
IsTemp: 0,
IsUse: true
},
{
DrugCode: "Y00000000667",
DrugInfo: "【长】08-29 11:07:59 10mg/QD/im 注射用胸腺五肽 （孔翔宇）",
IsTemp: 0,
IsUse: false
}, {
DrugCode: "Y00000000537",
DrugInfo: "【长】10-07 16:07:59 2.5mg/ST/P.O 来曲唑片 （孔翔宇）",
IsTemp: 0,
IsUse: true
}
]
}, {
Date: "2019-09-29",
UserDefineDrugList: [{
DrugCode: "Y00000000668",
DrugInfo: "【长】08-29 11:07:59 10mg/QD/im 注射用胸腺五肽 （孔翔宇）",
IsTemp: 0,
IsUse: false
}, {
DrugCode: "Y00000000537",
DrugInfo: "【长】10-07 16:07:59 2.5mg/ST/P.O 来曲唑片 （孔翔宇）",
IsTemp: 0,
IsUse: true
},
{
DrugCode: "Y00000000667",
DrugInfo: "【长】08-29 11:07:59 10mg/QD/im 注射用胸腺五肽 （孔翔宇）",
IsTemp: 0,
IsUse: false
}, {
DrugCode: "Y00000000532",
DrugInfo: "【长】10-07 16:07:59 2.5mg/ST/P.O 来曲唑片 （孔翔宇）",
IsTemp: 0,
IsUse: true
}]
}, {
Date: "2019-09-30",
UserDefineDrugList: [{
DrugCode: "Y00000000668",
DrugInfo: "【长】08-29 11:07:59 10mg/QD/im 注射用胸腺五肽 （孔翔宇）",
IsTemp: 0,
IsUse: false
}, {
DrugCode: "Y00000000532",
DrugInfo: "【长】10-07 16:07:59 2.5mg/ST/P.O 来曲唑片 （孔翔宇）",
IsTemp: 0,
IsUse: true
},
{
DrugCode: "Y00000000667",
DrugInfo: "【长】08-29 11:07:59 10mg/QD/im 注射用胸腺五肽 （孔翔宇）",
IsTemp: 0,
IsUse: false
}, {
DrugCode: "Y00000000537",
DrugInfo: "【长】10-07 16:07:59 2.5mg/ST/P.O 来曲唑片 （孔翔宇）",
IsTemp: 0,
IsUse: true
}]
}, {
Date: "2019-10-01",
UserDefineDrugList: [{
DrugCode: "Y00000000668",
DrugInfo: "【长】08-29 11:07:59 10mg/QD/im 注射用胸腺五肽 （孔翔宇）",
IsTemp: 0,
IsUse: false
}, {
DrugCode: "Y00000000532",
DrugInfo: "【长】10-07 16:07:59 2.5mg/ST/P.O 来曲唑片 （孔翔宇）",
IsTemp: 0,
IsUse: false
},
{
DrugCode: "Y00000000667",
DrugInfo: "【长】08-29 11:07:59 10mg/QD/im 注射用胸腺五肽 （孔翔宇）",
IsTemp: 0,
IsUse: false
}, {
DrugCode: "Y00000000537",
DrugInfo: "【长】10-07 16:07:59 2.5mg/ST/P.O 来曲唑片 （孔翔宇）",
IsTemp: 0,
IsUse: false
}]
}, {
Date: "2019-10-02",
UserDefineDrugList: [{
DrugCode: "Y00000000668",
DrugInfo: "【长】08-29 11:07:59 10mg/QD/im 注射用胸腺五肽 （孔翔宇）",
IsTemp: 0,
IsUse: true
}, {
DrugCode: "Y00000000532",
DrugInfo: "【长】10-07 16:07:59 2.5mg/ST/P.O 来曲唑片 （孔翔宇）",
IsTemp: 0,
IsUse: false
},
{
DrugCode: "Y00000000667",
DrugInfo: "【长】08-29 11:07:59 10mg/QD/im 注射用胸腺五肽 （孔翔宇）",
IsTemp: 0,
IsUse: true
}, {
DrugCode: "Y00000000537",
DrugInfo: "【长】10-07 16:07:59 2.5mg/ST/P.O 来曲唑片 （孔翔宇）",
IsTemp: 0,
IsUse: false
}]
}, {
Date: "2019-10-03",
UserDefineDrugList: [{
DrugCode: "Y00000000668",
DrugInfo: "【长】08-29 11:07:59 10mg/QD/im 注射用胸腺五肽 （孔翔宇）",
IsTemp: 0,
IsUse: true
}, {
DrugCode: "Y00000000532",
DrugInfo: "【长】10-07 16:07:59 2.5mg/ST/P.O 来曲唑片 （孔翔宇）",
IsTemp: 0,
IsUse: false
},
{
DrugCode: "Y00000000667",
DrugInfo: "【长】08-29 11:07:59 10mg/QD/im 注射用胸腺五肽 （孔翔宇）",
IsTemp: 0,
IsUse: true
}, {
DrugCode: "Y00000000537",
DrugInfo: "【长】10-07 16:07:59 2.5mg/ST/P.O 来曲唑片 （孔翔宇）",
IsTemp: 0,
IsUse: false
}]
}, {
Date: "2019-10-04",
UserDefineDrugList: [{
DrugCode: "Y00000000668",
DrugInfo: "【长】08-29 11:07:59 10mg/QD/im 注射用胸腺五肽 （孔翔宇）",
IsTemp: 0,
IsUse: true
}, {
DrugCode: "Y00000000532",
DrugInfo: "【长】10-07 16:07:59 2.5mg/ST/P.O 来曲唑片 （孔翔宇）",
IsTemp: 0,
IsUse: false
},
{
DrugCode: "Y00000000667",
DrugInfo: "【长】08-29 11:07:59 10mg/QD/im 注射用胸腺五肽 （孔翔宇）",
IsTemp: 0,
IsUse: true
}, {
DrugCode: "Y00000000537",
DrugInfo: "【长】10-07 16:07:59 2.5mg/ST/P.O 来曲唑片 （孔翔宇）",
IsTemp: 0,
IsUse: false
}]
}, {
Date: "2019-10-05",
UserDefineDrugList: [{
DrugCode: "Y00000000668",
DrugInfo: "【长】08-29 11:07:59 10mg/QD/im 注射用胸腺五肽 （孔翔宇）",
IsTemp: 0,
IsUse: false
}, {
DrugCode: "Y00000000532",
DrugInfo: "【长】10-07 16:07:59 2.5mg/ST/P.O 来曲唑片 （孔翔宇）",
IsTemp: 0,
IsUse: false
},
{
DrugCode: "Y00000000667",
DrugInfo: "【长】08-29 11:07:59 10mg/QD/im 注射用胸腺五肽 （孔翔宇）",
IsTemp: 0,
IsUse: false
}, {
DrugCode: "Y00000000537",
DrugInfo: "【长】10-07 16:07:59 2.5mg/ST/P.O 来曲唑片 （孔翔宇）",
IsTemp: 0,
IsUse: false
}]
}, {
Date: "2019-10-06",
UserDefineDrugList: [{
DrugCode: "Y00000000668",
DrugInfo: "【长】08-29 11:07:59 10mg/QD/im 注射用胸腺五肽 （孔翔宇）",
IsTemp: 0,
IsUse: false
}, {
DrugCode: "Y00000000532",
DrugInfo: "【长】10-07 16:07:59 2.5mg/ST/P.O 来曲唑片 （孔翔宇）",
IsTemp: 0,
IsUse: true
},
{
DrugCode: "Y00000000667",
DrugInfo: "【长】08-29 11:07:59 10mg/QD/im 注射用胸腺五肽 （孔翔宇）",
IsTemp: 0,
IsUse: false
}, {
DrugCode: "Y00000000537",
DrugInfo: "【长】10-07 16:07:59 2.5mg/ST/P.O 来曲唑片 （孔翔宇）",
IsTemp: 0,
IsUse: true
}]
}, {
Date: "2019-10-07",
UserDefineDrugList: [{
DrugCode: "Y00000000668",
DrugInfo: "【长】08-29 11:07:59 10mg/QD/im 注射用胸腺五肽 （孔翔宇）",
IsTemp: 0,
IsUse: false
}, {
DrugCode: "Y00000000532",
DrugInfo: "【长】10-07 16:07:59 2.5mg/ST/P.O 来曲唑片 （孔翔宇）",
IsTemp: 0,
IsUse: true
},
{
DrugCode: "Y00000000667",
DrugInfo: "【长】08-29 11:07:59 10mg/QD/im 注射用胸腺五肽 （孔翔宇）",
IsTemp: 0,
IsUse: false
}, {
DrugCode: "Y00000000537",
DrugInfo: "【长】10-07 16:07:59 2.5mg/ST/P.O 来曲唑片 （孔翔宇）",
IsTemp: 0,
IsUse: true
}]
}, {
Date: "2019-10-08",
UserDefineDrugList: [{
DrugCode: "Y00000000668",
DrugInfo: "【长】08-29 11:07:59 10mg/QD/im 注射用胸腺五肽 （孔翔宇）",
IsTemp: 0,
IsUse: false
}, {
DrugCode: "Y00000000532",
DrugInfo: "【长】10-07 16:07:59 2.5mg/ST/P.O 来曲唑片 （孔翔宇）",
IsTemp: 0,
IsUse: true
},
{
DrugCode: "Y00000000667",
DrugInfo: "【长】08-29 11:07:59 10mg/QD/im 注射用胸腺五肽 （孔翔宇）",
IsTemp: 0,
IsUse: false
}, {
DrugCode: "Y00000000537",
DrugInfo: "【长】10-07 16:07:59 2.5mg/ST/P.O 来曲唑片 （孔翔宇）",
IsTemp: 0,
IsUse: true
}]
}, {
Date: "2019-10-09",
UserDefineDrugList: [{
DrugCode: "Y00000000668",
DrugInfo: "【长】08-29 11:07:59 10mg/QD/im 注射用胸腺五肽 （孔翔宇）",
IsTemp: 0,
IsUse: false
}, {
DrugCode: "Y00000000532",
DrugInfo: "【长】10-07 16:07:59 2.5mg/ST/P.O 来曲唑片 （孔翔宇）",
IsTemp: 0,
IsUse: false
},
{
DrugCode: "Y00000000667",
DrugInfo: "【长】08-29 11:07:59 10mg/QD/im 注射用胸腺五肽 （孔翔宇）",
IsTemp: 0,
IsUse: false
}, {
DrugCode: "Y00000000537",
DrugInfo: "【长】10-07 16:07:59 2.5mg/ST/P.O 来曲唑片 （孔翔宇）",
IsTemp: 0,
IsUse: false
}]
}, {
Date: "2019-10-10",
UserDefineDrugList: [{
DrugCode: "Y00000000668",
DrugInfo: "【长】08-29 11:07:59 10mg/QD/im 注射用胸腺五肽 （孔翔宇）",
IsTemp: 0,
IsUse: true
}, {
DrugCode: "Y00000000532",
DrugInfo: "【长】10-07 16:07:59 2.5mg/ST/P.O 来曲唑片 （孔翔宇）",
IsTemp: 0,
IsUse: true
},
{
DrugCode: "Y00000000667",
DrugInfo: "【长】08-29 11:07:59 10mg/QD/im 注射用胸腺五肽 （孔翔宇）",
IsTemp: 0,
IsUse: true
}, {
DrugCode: "Y00000000537",
DrugInfo: "【长】10-07 16:07:59 2.5mg/ST/P.O 来曲唑片 （孔翔宇）",
IsTemp: 0,
IsUse: true
}]
}, {
Date: "2019-10-11",
UserDefineDrugList: [{
DrugCode: "Y00000000668",
DrugInfo: "【长】08-29 11:07:59 10mg/QD/im 注射用胸腺五肽 （孔翔宇）",
IsTemp: 0,
IsUse: true
}, {
DrugCode: "Y00000000532",
DrugInfo: "【长】10-07 16:07:59 2.5mg/ST/P.O 来曲唑片 （孔翔宇）",
IsTemp: 0,
IsUse: true
},
{
DrugCode: "Y00000000667",
DrugInfo: "【长】08-29 11:07:59 10mg/QD/im 注射用胸腺五肽 （孔翔宇）",
IsTemp: 0,
IsUse: true
}, {
DrugCode: "Y00000000537",
DrugInfo: "【长】10-07 16:07:59 2.5mg/ST/P.O 来曲唑片 （孔翔宇）",
IsTemp: 0,
IsUse: true
}]
}, {
Date: "2019-10-12",
UserDefineDrugList: [{
DrugCode: "Y00000000668",
DrugInfo: "【长】08-29 11:07:59 10mg/QD/im 注射用胸腺五肽 （孔翔宇）",
IsTemp: 0,
IsUse: true
}, {
DrugCode: "Y00000000532",
DrugInfo: "【长】10-07 16:07:59 2.5mg/ST/P.O 来曲唑片 （孔翔宇）",
IsTemp: 0,
IsUse: true
},
{
DrugCode: "Y00000000667",
DrugInfo: "【长】08-29 11:07:59 10mg/QD/im 注射用胸腺五肽 （孔翔宇）",
IsTemp: 0,
IsUse: true
}, {
DrugCode: "Y00000000537",
DrugInfo: "【长】10-07 16:07:59 2.5mg/ST/P.O 来曲唑片 （孔翔宇）",
IsTemp: 0,
IsUse: true
}]
}],
/*自定义药品y轴数据循环*/
YUserDefineDrugList: [
{
DrugName: "青霉素",
DrugCode: "Y00000000668"
}, {
DrugName: "来曲唑片",
DrugCode: "Y00000000532"
},{
DrugName: "葡萄糖",
DrugCode: "Y00000000667"
}, {
DrugName: "阿莫西林",
DrugCode: "Y00000000537"
}],
/*自定义项目检验结果项目*/
UserDefineLabList: [],
/*自定义项目检验结果项目Y轴*/
YUserDefineLabList: [],
//图表体温脉搏静态数据
// newdaydates:'',
// ISBTN:'',
// //体温，脉搏，呼吸，出量，入量，血压数据
// FixedGuardianshipChartInfoList:[],
// //手术名称数组
// YOprList:[],
// //手术数据
// OperationInfoList:[],
// //药品名称数组
// YAntibacterialDrugList:[],
// //药品数据
// AntibacterialDrugList: [],
// //自定义项目检验结果名称数组
// YUserDefineLabList:[],
// //自定义项目检验结果数据
// UserDefineLabList:[],
//自定义项目药品名称数组
// YUserDefineDrugList:[],
// //自定义项目药品数据
// UserDefineDrugList:[],
// //病原学送检
// PathogenicExaminationList:[],
//住院天数Array
// dayS:[1,2,3,4,5,6,7,8,9,10],
//异常检验结果每行内容弹出框静态
// ShowTestresult:false,
// LabDetailList:[],//详情表格数据
//
// CaseId:'',
// isInHospital:'',
// IEndDate:'',
}
},
methods: {
drawLine(){
// 基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById('myChart'));
//处理数据赋值到echarts
var dateArray=[];
var twArray=[];
var mbArray=[];
for(var i=0;i<this.FixedGuardianshipChartInfoList.length;i++){
dateArray.push(this.FixedGuardianshipChartInfoList[i].Date);
twArray.push(this.FixedGuardianshipChartInfoList[i].Temperature);
mbArray.push(this.FixedGuardianshipChartInfoList[i].Pulse);
}
// 绘制图表
myChart.setOption({
title: {
text: '',
x: 'center',
align: 'right',
textStyle:{
color:'#000',
fontSize:14,
fontWeight:'bold',
},
},
tooltip: {
trigger: 'axis'
},
yAxis : [
{
name:'脉搏(次/分)',
type: 'value',
position:'left',
offset:80,//y轴偏移
min: 30,
max: 150,
interval: 10,
axisLabel: {
textStyle: {
color: '#1369a6'
}
},
axisLine: {
lineStyle: {
type: 'solid',
color:'#1369a6',
width:'1'
}
},
},
{
name:'体温（℃）',
type: 'value',
min: 35.0,
max: 41.0,
interval:0.5 ,
position:'left',//y轴位置
axisLabel: {
formatter: ' {value}',
textStyle: {
color: 'red'
}
},
axisLine: {
lineStyle: {
type: 'solid',
color:'red',
width:'1'
}
},
},
],
legend: {
show:true,
data:['脉搏','体温'],
left:"center"
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
show: true, //是否显示
orient: 'horizontal', //水平显示(vertical为垂直显示)
x: '1533px', //距离X轴多远
feature: {
saveAsImage: {
name:'体温脉搏图'
}
}
},
xAxis: {
type: 'category',
data: dateArray,
axisLabel:{//间隔
interval:0,
}
},
series: [{
name:"体温",
data: twArray,
type: 'line',
yAxisIndex:1,//数据对应y轴
lineStyle: {
type: 'solid',
color:'red',
width:'1'
}
},
{
name:"脉搏",
data: mbArray,
type: 'line',
yAxisIndex:0,//数据对应y轴
lineStyle: {
type: 'solid',
color:'#1369a6',
width:'1'
}
}
]
})
},
//第一次进入页面表格传递时间数据获取十天//获取图表数据函数
// echartsCreated(){
//
// const loading= this.$loading({//加载中loading
// lock: true,
// text: '努力加载中',
// spinner: 'el-icon-loading',
// background: 'rgba(250,250,250,1)',
// target: document.querySelector('#lodingIdTable')
// });//loading.close();//关闭加载中loading
// // 获取入院时间时间格式的时间戳
// var stringTime = this.$route.params.StartDate;
//
// var now = new Date(stringTime);
// //时间戳转为字符串格式
// var year = now.getFullYear();
// var month = now.getMonth() + 1;
// var date = now.getDate();
// if (month >= 0 && month <= 9) {
// month = "0" + month;
// }
// if (date >= 0 && date <= 9) {
// date = "0" + date;
// }
// var oneDay = year + "-" + month + "-" + date;//当前开头第一天日期传回后台
// var IsInhospIS=this.isInHospital;//判断一下布尔
// this.$axios({
// method:'get',
// url:window.apiUrl+'/pc/patguardianshipchart/GetContinueFixedGuardianshipChart',
// params: {
// CaseId:this.CaseId,
// PatType:IsInhospIS,
// IEndDate:this.IEndDate,
// StartDate:oneDay,
// TotalDays:10
// },
// }).then(res => {
// if(res.data.Errs.length==0){
// let echartsdata=res.data.Result.FixedGuardianshipChartInfoList;//拿到数据处理渲染图表echarts
// this.FixedGuardianshipChartInfoList=res.data.Result.FixedGuardianshipChartInfoList;
// this.YOprList=res.data.Result.YOprList;//放出手术信息即可
// this.OperationInfoList=res.data.Result.OperationInfoList;//放出手术信息即可
// this.YAntibacterialDrugList=res.data.Result.YAntibacterialDrugList;//放出药品信息即可
// this.AntibacterialDrugList=res.data.Result.AntibacterialDrugList;//放出药品信息即可
// this.PathogenicExaminationList=res.data.Result.PathogenicExaminationList;//病原学送检数据
// var ISBTN='';
// for(var i=0;i<echartsdata.length;i++){
// ISBTN=echartsdata[0].Date
// };
// this.drawLine();//调用echarts函数
// this.ISBTN=ISBTN;
// }else{
// var Errs=res.data.Errs;
// var errs2=Errs[0];
// this.$message({
// type: "error",
// message: errs2
// });
// }
// }).catch(err => { //请求失败就会捕获报错信息
// //err.response可拿到服务器返回的报错数据
// //console.log(res.data.errs)
// });
//
// //调用自定义项目接口并赋值
// this.$axios({
// method:'get',
// url:window.apiUrl+'/pc/patguardianshipchart/GetContinueUserDefineGuardianshipChart',
// params: {
// CaseId:this.CaseId,
// PatType:IsInhospIS,
// IEndDate:this.IEndDate,
// StartDate:oneDay,
// TotalDays:10
// },
// }).then(res => {
// //console.log(res)//拿到数据处理渲染图表echarts
// this.YUserDefineLabList=res.data.Result.YUserDefineLabList;//放出检验结果信息即可
// this.UserDefineLabList=res.data.Result.UserDefineLabList;//放出检验结果信息即可
// this.YUserDefineDrugList=res.data.Result.YUserDefineDrugList;//自定义药品
// this.UserDefineDrugList=res.data.Result.UserDefineDrugList;//自定义药品
// loading.close();//关闭加载中loading
// }).catch(err => { //请求失败就会捕获报错信息
// //err.response可拿到服务器返回的报错数据
// //console.log(res.data.errs)
// });
// },
},
mounted(){
this.drawLine();//调用echarts函数
/*调用*/
// this.echartsCreated()
},
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.borderLeft{
border-left: 5px solid #1369a6;
padding-left: 20px;
}
.btnfive{
border: solid 1px #dcdfe6;
border-radius: 4px;
height: 22px;
line-height: 22px;
display: inline-block;
width: 50px;
text-align: center;
font-weight: initial!important;
cursor: pointer;
color: #666666;
}
/*手术*/
.iconcolor{
display: inline-block;
width: 20px;
height: 20px;
margin-top: 4px;
position:relative;
z-index:2;
/*background-color: pink;*/
}
.iconcolor:hover{
z-index:3;
/*background:none;*/
}
.iconcolor .tdtip {
display: none;
}
.iconcolor:hover .tdtip {
display: block;
width: 400px;
max-height: 80px;
overflow-y: auto;
position: absolute;
top: 8px;
border-radius: 20px;
/*hover背景色*/
background-color: #1369a6;
opacity:0.8;
color: #ffffff;
/*word-break: break-all;*/
}
/*病原学送检*/
.PEiconcolor{
display: inline-block;
width: 20px;
height: 20px;
margin-top: 4px;
position:relative;
z-index:2;
/*background-color: pink;*/
}
.PEiconcolor:hover{
z-index:3;
/*background:none;*/
}
.PEiconcolor .PEtdtip {
display: none;
}
.PEiconcolor:hover .PEtdtip {
display: block;
width: 400px;
max-height: 80px;
overflow-y: auto;
position: absolute;
top: 8px;
border-radius: 20px;
/*hover背景色*/
background-color: #1369a6;
opacity:0.8;
color: #ffffff;
/*word-break: break-all;*/
}
.ADDbackground{
background-color: #1369a6;
color: #ffffff;
border: solid 1px #1369a6!important;
}
/*药品*/
.Drugiconcolor{
display: inline-block;
width: 100%;
height: 10px;
margin-top: 4px;
position:relative;
z-index:2;
background-color: #1369a6;
}
.Drugiconcolor:hover{
z-index:3;
/*background:none;*/
}
.Drugiconcolor .Drugtdtip {
display: none;
}
.Drugiconcolor:hover .Drugtdtip {
display: block;
width: 400px;
max-height: 80px;
overflow-y: auto;
border-radius: 20px;
position: absolute;
top: 8px;
/*hover背景色*/
background-color: #1369a6;
opacity:0.8;
color: #ffffff;
word-break: break-all;
}
.specialheader{
/*border-left: 5px solid #136aa7;*/
height: 28px;
line-height: 28px;
}
.specialheader>span{
font-size: 14px;
font-weight: bold;
margin-left: 20px;
}
#infotableid,#infotableid tr th, #infotableid tr td {
border:1px solid #e5e5e5;
}
#infotableid {
width: 1568px;
min-height: 25px;
line-height: 25px;
text-align: center;
border-collapse: collapse;
/*padding:2px;*/
margin-left: -1px;
}
/*特殊提示*/
#thereinfo{
display: flex;
margin-top: 10px;
}
.ADRinfo{
/*border: 1px solid red;*/
min-width: 300px;
height: 200px;
background-color: #ffffff;
box-shadow: 2px 4px 30px 6px
rgba(219, 225, 231, 0.8);
border-radius: 6px;
margin-right: 8px;
margin-bottom: 8px;
/*float: left;*/
cursor: pointer;
padding: 10px;
padding-left: 15px;
padding-right: 15px;
padding-top: 15px;
/*flex: 1;*/
}
.ADRinfo>p{
margin-bottom: 15px;
}
.LabPromptListBox{
padding: 10px;
width: 300px;
height: 200px;
background-color: #ffffff;
box-shadow: 2px 4px 30px 6px
rgba(219, 225, 231, 0.8);
border-radius: 6px;
margin-right: 8px;
margin-bottom: 8px;
/*float: left;*/
cursor: pointer;
}
.PASSBox{
width: 300px;
height: 200px;
background-color: #ffffff;
box-shadow: 2px 4px 30px 6px
rgba(219, 225, 231, 0.8);
border-radius: 6px;
margin-right: 8px;
margin-bottom: 8px;
/* float: left; */
cursor: pointer;
padding: 10px;
}
/*弹出框*/
.modalshow{
width: 100%;
height: 100%;
z-index: 30;
background-color: rgba(0,0,0,0.8);
position: fixed;
top:0;
left: 0;
right: 0;
bottom: 0;
}
.modalsize{
padding: 50px;
width: 1100px;
height: 300px;
background-color: #ffffff;
overflow-y: auto;
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.modalsizexz{
padding: 50px;
width: 580px;
height: 400px;
background-color: #ffffff;
overflow-y: auto;
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.btnbox{
text-align: right;
margin-top: 25px;
}
.btnboxxz{
text-align: center;
margin-top: 50px;
}
.outdel{
display: inline-block;
}
.adddel{
display: inline-block;
margin-left: 20px;
}
/*#modalshow{*/
/*z-index: 1000!important;*/
/*}*/
/*监护图表*/
.jhtable{
width: 100%;
/*height: 500px;*/
/*border: 1px solid #ebeef5;*/
}
.jhtbsx{
/*padding-left: 20px;*/
}
.jhtbsx>p{
margin-top: 10px;
}
.titlecustom{
background-color: #ecf5ff;
width: 100%;
height: 40px;
line-height: 40px;
color: #000000;
font-weight: bold;
font-size: 16px;
position: relative;
/*margin-bottom: 5px;*/
}
.titlecustom span{
display: inline-block;
/*margin-left: 20px;*/
}
/*s手术背景图片*/
.OperationBacImg{
/*background-image: url('../../../../static/PC/img/lampIcon/OperationIcon.png');*/
/*background-color: none;*/
}
#TestresultChart{
width: 900px;
height: 300px;
}
.Testresultoutdelbtnclass{
text-align: center;
margin-top: 30px;
/*position: absolute;*/
/*bottom: 0px;*/
}
</style>
//欢迎大家评论提出意见
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献7条内容
所有评论(0)