hospital-inspect/pages/ECG/index/index.vue

<template>	
	<view class="ecg-wrap">	
		<view class="static-indicators form">
			<view class="form-item head">
				<text>人工SBIF累计评分</text>
			</view>
			<view class="form-item">112</view>
			<view class="form-item head">
				<text>SBIF即时评分</text>
			</view>
			<view class="form-item">100</view>	
			<view class="form-item head">
				<text>自动SBIF累计评分</text>
			</view>
			<view class="form-item">210</view>		
			<view class="form-item head">
				<text>静态指标</text>
				<button class="submit-BT" size="mini" @click="formSubmit('staticIndicatorsForm')">保存数据</button>
			</view>						
			<view class="form-item">
				<view class="item-left">运动</view>
				<picker class="item-right" @change="movementChange"
					:value="movementIndex" :range="movementList">
					<view class="uni-input">{{movementList[movementIndex]}}</view>
				</picker>
			</view>
			<view class="form-item">
				<view class="item-left">瞳孔对光反射</view>
				<picker class="item-right" @change="tongReflectChange" :value="tongReflectIndex" :range="tongReflectList">
					<view class="uni-input">{{tongReflectList[tongReflectIndex]}}</view>
				</picker>
			</view>	
			<view class="form-item">				
				<view class="item-left">瞳孔变化</view>
				<picker class="item-right" 
					@change="tongChange" 
					:value="tongIndex" :range="tongList">
					<view class="uni-input">{{tongList[tongIndex]}}</view>
				</picker>
			</view>
			<view class="form-item">
				<view class="item-left">血肿体积（ml）</view>
				<input class="item-right inp" type="text" v-model="staticIndicatorsForm.indexXz" />
			</view>	
			<view class="form-item">
				<view class="item-left">蛛网膜下腔出血</view>
				<picker class="item-right" @change="zwmChange" :value="zwmIndex" :range="zwmList">
					<view class="uni-input">{{zwmList[zwmIndex]}}</view>
				</picker>
			</view>
			<view class="form-item">
				<view class="item-left">脑中线偏移距离（cm）</view>
				<input class="item-right inp" type="text" v-model="staticIndicatorsForm.indexNzx" />
			</view>	
			<view class="form-item">
				<view class="item-left">环池平均宽度（mm）</view>
				<input class="item-right inp" type="text" v-model="staticIndicatorsForm.indexHckd" />
			</view>
			<view class="form-item">
				<view class="item-left">年龄</view>
				<input class="item-right inp" type="text" v-model="staticIndicatorsForm.age" />
			</view>	
			<view class="form-item">
				<view class="item-left">是否手术：</view>
				<view class="item-right">
					<radio-group @change="operationStatusChange">
						<label  class="radio">
							<radio style="transform: scale(0.7);"  value="1"  />
							<text>否</text>
						</label					
						<label  class="radio">
							<radio style="transform: scale(0.7);"  value="2"  />
							<text>是</text>
						</label>
					</radio-group>								
				</view>
			</view>
			<view class="form-item">
				<view class="item-left">既往慢性病史</view>
				<picker class="item-right" @change="medicalHistoryChange" :value="medicalHistoryIndex" :range="medicalHistoryList">
					<view class="uni-input">{{medicalHistoryList[medicalHistoryIndex]}}</view>
				</picker>
			</view>											
		</view>		
		<view class="chart-wrap">
			<view class="chart-item">
				<view class="head">
					<text>心电图：{{form.ecg}}</text>
				</view>
				<view class="chart-box">
					<qiun-data-charts type="line" :animation="false"
					:chartData="chartEcgData" 
					:opts="ecgOpts"
					/>
				</view>			
			</view>	
			<view class="chart-item">
				<view class="head">
					<text>收缩压：{{form.sbp}}</text>
				</view>
				<view class="chart-box">
					<qiun-data-charts type="line" :animation="false"
					:chartData="chartSbpData" 
					:opts="decimalsOpts"
					/>
				</view>			
			</view>		
			<view class="chart-item">
				<view class="head">
					<text>舒张压：{{form.dbp}}</text>
				</view>
				<view class="chart-box">
					<qiun-data-charts type="line" :animation="false":chartData="chartDbpData" :opts="decimalsOpts"/>
				</view>			
			</view>	
			<view class="chart-item">
				<view class="head">
					<text>平均动脉压：{{form.abp}}</text>
				</view>
				<view class="chart-box">
					<qiun-data-charts type="line" :animation="false":chartData="chartAbpData" :opts="opts"/>
				</view>			
			</view>	
			<view class="chart-item">
				<view class="head">
					<text>颅内压(mmHg)：{{form.icp}}</text>
				</view>
				<view class="chart-box">
					<qiun-data-charts type="line" :animation="false":chartData="chartAbpData" :opts="opts"/>
				</view>			
			</view>		
			<view class="chart-item">
				<view class="head">
					<text>脑灌注压(mmHg)：{{form.cpp}}</text>
				</view>
				<view class="chart-box">
					<qiun-data-charts type="line" :animation="false":chartData="chartCppData" :opts="opts"/>
				</view>			
			</view>	
			<view class="chart-item">
				<view class="head">
					<text>血氧饱和度：{{form.oxygenSaturation}}%</text>
				</view>
				<view class="chart-box">
					<qiun-data-charts type="line" :animation="false":chartData="chartOxygenSaturationData" :opts="opts"/>
				</view>			
			</view>	
			<view class="chart-item">
				<view class="head">
					<text>血流灌注指数：{{form.pi}}</text>
				</view>
				<view class="chart-box">
					<qiun-data-charts type="line" :animation="false":chartData="chartPiData" :opts="piOpts"/>
				</view>			
			</view>	
			<view class="chart-item">
				<view class="head">
					<text>心跳：{{form.heartbeat}}</text>
				</view>
				<view class="chart-box">
					<qiun-data-charts type="line" :animation="false":chartData="chartHeartbeatData" :opts="opts"/>
				</view>			
			</view>		
			<view class="chart-item">
				<view class="head">
					<text>呼吸率：{{form.awrr}} ( 次/分钟 )</text>
				</view>
				<view class="chart-box">
					<qiun-data-charts type="line" :animation="false":chartData="chartAwRRData" :opts="opts"/>
				</view>			
			</view>	
			<view class="chart-item">
				<view class="head">
					<text>体温：{{form.temperature}}℃</text>
				</view>
				<view class="chart-box">
					<qiun-data-charts type="line" :animation="false":chartData="chartTemperatureData" :opts="temperatureOpts"/>
				</view>			
			</view>				
		</view>
		<view class="form">
			<view class="form-item head">
				<text>血气数据</text>
				<button class="submit-BT" size="mini" @click="formSubmit('nA')">保存数据</button>
			</view>	
			<view class="form-item">
				<view class="item-left">钾离子(K)</view>
				<input class="item-right inp" type="text" v-model="nA.K" />
			</view>		
			<view class="form-item">
				<view class="item-left">钠离子(K)</view>
				<input class="item-right inp" type="text" v-model="nA.NA" />
			</view>	
			<view class="form-item">
				<view class="item-left">钙离子（ICA）</view>
				<input class="item-right inp" type="text" v-model="nA.ICA" />
			</view>		
			<view class="form-item">
				<view class="item-left">氯离子(CL)</view>
				<input class="item-right inp" type="text" v-model="nA.CL" />
			</view>		
			<view class="form-item">
				<view class="item-left">酸碱度(PH)</view>
				<input class="item-right inp" type="text" v-model="nA.PH" />
			</view>		
			<view class="form-item">
				<view class="item-left">血糖(GLU)</view>
				<input class="item-right inp" type="text" v-model="nA.GLU" />
			</view>	
			<view class="form-item">
				<view class="item-left">血乳酸(LAC)</view>
				<input class="item-right inp" type="text" v-model="nA.LAC" />
			</view>		
			<view class="form-item">
				<view class="item-left">血红蛋白(HB)</view>
				<input class="item-right inp" type="text" v-model="nA.HB" />
			</view>		
			<view class="form-item">
				<view class="item-left">碳酸氢根(HCO3)</view>
				<input class="item-right inp" type="text" v-model="nA.HCO3" />
			</view>		
			<view class="form-item">
				<view class="item-left">碱剩余(BE)</view>
				<input class="item-right inp" type="text" v-model="nA.BE" />
			</view>	
			<view class="form-item">
				<view class="item-left">总二氧化碳(TCO2)</view>
				<input class="item-right inp" type="text" v-model="nA.TCO2" />
			</view>		
			<view class="form-item">
				<view class="item-left">氧分压(PO2)</view>
				<input class="item-right inp" type="text" v-model="nA.PO2" />
			</view>		
			<view class="form-item">
				<view class="item-left">二氧化碳分压(PCO2)</view>
				<input class="item-right inp" type="text" v-model="nA.PCO2" />
			</view>		
			<view class="form-item">
				<view class="item-left">尿素氮(BUN)</view>
				<input class="item-right inp" type="text" v-model="nA.BUN" />
			</view>	
			<view class="form-item">
				<view class="item-left">尿素氮(BUN)</view>
				<input class="item-right inp" type="text" v-model="nA.BUN" />
			</view>													
		</view>
	</view>
</template>

<script>	
	import {parseTime,isEmpty} from'@/libs';
	import {setChartDefData,setOpts,setChartData} from'./tool';
	import {getGraphDataApi,getStaticDataApi,getRatioApi,getPhysiologyDataApi} from '@/api/ecg';
	export default {
		data() {
			return {
				timer:null,
				decimalsOpts:setOpts(),
				opts:setOpts(),
				ecgOpts:setOpts(),
				piOpts:setOpts([{tofix:1}]),
				temperatureOpts:setOpts([{tofix:1}]),
				chartEcgData:setChartDefData(),
				chartSbpData:setChartDefData(),
				chartDbpData:setChartDefData(),		
				chartAbpData:setChartDefData(),
				chartIcpData:setChartDefData(),
				chartCppData:setChartDefData(),
				chartOxygenSaturationData:setChartDefData(),				
				chartPiData:setChartDefData(),
				chartHeartbeatData:setChartDefData(),	
				chartAwRRData:setChartDefData(),								
				chartTemperatureData:setChartDefData(),					
				form:{
					ecg:"",
					sbp:"",
					dbp:"",
					abp:"",
					icp:"",
					cpp:"",
					oxygenSaturation:"",//SaO2
					pi:"",
					heartbeat:"",
					awrr:"",					
					temperature:""
				},
				//静态指标
				staticIndicatorsForm:{
                    indexMovement: null,
                    tongReflect: null,
                    tongChange: null,
                    indexXz: null,
                    indexZwm: null,
                    indexXt: null,
                    indexNzx: null,
                    indexHckd: null,
                    age: null,
                    surgery: null,
                    medicalHistory: null,
				},
				//血气
                nA: {
                    K: null,
                    NA: null,
                    LAC: null,
                    CL: null,
                    PH: null,
                    GLU: null,
                    ICA: null,
                    HB: null,
                    HCO3: null,
                    BE: null,
                    TCO2: null,
                    PO2: null,
                    PCO2: null,
                    BUN: null,
                    CREA: null,
                },				
				movementIndex:0,
				tongIndex:0,
				zwmIndex:0,
				tongReflectIndex:0,
				medicalHistoryIndex:0,
				movementList:["遵嘱活动",'刺痛定位',"刺痛定位","刺痛屈曲","无反应"],
				zwmList:["无","有"],
				tongList:["等大等圆","单瞳增大","单瞳增大"],
				tongReflectList:["双瞳反应",'单瞳反应',"双瞳无反应"],
				medicalHistoryList:["无",'有一个',"有两个","有三个"]
			}
		},
		onReady() {
			this.init();
		},
		destroyed() {
			if(this.timer) clearInterval(this.timer);
		},
		methods: {
			init(){
				this.restData();
			},
			restData(){
				if(this.timer) clearInterval(this.timer);
				this.timer=setInterval(()=>{
					this.createData(setChartData('ecg'));////心电图
					this.createData(setChartData('sbp'));//收缩压
					this.createData(setChartData('dbp'));//舒张压	
					this.createData(setChartData('abp'));//动脉压
					this.createData(setChartData('icp'));//颅内压
					this.createData(setChartData('cpp'));//脑灌注压
					this.createData(setChartData('SaO2'));//血氧饱和度
					this.createData(setChartData('pi'));//血流灌注指数
					this.createData(setChartData('heartbeat'));//心跳
					this.createData(setChartData('awrr'));//呼吸率
					this.createData(setChartData('temperature'));//体温
				},600)
			},
			createData({max,data,name,degree,min}){
				degree=degree?degree:0;
				let piont=max*Math.random();
					if(!isEmpty(min)){
						if(piont<min){
							this.createData({max,data,name,degree,min});
							return;
						}
					}
					piont=piont.toFixed(degree);
					if(this[data].categories.length>40){	
						this[data].categories.shift();
						this[data].series[0].data.shift()											
					}
					this[data].categories.push(parseTime(new Date(),'{s}'));
					this[data].series[0].data.push(piont);
					this.form[name]=piont;				
			},			
			//查询心电图的数据
			getGraphDataApi(){
				getStaticDataApi().then((res)=>{
					console.log('----查询心电图的数据------')
					console.log(res)
				})				
			},
			//查询生理参数的数据
			getPhysiologyDataApi(){
				getStaticDataApi().then((res)=>{
					console.log('----查询生理参数的数据------')
					console.log(res)
				})				
			},
			//查询静态参数的数据
			getStaticDataApi(){
				getStaticDataApi().then((res)=>{
					console.log('----查询静态参数的数据------')
					console.log(res)
				})
			},
			//计算占比
			getRatioApi(){
				getStaticDataApi().then((res)=>{
					console.log('-----计算占比-----')
					console.log(res)
				})				
			},
			movementChange({detail}){
				let index=detail.value;
				let indexMovement=this.movementList[index];
				this.movementIndex=this.index;
				this.staticIndicatorsForm.indexMovement=indexMovement;
			},
			tongReflectChange({detail}){
				let index=detail.value;
				let tongReflect=this.tongReflectList[index];
				this.tongReflectIndex=index;
				this.staticIndicatorsForm.tongReflect=tongReflect;
			},
			tongChange({detail}){
				let index=detail.value;
				let tongChange=this.tongList[index];
				this.tongIndex=index;
				this.staticIndicatorsForm.tongChange=tongChange;
			},
			zwmChange({detail}){
				let index=detail.value;
				let indexZwm=this.zwmList[index];
				this.zwmIndex=index;
				this.staticIndicatorsForm.indexZwm=indexZwm;
			},
			medicalHistoryChage({detail}){
				let index=detail.value;
				let medicalHistory=this.medicalHistoryist[index];
				this.medicalHistoryIndex=index;
				this.staticIndicatorsForm.medicalHistory=medicalHistory;
			},
			operationStatusChange({detail}) {
				let index=detail.value;
				this.staticIndicatorsForm.surgery=detail.value;
			},
			formSubmit(name){
				let formData=JSON.stringify(this[name]);
				console.log(formData)
			}
		}
	}
</script>

<style lang="scss">
	.ecg-wrap{
		.form{
			background-color: #fff;
			// padding: 20upx 40upx;
			.form-item{
				height: 80rpx;
				border-bottom: 1px solid #eaeaea;
				display: flex;
				justify-content: space-between;
				align-items: center;
				overflow: hidden;
				padding: 0 30upx;
				font-size: 28rpx;
				background-color: #fff;
				.submit-BT{
					margin: 0;
					background-color: #0081FF;
					color: #fff;
				}
				&.head{
					// background-color: #007AFF;
					// color: #fff;
					background-color: #f5f5f5;
				}
				.radio:nth-child(2){
					// transform: scale(0.7) !important;
					margin-left: 10px;
				}
				.inp{
					text-align: right;
					height:80rpx;
					line-height:80rpx;
					font-size: 28rpx;
					max-width: 50%;
				}
			}
		}
		.chart-wrap{
			// margin-top: 40upx;
			.chart-item{
				background-color: #fff;
				.head{
					height: 70upx;
					line-height: 70upx;
					padding-left: 36upx;
					box-shadow: 0 0 1upx rgba(0,0,0,0.3);
				}
				.chart-box{
					width:100%;
					height: 380upx;
					margin: 0 auto;		
				}
			}			
		}	
	}

</style>