|
@@ -1,392 +0,0 @@
|
|
|
-<template>
|
|
|
- <div>
|
|
|
- <common @asynCallBack="asynCallBack"></common>
|
|
|
- <top-header :pageTitle="pageTitle" :rightLink="rightLink" :doRightLink="doRightLink" :headerStyle="'background-color:'+statusTitleColor"></top-header>
|
|
|
- <green-code ref="greenCode" :personId="subForm.personId"></green-code>
|
|
|
-
|
|
|
- <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" @click="showGreenCode">
|
|
|
- <span class="mui-icon iconfont icon-erweima1" :style="'color: '+statusTitleColor+';margin-right:15px;line-height: 27px'"></span>
|
|
|
- </a>
|
|
|
- </div>
|
|
|
- <div class="mui-ellipsis mui-h5" v-text="detail.parking"></div>
|
|
|
- <div class="mui-ellipsis mui-h5" v-text="detail.companyName"></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 GreenCode from '@/components/GreenCode.vue'
|
|
|
- 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: 'CommonHealthCert',
|
|
|
- components: {
|
|
|
- Common,
|
|
|
- Loading,
|
|
|
- TopHeader,
|
|
|
- GreenCode
|
|
|
- },
|
|
|
- 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.$route.query.personId ? this.$route.query.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.getGreenCode()
|
|
|
- this.echarts();
|
|
|
- }
|
|
|
-
|
|
|
- this.isLoading = false;
|
|
|
- }).catch(error => {
|
|
|
- this.isLoading = false;
|
|
|
- mui.toast(error);
|
|
|
- })
|
|
|
- },
|
|
|
- //根据绿码显示颜色
|
|
|
- getGreenCode() {
|
|
|
- var colors = this.$refs.greenCode.getCode();
|
|
|
- this.statusColor = colors.foreground;
|
|
|
- this.statusTitleColor = colors.foreground;
|
|
|
- this.statusName = colors.title;
|
|
|
- console.log(colors);
|
|
|
- },
|
|
|
- //计算显示颜色
|
|
|
- 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'
|
|
|
- })
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- //显示健康码
|
|
|
- showGreenCode() {
|
|
|
- this.$refs.greenCode.showGreenCode();
|
|
|
- },
|
|
|
- //右上角点击事件
|
|
|
- doRightLink() {
|
|
|
- this.$router.push({
|
|
|
- name: 'CommonHealthTemperatureRecord',
|
|
|
- query: {}
|
|
|
- })
|
|
|
- },
|
|
|
- asynCallBack() {},
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- //获取详情
|
|
|
- this.getDetail();
|
|
|
- //获取统计图表
|
|
|
- this.getEcharts();
|
|
|
-
|
|
|
- this.$refs.greenCode.getGreenCode();
|
|
|
- },
|
|
|
- destroyed() {},
|
|
|
- computed: {
|
|
|
- ...mapGetters({
|
|
|
- openId: 'wx_openid',
|
|
|
- token: 'token',
|
|
|
- person_data: 'person_data',
|
|
|
- person_popedom: 'person_popedom',
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
-</script>
|
|
|
-
|
|
|
-<style scoped src="$project/assets/css/xpwyfyy.css"></style>
|
|
|
-<style scoped src="$project/assets/css/sczpfyy.css"></style>
|
|
|
-<style src="$project/assets/css/iconfont.css"></style>
|
|
|
-<style scoped>
|
|
|
-</style>
|