趋势图

src/components/Amap.vue

@@ -0,0 +1,117 @@
+<template>
+	<div class="box">
+		<div id="container" style="width:100%; height:100%"></div>
+
+		<loading :visible="isLoading"></loading>
+	</div>
+</template>
+
+<script>
+	import MapLoader from '$project/utils/AMap'
+	import Loading from '$project/components/Loading.vue'
+	export default {
+		components: {
+			Loading
+		},
+		data() {
+			return {
+				isLoading: false,
+			}
+		},
+		mounted() {},
+		props: {
+			converStatus: {
+				require: false,
+				default: 0,
+			}
+		},
+		created() {
+			/* var script = document.createElement('script')
+			script.type = 'text/javascript'
+			script.src = 'https://webapi.amap.com/maps?v=1.4.15&key=09abadb2e35fc61fd84042c518e9aebf' // 高德地图
+			document.body.appendChild(script) */
+		},
+		methods: {
+			init(pointArr) {
+				this.isLoading = true;
+				MapLoader().then(AMap => {
+					/* let map = new AMap.Map('container', {
+						center: [116.397428, 39.90923],
+						resizeEnable: true,
+						zoom: 10
+					}) */
+					var amapPointArr = pointArr;
+					//console.log(pointArr)
+
+
+					var marker, lineArr = amapPointArr;
+					console.log(amapPointArr)
+
+					map && map.destroy();
+
+					//默认荆鹏软件园中心坐标
+					var map = new AMap.Map("container", {
+						resizeEnable: true,
+						center: [112.276527, 30.306427],
+						zoom: 17
+					});
+
+					var markArr = [];
+					var _this = this;
+					amapPointArr.forEach(function(item, index) {
+						if (index == 0 || amapPointArr.length == 1) {
+							var icon = require("$project/assets/img/map_0.png");
+						} else if (index == amapPointArr.length - 1) {
+							var icon = require("$project/assets/img/map_2.png");
+						} else {
+							var icon = require("$project/assets/img/map_1.png");
+						}
+						markArr.push(new AMap.Marker({
+							map: map,
+							position: lineArr[index],
+							icon: icon,
+							offset: new AMap.Pixel(-26, -13),
+							autoRotation: true,
+						}))
+					})
+					map.add(markArr);
+
+					// 绘制轨迹
+					var polyline = new AMap.Polyline({
+						map: map,
+						path: lineArr,
+						showDir: true,
+						strokeColor: "#28F", //线颜色
+						// strokeOpacity: 1,     //线透明度
+						strokeWeight: 3, //线宽
+						// strokeStyle: "solid"  //线样式
+					});
+
+					var passedPolyline = new AMap.Polyline({
+						map: map,
+						// path: lineArr,
+						strokeColor: "#AF5", //线颜色
+						// strokeOpacity: 1,     //线透明度
+						strokeWeight: 6, //线宽
+						// strokeStyle: "solid"  //线样式
+					});
+
+					/* marker.on('moving', function(e) {
+						passedPolyline.setPath(e.passedPath);
+					}); */
+
+					map.setFitView();
+
+					this.isLoading = false;
+
+				}, e => {
+					this.mui.toast('地图加载失败');
+					console.log('地图加载失败', e)
+				})
+			},
+		},
+	}
+</script>
+
+<style>
+</style>

src/projects/pension/apis/Master/health.js

@@ -9,3 +9,30 @@ export function getHeathData() {
 		method: 'post',
 	})
 }
+
+//获取预警设置
+export function getWarningConfig() {
+	return request({
+		url: '/mobile/watchApi/getWarning',
+		data: Qs.stringify({}),
+		method: 'post',
+	})
+}
+
+//设置预警设置
+export function setWarningConfig(params) {
+	return request({
+		url: '/mobile/watchApi/setWarning',
+		data: Qs.stringify(params),
+		method: 'post',
+	})
+}
+
+//获取健康曲线
+export function getChartList(params) {
+	return request({
+		url: '/mobile/watchApi/getCurveData',
+		data: Qs.stringify(params),
+		method: 'post',
+	})
+}

src/projects/pension/router/master.js

@@ -238,6 +238,17 @@ const routesMaster = [
 							title: '参数详情',
 						}
 					},
+					//坐标地图轨迹详情
+					{
+						path: 'chartMap',
+						name: 'MasterHealthChartMap',
+						component: () => import('../views/Master/Health/ChartMap.vue'),
+						meta: {
+							requireAuth: false,
+							role: [],
+							title: '坐标地图轨迹详情',
+						}
+					},
 					//预警参数设置
 					{
 						path: 'warningSet',

src/projects/pension/views/Master/Health/Archives.vue

@@ -7,61 +7,79 @@
 			<ul class="mui-table-view">
 				<li class="mui-table-view-cell mui-col-xs-4">
 					<div class="vongi-color-block block-yellow">
-						<span class="vongi-color-unit">mmHg</span>
-						<div class="mui-h1" v-text="tolic"></div>
-						<div class="mui-media-body">血压</div>
+						<router-link :to="{name:'MasterHealthChart',query:{type:'diastolic,systolic',title:'血压'}}">
+							<span class="vongi-color-unit">mmHg</span>
+							<div class="mui-h1" v-text="tolic"></div>
+							<div class="mui-media-body">血压</div>
+						</router-link>
 					</div>
 				</li>
 				<li class="mui-table-view-cell mui-col-xs-8">
 					<div class="vongi-color-block block-red">
-						<span class="vongi-color-unit">次/分</span>
-						<div class="mui-h1" v-text="healthData.heart?healthData.heart:'暂无'"></div>
-						<div class="mui-media-body">心率</div>
+						<router-link :to="{name:'MasterHealthChart',query:{type:'heart',title:'心率'}}">
+							<span class="vongi-color-unit">次/分</span>
+							<div class="mui-h1" v-text="healthData.heart?healthData.heart:'暂无'"></div>
+							<div class="mui-media-body">心率</div>
+						</router-link>
 					</div>
 				</li>
 				<li class="mui-table-view-cell mui-col-xs-4">
 					<div class="vongi-color-block block-green">
-						<span class="vongi-color-unit">浓度</span>
-						<div class="mui-h1" v-text="healthData.oxygen?healthData.oxygen:'暂无'"></div>
-						<div class="mui-media-body">血氧</div>
+						<router-link :to="{name:'MasterHealthChart',query:{type:'oxygen',title:'血氧浓度'}}">
+							<span class="vongi-color-unit">浓度</span>
+							<div class="mui-h1" v-text="healthData.oxygen?healthData.oxygen:'暂无'"></div>
+							<div class="mui-media-body">血氧</div>
+						</router-link>
 					</div>
 				</li>
 				<li class="mui-table-view-cell mui-col-xs-8">
 					<div class="vongi-color-block block-green">
-						<span class="vongi-color-unit">摄氏度</span>
-						<div class="mui-h1">{{healthData.temperature?(healthData.temperature+'℃'):'暂无'}}</div>
-						<div class="mui-media-body">体温</div>
+						<router-link :to="{name:'MasterHealthChart',query:{type:'temperature',title:'体温'}}">
+							<span class="vongi-color-unit">摄氏度</span>
+							<div class="mui-h1">{{healthData.temperature?(healthData.temperature+'℃'):'暂无'}}</div>
+							<div class="mui-media-body">体温</div>
+						</router-link>
 					</div>
 				</li>
 				<li class="mui-table-view-cell mui-col-xs-4">
 					<div class="vongi-color-block block-blue">
-						<span class="vongi-color-unit"></span>
-						<div class="mui-h1">{{healthData.power?healthData.power:'暂无'}}%</div>
-						<div class="mui-media-body">电量</div>
+						<router-link :to="{name:'MasterHealthChart',query:{type:'power',title:'电量'}}">
+							<span class="vongi-color-unit"></span>
+							<div class="mui-h1">{{healthData.power?healthData.power:'暂无'}}%</div>
+							<div class="mui-media-body">电量</div>
+						</router-link>
 					</div>
 				</li>
 				<li class="mui-table-view-cell mui-col-xs-4">
 					<div class="vongi-color-block block-yellowe">
-						<span class="vongi-color-unit"></span>
-						<div class="mui-h1" v-text="healthData.step?healthData.step:'暂无'"></div>
-						<div class="mui-media-body">运动</div>
+						<router-link :to="{name:'MasterHealthChart',query:{type:'step',title:'运动'}}">
+							<span class="vongi-color-unit"></span>
+							<div class="mui-h1" v-text="healthData.step?healthData.step:'暂无'"></div>
+							<div class="mui-media-body">运动</div>
+						</router-link>
 					</div>
 				</li>
 				<li class="mui-table-view-cell mui-col-xs-4">
 					<div class="vongi-color-block block-pink">
-						<div class="mui-h1 mui-icon mui-icon-gear vongi-color-icon"></div>
-						<div class="mui-media-body">预警参数</div>
+						<router-link :to="{name:'MasterHealthWarningSet'}">
+							<div class="mui-h1 mui-icon mui-icon-gear vongi-color-icon"></div>
+							<div class="mui-media-body">预警参数</div>
+						</router-link>
 					</div>
 				</li>
 				<li class="mui-table-view-cell mui-col-xs-12">
 					<div class="vongi-color-block block-green">
-						<span class="vongi-color-unit"></span>
-						<div class="mui-h1" v-text="address"></div>
-						<div class="mui-media-body">定位</div>
+						<router-link :to="{name:'MasterHealthChartMap',query:{type:'lbs',title:'定位'}}">
+							<span class="vongi-color-unit"></span>
+							<div class="mui-h1" v-text="address"></div>
+							<div class="mui-media-body">定位</div>
+						</router-link>
 					</div>
 				</li>
 			</ul>
 		</div>
+
+		<loading :visible="isLoading"></loading>
 	</div>
 </template>
 
@@ -186,5 +204,8 @@
 <style scoped src="$project/assets/css/pension.css"></style>
 <style scoped src="$project/assets/css/xpwyfyy.css"></style>
 <style src="$project/assets/css/iconfont.css"></style>
-<style>
+<style scoped>
+	.vongi-color-block a {
+		color: #fff;
+	}
 </style>

src/projects/pension/views/Master/Health/Chart.vue

@@ -1,24 +1,176 @@
 <template>
-<div>
-    <header class="mui-bar mui-bar-nav">
-			<h1 class="mui-title">血压</h1>
-			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
-		</header>
+	<div>
+		<common ref="common" @asynCallBack="asynCallBack"></common>
+		<top-header :pageTitle="pageTitle"></top-header>
+
 		<div class="mui-content vongi-yjcsdat">
 			<div class="mui-content-padded">
-				<h2>血压趋势图</h2>
-				<img src="~$project/assets/img/huodo.png" width="100%" />
+				<h2>{{pageTitle}}趋势图</h2>
+				<div id="linePicture" style="width:100%;height: 300px;">
+
+				</div>
 			</div>
 			<h4 class="colorfe616c">测量仅供参考，不作为临床诊断使用</h4>
 		</div>
-</div>
+	</div>
 </template>
 
 <script>
+	import * as API_Health from '@/apis/Master/health'
+	import Common from '$project/components/Common.vue'
+	import Loading from '$project/components/Loading.vue'
+	import TopHeader from '$project/components/TopHeader.vue'
+	import NavMenu from '@/components/NavMenu.vue'
+	import {
+		mapGetters,
+		mapMutations
+	} from 'vuex'
+	import echarts from 'echarts/lib/echarts'
+	import 'echarts/lib/chart/line'
+	import 'echarts/lib/component/legend'
+	import 'echarts/lib/component/title'
+	import 'echarts/lib/component/tooltip'
+	export default {
+		name: 'MasterHealthArchives',
+		components: {
+			Common,
+			Loading,
+			TopHeader,
+			NavMenu
+		},
+		data() {
+			return {
+				isLoading: false,
+
+				pageTitle: this.$route.query.title,
+
+				listFrom: {
+					names: this.$route.query.type,
+				},
+
+				typeList: '',
+
+				chartsList: [],
+			}
+		},
+		created() {
+			this.typeList = this.$route.query.type.split(',');
+		},
+		methods: {
+			//获取图表数据
+			getChartList() {
+				this.isLoading = true;
+				API_Health.getChartList(this.listFrom).then(response => {
+					this.isLoading = false;
+					this.chartsList = response;
+
+					this.setEcharts();
+				}).catch(error => {
+					this.isLoading = false;
+					mui.toast(error);
+				})
+			},
+			//设置echart数据
+			setEcharts() {
+				var legendData = [];
+				var xAxisData = [];
+				var series = [];
+				for (var i = 0; i < this.typeList.length; i++) {
+					var seriesData = [];
+					legendData.push(this.chartsList[this.typeList[i]].name);
+					var list = this.chartsList[this.typeList[i]].list;
+					for (var j = 0; j < list.length; j++) {
+						if (i == 0) {
+							xAxisData.push(list[j].recordTime);
+						}
+						seriesData.push(list[j].value);
+					}
+					series.push({
+						name: this.chartsList[this.typeList[i]].name,
+						type: 'line',
+						stack: '',
+						data: seriesData
+					});
+				}
+				this.echarts(legendData, xAxisData, series);
+			},
+			//显示图表
+			echarts(legendData, xAxisData, series) {
+				this.$nextTick(() => {
+
+					// 基于准备好的dom，初始化echarts实例
+					var myChart = echarts.init(document.getElementById('linePicture'));
+					// 指定图表的配置项和数据
+					var option = {
+						tooltip: {
+							trigger: 'axis',
+						},
+						legend: {
+							data: legendData,
+							orient: 'horizontal',
+							x: 'center',
+							y: 'bottom',
+						},
+						grid: {
+							left: '3%',
+							right: '4%',
+							bottom: '10%',
+							x: 40,
+							x2: 30,
+							y: 20,
+							containLabel: true
+						},
+						xAxis: {
+							type: 'category',
+							boundaryGap: false,
+							data: xAxisData,
+							axisLabel: {
+								interval: 0,
+								rotate: 80
+							}
+						},
+						yAxis: {
+							type: 'value',
+							axisLabel: {
+								interval: 0,
+								rotate: 40
+							}
+						},
+						series: series
+					};
+
+					// 使用刚指定的配置项和数据显示图表。
+					myChart.setOption(option);
+					/* myChart.resize({
+						height: rHeight + 'px'
+					}) */
+				});
+			},
+			asynCallBack() {},
+		},
+		mounted() {
+			//获取图表数据
+			this.getChartList();
+		},
+		destroyed() {
+
+		},
+		computed: {
+			...mapGetters({
+				openId: 'wx_openid',
+				token: 'token',
+				person_data: 'person_data',
+				person_popedom: 'person_popedom',
+				menu_list: 'menu_list',
+				common_menu_list: 'common_menu_list',
+				persion_home_model: 'persion_home_model'
+			})
+		}
+	}
 </script>
 
 <style scoped src="$project/assets/css/pension.css"></style>
 <style scoped src="$project/assets/css/xpwyfyy.css"></style>
 <style src="$project/assets/css/iconfont.css"></style>
 <style>
-</style>
+</style>

src/projects/pension/views/Master/Health/ChartMap.vue

@@ -0,0 +1,125 @@
+<template>
+	<div>
+		<common ref="common" @asynCallBack="asynCallBack"></common>
+		<top-header :pageTitle="pageTitle"></top-header>
+
+		<div class="mui-content vongi-yjcsdat">
+			<div class="lifeMap" id="container">
+				<amap ref="amap"></amap>
+			</div>
+		</div>
+
+		<loading :visible="isLoading"></loading>
+	</div>
+</template>
+
+<script>
+	import * as API_Health from '@/apis/Master/health'
+	import Common from '$project/components/Common.vue'
+	import Loading from '$project/components/Loading.vue'
+	import TopHeader from '$project/components/TopHeader.vue'
+	import NavMenu from '@/components/NavMenu.vue'
+	import {
+		mapGetters,
+		mapMutations
+	} from 'vuex'
+	import Amap from '$project/components/Amap.vue'
+	export default {
+		name: 'MasterHealthChartMap',
+		components: {
+			Common,
+			Loading,
+			TopHeader,
+			NavMenu,
+			Amap
+		},
+		data() {
+			return {
+				isLoading: false,
+
+				pageTitle: this.$route.query.title,
+
+				listFrom: {
+					names: this.$route.query.type,
+				},
+
+				typeList: '',
+
+				chartsList: [],
+			}
+		},
+		created() {
+			this.typeList = this.$route.query.type.split(',');
+		},
+		methods: {
+			//获取图表数据
+			getChartList() {
+				this.isLoading = true;
+				API_Health.getChartList(this.listFrom).then(response => {
+					this.isLoading = false;
+					this.chartsList = response;
+
+					this.setEcharts();
+				}).catch(error => {
+					this.isLoading = false;
+					mui.toast(error);
+				})
+			},
+			//设置echart数据
+			setEcharts() {
+				var mapList = [];
+				var list = this.chartsList[this.typeList[0]].list;
+				for (var j = 0; j < list.length; j++) {
+					mapList.push({
+						longtitude: list[j]['value'].split(',')[0],
+						latitude: list[j]['value'].split(',')[1],
+					});
+				}
+				this.initMap(mapList);
+			},
+			//赋地图数据
+			initMap(list) {
+				var pointArr = [];
+				list.forEach(function(item, index) {
+					pointArr.push([item.longtitude, item.latitude])
+				})
+				this.pointArr = pointArr;
+				//触发组件显示地图
+				this.$refs.amap.init(this.pointArr.reverse());
+			},
+			asynCallBack() {},
+		},
+		mounted() {
+			this.getChartList();
+		},
+		destroyed() {
+
+		},
+		computed: {
+			...mapGetters({
+				openId: 'wx_openid',
+				token: 'token',
+				person_data: 'person_data',
+				person_popedom: 'person_popedom',
+				menu_list: 'menu_list',
+				common_menu_list: 'common_menu_list',
+				persion_home_model: 'persion_home_model'
+			})
+		}
+	}
+</script>
+
+
+<style scoped src="$project/assets/css/pension.css"></style>
+<style scoped src="$project/assets/css/xpwyfyy.css"></style>
+<style src="$project/assets/css/iconfont.css"></style>
+<style scoped>
+	.lifeMap {
+		height: calc(100vh - 44px);
+	}
+
+	.lifeMap img {
+		width: 100%;
+		height: auto;
+	}
+</style>

src/projects/pension/views/Master/Health/WarningSet.vue

@@ -1,10 +1,8 @@
 <template>
-<div>
-    <header class="mui-bar mui-bar-nav">
-			<h1 class="mui-title">预警参数</h1>
-			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
-			<a class="mui-btn mui-pull-right mui-btn-pink mui-btn-outlined">清空设置</a>
-		</header>
+	<div>
+		<common @asynCallBack="asynCallBack"></common>
+		<top-header :pageTitle="pageTitle" :rightLink="rightLink" :doRightLink="doRightLink"></top-header>
+
 		<div class="mui-content margin60">
 			<div class="vongi-qingjiadt">
 				<div class="mui-content-padded">
@@ -13,7 +11,7 @@
 				<form class="mui-input-group">
 					<div class="mui-input-row">
 						<label>监测频率</label>
-						<span>1</span>
+						<input type="number" v-model="detail.frequency" />
 					</div>
 				</form>
 			</div>
@@ -24,19 +22,19 @@
 				<form class="mui-input-group">
 					<div class="mui-input-row">
 						<label>低压最小值</label>
-						<span>60</span>
+						<input type="number" v-model="detail.bpLowMin" />
 					</div>
 					<div class="mui-input-row">
 						<label>低压最大值</label>
-						<span>90</span>
+						<input type="number" v-model="detail.bpLowMax" />
 					</div>
 					<div class="mui-input-row">
 						<label>高压最小值</label>
-						<span>90</span>
+						<input type="number" v-model="detail.bpHighMin" />
 					</div>
 					<div class="mui-input-row">
 						<label>高压最大值</label>
-						<span>140</span>
+						<input type="number" v-model="detail.bpHighMax" />
 					</div>
 				</form>
 			</div>
@@ -47,11 +45,11 @@
 				<form class="mui-input-group">
 					<div class="mui-input-row">
 						<label>最小值</label>
-						<span>60</span>
+						<input type="number" v-model="detail.heartRateMin" />
 					</div>
 					<div class="mui-input-row">
 						<label>最大值</label>
-						<span>100</span>
+						<input type="number" v-model="detail.heartRateMax" />
 					</div>
 				</form>
 			</div>
@@ -62,11 +60,11 @@
 				<form class="mui-input-group">
 					<div class="mui-input-row">
 						<label>最小值</label>
-						<span>90</span>
+						<input type="number" v-model="detail.bloodOxMin" />
 					</div>
 					<div class="mui-input-row">
 						<label>最大值</label>
-						<span>100</span>
+						<input type="number" v-model="detail.bloodOxMax" />
 					</div>
 				</form>
 			</div>
@@ -77,23 +75,124 @@
 				<form class="mui-input-group">
 					<div class="mui-input-row">
 						<label>最小值</label>
-						<span>37.3</span>
+						<input type="number" v-model="detail.tempMin" />
 					</div>
 				</form>
 			</div>
-
 		</div>
 		<div class="fyy-footer">
-			<div class="bindfyy-btn"><button type="submit" class="mui-btn mui-btn-pink ">提  交</button></div>
+			<div class="bindfyy-btn" @click="submit"><button type="submit" class="mui-btn mui-btn-pink ">提 交</button></div>
 		</div>
-</div>
+
+		<loading :visible="isLoading"></loading>
+	</div>
 </template>
 
 <script>
+	import * as API_Health from '@/apis/Master/health'
+	import Common from '$project/components/Common.vue'
+	import Loading from '$project/components/Loading.vue'
+	import TopHeader from '$project/components/TopHeader.vue'
+	import NavMenu from '@/components/NavMenu.vue'
+	import {
+		mapGetters,
+		mapMutations
+	} from 'vuex'
+	export default {
+		name: 'MasterHealthWarningSet',
+		components: {
+			Common,
+			Loading,
+			TopHeader,
+			NavMenu
+		},
+		data() {
+			return {
+				isLoading: false,
+
+				pageTitle: '预警参数',
+
+				detail: {
+					frequency: '',
+					bpLowMin: '',
+					bpLowMax: '',
+					bpHighMin: '',
+					bpHighMax: '',
+					heartRateMin: '',
+					heartRateMax: '',
+					bloodOxMin: '',
+					bloodOxMax: '',
+					tempMin: ''
+				},
+
+				rightLink: {
+					show: true,
+					icon: '',
+					style: 'font-size:14px;color:#000;',
+					//title: '清空设置'
+				},
+			}
+		},
+		created() {},
+		methods: {
+			//获取手环数据
+			getDetail() {
+				this.isLoading = true;
+				API_Health.getWarningConfig().then(response => {
+					this.isLoading = false;
+
+					this.detail = response;
+
+				}).catch(error => {
+					this.isLoading = false;
+					mui.toast(error);
+				})
+			},
+			//提交
+			submit() {
+				this.isLoading = true;
+				API_Health.setWarningConfig(this.detail).then(response => {
+					this.isLoading = false;
+
+					mui.toast('提交成功');
+					this.$router.go(-1);
+
+				}).catch(error => {
+					this.isLoading = false;
+					mui.toast(error);
+				})
+			},
+			doRightLink() {
+
+			},
+			asynCallBack() {},
+		},
+		mounted() {
+			//获取手环数据
+			this.getDetail();
+		},
+		destroyed() {
+
+		},
+		computed: {
+			...mapGetters({
+				openId: 'wx_openid',
+				token: 'token',
+				person_data: 'person_data',
+				person_popedom: 'person_popedom',
+				menu_list: 'menu_list',
+				common_menu_list: 'common_menu_list',
+				persion_home_model: 'persion_home_model'
+			})
+		}
+	}
 </script>
 
 <style scoped src="$project/assets/css/pension.css"></style>
 <style scoped src="$project/assets/css/xpwyfyy.css"></style>
 <style src="$project/assets/css/iconfont.css"></style>
-<style>
+<style scoped>
+	.vongi-qingjiadt input[type="number"] {
+		text-align: right;
+	}
 </style>