jp-xpgj-GA-file/src/projects/business/views/Common/Health/Cert.vue

<template>
	<div>
		<common @asynCallBack="asynCallBack"></common>
		<top-header :pageTitle="pageTitle" :rightLink="rightLink" :doRightLink="doRightLink" :headerStyle="'background-color:'+statusTitleColor"></top-header>

		<div class="mui-content vongi-jkz-content">
			<div class="vongi-jkz-content mui-content-padded mui-clearfix">
				<div class="vongi-jkz-left mui-col-xs-5">
					<div class="mui-content-padded faceaifyy-content">
						<div class="faceaifyy-content-region">
							<img :src="detail.faceImageUrl">
						</div>
						<div class="mui-media-body" style="width: 100%;">最近体温测量<span :style="'color:'+statusTitleColor" v-text="detail.lastTemperature+'℃'"></span></div>
					</div>
				</div>
				<div class="vongi-jkz-right mui-col-xs-7">
					<ul class="mui-table-view mui-grid-view mui-grid-9 fyy-statistics">
						<li class="mui-table-view-cell mui-media mui-col-xs-12">
							<div class="vongi-jkz-list">
								<div class="fyy-statistics-body">
									<h2>{{detail.name}}<span :style="'color:'+statusTitleColor">{{statusName}}</span></h2>
									<a class="mui-navigate-right">
										<span class="mui-icon iconfont icon-erweima1"></span>
									</a>
								</div>
								<div class="mui-ellipsis mui-h5">湖北荆鹏软件集团有限公司</div>
								<div class="mui-ellipsis mui-h5">信息工程部</div>
							</div>
						</li>
						<li class="mui-table-view-cell mui-media mui-col-xs-6">
							<div class="vongi-jkz-list">
								<div class="fyy-statistics-body">
									<h3><span class="color55f868 mui-h1" v-text="detail.totalDays"></span>天</h3>
								</div>
								<div class="mui-media-body">已连续正常天数</div>
							</div>
						</li>
						<li class="mui-table-view-cell mui-media mui-col-xs-6">
							<div class="vongi-jkz-list">
								<div class="fyy-statistics-body">
									<h3><span class="colorfe616c mui-h1" v-text="detail.undetectedCount"></span>次</h3>
								</div>
								<div class="mui-media-body">漏测记录</div>
							</div>
						</li>
					</ul>
				</div>
			</div>
			<div class="mui-content-padded fyy-echarts">
				<div class="fyy-echarts-inter" v-for="(item,index) in chartsList">
					<h4 class="colorf6f448">{{item.startDate}}~{{item.endDate}}</h4>
					<div :id="'linePicture'+index" style="width:100%;"></div>
				</div>
				<!-- <div class="fyy-annotation" @click="doChartTips">
					<div class="fyy-annotation-color">
						<span class="color09ae47"></span><span>14天连续测温正常</span>
					</div>
					<div class="fyy-annotation-color">
						<span class="colorfe616c"></span><span>7天内有一次以上异常</span>
					</div>
					<div class="fyy-annotation-color">
						<span class="colord39d33"></span><span>14天内有一次以上异常</span>
					</div>
				</div> -->
			</div>
		</div>

		<loading :visible="isLoading"></loading>
	</div>
</template>

<script>
	import * as API_Health from '@/apis/Common/health'
	import echarts from 'echarts/lib/echarts'
	import 'echarts/lib/chart/line'
	import 'echarts/lib/component/legend'
	import 'echarts/lib/component/title'
	import Common from '$project/components/Common.vue'
	import Loading from '$project/components/Loading.vue'
	import TopHeader from '$project/components/TopHeader.vue'
	import {
		mapGetters,
		mapMutations
	} from 'vuex'
	export default {
		name: 'CommonHealthTemperatureInfo',
		components: {
			Common,
			Loading,
			TopHeader
		},
		data() {
			return {
				pageTitle: '健康证',

				isLoading: false,

				rightLink: {
					show: true,
					icon: 'icon-shijian',
					style: 'font-size:14px;color:#000;',
					title: '测温记录'
				},

				detail: {},

				subForm: {
					personId: ''
				},
				chartsList: [],
				maxTemparture: 37,
				//和下面的对应默认值
				lineColor: '#e5aa37',
				statusColor: '#e5aa37',
				statusTitleColor: '#d39d33',
				statusName: '异常',
			}
		},
		created() {
			this.subForm.personId = this.person_data.id;
		},
		methods: {
			//获取详情
			getDetail() {
				this.isLoading = true;
				API_Health.getCertDetail(this.subForm).then(response => {
					this.detail = response;
					this.maxTemparture = response.temperatureMax;

					this.isLoading = false;
				}).catch(error => {
					this.isLoading = false;
					mui.toast(error);
				})
			},
			//获取统计图表数据
			getEcharts() {
				this.isLoading = true;
				API_Health.getCertList(this.subForm).then(response => {
					this.chartsList = response;
					if (response.length > 0) {
						this.maxTemparture = response[0]['temperatureMax'];
						this.detail.totalDays = response[0]['totalDays'];
						this.detail.undetectedCount = response[0]['undetectedCount'];
						this.getStatus()
						this.echarts();
					}

					this.isLoading = false;
				}).catch(error => {
					this.isLoading = false;
					mui.toast(error);
				})
			},
			//计算显示颜色
			getStatus() {
				if (this.chartsList.length) {
					var chartList = this.chartsList[0]['list'].slice();
					chartList.reverse();
					//console.log(chartList)
					for (var index in chartList) {
						if (chartList[index]['value'] >= this.maxTemparture && index < 7) {
							this.statusColor = '#fe616c';
							this.statusTitleColor = '#ed5b65';
							this.statusName = '异常';
							break;
						} else if (chartList[index]['value'] >= this.maxTemparture && index < 14) {
							this.statusColor = '#e5aa37';
							this.statusTitleColor = '#d39d33';
							this.statusName = '异常';
							break;
						} else {
							this.statusColor = '#0bcf54';
							this.statusTitleColor = '#09ae47';
							this.statusName = '正常';
						}
					}

					//如果全为0则显示默认值
					var allzero = true;
					for (var index in chartList) {
						if (chartList[index]['value'] > 0) {
							allzero = false;
							break;
						}
					}
					if (allzero) {
						this.statusColor = '#e5aa37';
						this.statusTitleColor = '#d39d33';
						this.statusName = '异常';
					}
				}
			},
			echarts() {
				this.$nextTick(() => {
					var _titleData = [];
					var _listData = [];
					for (var index in this.chartsList) {
						for (var k in this.chartsList[index]['list']) {
							_titleData.push(this.chartsList[index]['list'][k]['name']);
							_listData.push(this.chartsList[index]['list'][k]['value']);
						}
					}

					console.log(_titleData);
					console.log(_listData);
					for (var index in this.chartsList) {
						var _this = this;
						//是否有异常数据
						for (var k in this.chartsList[index]['list']) {
							if (this.chartsList[index]['list'][k]['value'] >= this.maxTemparture) {
								this.lineColor = 'yellow';
								break;
							}
						}

						var wheight = window.screen.height;
						if (wheight < 480) {
							var rHeight = '180';
							var gHeight = '130';
						} else if (wheight >= 480 && wheight <= 568) {
							var rHeight = '190';
							var gHeight = '130';
						} else if (wheight > 568 && wheight <= 736) {
							var rHeight = '200';
							var gHeight = '130';
						} else {
							var rHeight = '230';
							var gHeight = '180';
						}

						// 基于准备好的dom，初始化echarts实例
						var myChart = echarts.init(document.getElementById('linePicture' + index));
						// 指定图表的配置项和数据
						var option = {
							xAxis: {
								type: 'category',
								boundaryGap: false,
								data: _titleData,
								axisLabel: {
									textStyle: {
										color: '#fff',
										fontSize: '12'
									},
									showMinLabel: true,
									showMaxLabel: true,
								},
								axisLine: {
									lineStyle: {
										type: 'solid',
										color: '#fff',
										//width: '2'
									}
								},
							},
							yAxis: {
								type: 'value',
								axisLabel: {
									textStyle: {
										color: '#fff',
										//fontSize: '12'
									},
								},
								min: 30,
								max: 40,
								splitNumber: 6,
								axisLine: {
									lineStyle: {
										type: 'solid',
										color: '#fff',
										//width: '2'
									}
								},
								splitLine: {
									lineStyle: {
										type: 'dashed',
										color: '#404978',
									}
								}
							},
							series: [{
								data: _listData,
								type: 'line',
								//smooth: true,
								markLine: { //添加警戒线
									symbol: "none", //去掉警戒线最后面的箭头
									name: "",
									silent: true,
									precision: 2,
									data: [{
										silent: true, //鼠标悬停事件  true没有，false有
										lineStyle: { //警戒线的样式  ，虚实  颜色
											type: "solid",
											color: "red"
										},
										label: {
											position: 'start'
										},
										yAxis: _this.maxTemparture
									}]
								},
								lineStyle: {
									normal: {
										color: _this.statusColor //改变区域颜色
									}
								},
								areaStyle: {
									color: _this.statusColor,
								}
							}],
							visualMap: {
								show: false,
								//dimension: 0,
								seriesIndex: 0,
								pieces: [{
									gt: _this.maxTemparture,
									lt: 40,
									color: 'red'
								}, {
									gt: 0,
									lt: _this.maxTemparture,
									color: 'green'
								}],
							},
							grid: {
								show: true,
								x: 40,
								x2: 30,
								y: 20,
								height: gHeight
							},
						};

						// 使用刚指定的配置项和数据显示图表。
						myChart.setOption(option);
						myChart.resize({
							height: rHeight + 'px'
						})
					}
				});
			},
			//右上角点击事件
			doRightLink() {
				this.$router.push({
					name: 'CommonHealthTemperatureRecord',
					query: {}
				})
			},
			asynCallBack() {},
		},
		mounted() {
			//获取详情
			this.getDetail();
			//获取统计图表
			this.getEcharts();
		},
		destroyed() {},
		computed: {
			...mapGetters({
				openId: 'wx_openid',
				token: 'token',
				person_data: 'person_data',
				company_data: 'company_data',
			})
		}
	}
</script>

<style scoped src="$project/assets/css/xpwyfyy.css"></style>
<style scoped src="$project/assets/css/sczpfyy.css"></style>
<style scoped src="$project/assets/css/iconfont.css"></style>
<style scoped>
</style>