|
@@ -1,18 +1,16 @@
|
|
|
<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-pull-right" href=""><span class="mui-icon iconfont icon-shijian"></span>测温记录</a>
|
|
|
- </header>
|
|
|
+ <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="~$project/assets/img/zhaop.jpg">
|
|
|
+ <img :src="detail.faceImageUrl">
|
|
|
</div>
|
|
|
- <div class="mui-media-body">最近体温测量<span class="color55f868">36.5℃</span></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">
|
|
@@ -20,8 +18,8 @@
|
|
|
<li class="mui-table-view-cell mui-media mui-col-xs-12">
|
|
|
<div class="vongi-jkz-list">
|
|
|
<div class="fyy-statistics-body">
|
|
|
- <h2>冯银银<span class="color55f868">健康</span></h2>
|
|
|
- <a href="" class="mui-navigate-right">
|
|
|
+ <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>
|
|
@@ -32,7 +30,7 @@
|
|
|
<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">3</span>天</h3>
|
|
|
+ <h3><span class="color55f868 mui-h1" v-text="detail.totalDays"></span>天</h3>
|
|
|
</div>
|
|
|
<div class="mui-media-body">已连续正常天数</div>
|
|
|
</div>
|
|
@@ -40,7 +38,7 @@
|
|
|
<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">0</span>次</h3>
|
|
|
+ <h3><span class="colorfe616c mui-h1" v-text="detail.undetectedCount"></span>次</h3>
|
|
|
</div>
|
|
|
<div class="mui-media-body">漏测记录</div>
|
|
|
</div>
|
|
@@ -49,11 +47,11 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="mui-content-padded fyy-echarts">
|
|
|
- <div class="fyy-echarts-inter ">
|
|
|
- <h4 class="colorf6f448">2020-03-21</h4>
|
|
|
- <div><img src="~$project/assets/img/echarts.png"> </div>
|
|
|
+ <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">
|
|
|
+ <!-- <div class="fyy-annotation" @click="doChartTips">
|
|
|
<div class="fyy-annotation-color">
|
|
|
<span class="color09ae47"></span><span>14天连续测温正常</span>
|
|
|
</div>
|
|
@@ -63,17 +61,313 @@
|
|
|
<div class="fyy-annotation-color">
|
|
|
<span class="colord39d33"></span><span>14天内有一次以上异常</span>
|
|
|
</div>
|
|
|
- </div>
|
|
|
+ </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 src="$project/assets/css/xpwyfyy.css"></style>
|
|
|
-<style src="$project/assets/css/sczpfyy.css"></style>
|
|
|
-<style src="$project/assets/css/iconfont.css"></style>
|
|
|
-<style>
|
|
|
+<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>
|