@@ -22,6 +22,7 @@ | |||
"js-base64": "^2.5.2", | |||
"regenerator-runtime": "^0.13.5", | |||
"vant": "^2.12.48", | |||
"vconsole": "^3.15.1", | |||
"vue": "^2.7.8", | |||
"vue-router": "^3.5.4", | |||
"vuex": "^3.6.2", | |||
@@ -0,0 +1,23 @@ | |||
import axios from 'axios'; | |||
import prefix from '@/store/prefix'; | |||
import { PsyBaseUrl } from '@/config/models'; | |||
const service = axios.create({ | |||
baseURL: PsyBaseUrl | |||
}); | |||
service.interceptors.request.use(request => { | |||
if (localStorage.getItem(prefix + 'ssjlToken')) { | |||
request.headers.AccessToken = localStorage.getItem(prefix + 'ssjlToken'); | |||
} | |||
return request; | |||
}); | |||
export const APIPsy = { | |||
getHomeData | |||
}; | |||
export default APIPsy; | |||
function getHomeData(data) { | |||
return service({ | |||
url: `/api/Data/GetHomeData`, | |||
method: 'get', | |||
params: data | |||
}); | |||
} |
@@ -18,13 +18,31 @@ import '@/plugins/vant'; | |||
import '@/assets/css/index.scss'; | |||
// 移动端适配 | |||
import 'amfe-flexible'; | |||
import VConsole from 'vconsole'; | |||
Vue.prototype.$dayjs = dayjs; | |||
Vue.prototype.$echarts = echarts; | |||
Vue.prototype.$store = store; | |||
Vue.prototype.$own = own; | |||
Vue.prototype.$axios = request; | |||
Vue.prototype.$green = '#189b3b'; | |||
// 判断是否是pc设备 | |||
const isPc = () => { | |||
const userAgentInfo = navigator.userAgent; | |||
const Agents = ['Android', 'iPhone', 'SymbianOS', 'Windows Phone', 'iPad', 'iPod']; | |||
let flag = true; | |||
for (let v = 0; v < Agents.length; v++) { | |||
if (userAgentInfo.indexOf(Agents[v]) > 0) { | |||
flag = false; | |||
break; | |||
} | |||
} | |||
return flag; | |||
}; | |||
//如果不是生产环境并且不是pc设备那么就显示调试 | |||
if (process.env.NODE_ENV == 'test' && !isPc()) { | |||
// eslint-disable-next-line no-unused-vars | |||
const vConsole = new VConsole(); | |||
} | |||
// filters | |||
import './filters'; | |||
Vue.config.productionTip = false; | |||
@@ -152,6 +152,7 @@ | |||
<script> | |||
import DateSwitch from '@/components/DateSwitch.vue'; | |||
import { format, startOfMonth, endOfMonth } from 'date-fns'; | |||
export default { | |||
components: { | |||
DateSwitch | |||
@@ -249,7 +250,8 @@ export default { | |||
}, | |||
upImg: require('@/assets/today/icons/up.png'), | |||
downImg: require('@/assets/today/icons/down.png'), | |||
date: '' | |||
date: '', | |||
monthDate: {} | |||
}; | |||
}, | |||
created() {}, | |||
@@ -259,8 +261,6 @@ export default { | |||
watch: { | |||
active(val) { | |||
console.log(val); | |||
/* this.emotionActive = 0; | |||
this.signActive = 0; */ | |||
this.$nextTick(() => { | |||
this.initData(); | |||
this.initEmotionChart(); | |||
@@ -317,7 +317,19 @@ export default { | |||
updateDate(value) { | |||
console.log('组件原始值', value); | |||
this.date = this.active == 0 ? value.replace('~', '-') : value; | |||
console.log('接口所需要的值', this.date); | |||
if (this.active == 1) { | |||
this.getMonthStaEnd(this.date); | |||
} | |||
console.log('接口所需要的值', this.date, '如果是月', this.monthDate); | |||
}, | |||
getMonthStaEnd(value) { | |||
const dateObj = {}; | |||
const start = startOfMonth(value); | |||
const end = endOfMonth(value); | |||
dateObj.start = format(start, 'yyyy-MM-dd'); | |||
dateObj.end = format(end, 'yyyy-MM-dd'); | |||
this.monthDate = { ...dateObj }; | |||
}, | |||
initData() { | |||
//初始化图表 | |||
@@ -68,13 +68,14 @@ export default { | |||
created() {}, | |||
mounted() { | |||
// TODO 获取code再拿code获取openId | |||
// this.getCode(); | |||
this.getCode(); | |||
}, | |||
methods: { | |||
getCode() { | |||
let url = window.location.href; | |||
if (url.indexOf('code') > -1) { | |||
let codeUrl = window.location.href.split('?code='); | |||
console.log('获取code的url', codeUrl); | |||
if (codeUrl) { | |||
let timeStamp = new Date().getTime(); | |||
let code = codeUrl[1].split('&')[0]; | |||
@@ -129,7 +130,7 @@ export default { | |||
this.countDown(); | |||
} | |||
if (item.stateCode === 0 && item.code === null) { | |||
// this.notify('请勿频繁获取,验证码5分钟内有效'); | |||
//this.notify('请勿频繁获取,验证码5分钟内有效'); | |||
NotifyService.notify({ message: item.message }); | |||
} | |||
}) | |||
@@ -1,6 +1,6 @@ | |||
<template> | |||
<div class="psychological-container"> | |||
<NavBar title="月报" @on-click-left="onNavBack" right-text="历史" @on-click-right="onHistory"> </NavBar> | |||
<NavBar title="心理监测" @on-click-left="onNavBack" right-text="历史" @on-click-right="onHistory"> </NavBar> | |||
<div class="tab-bar"> | |||
<div class="date-tab-con"> | |||
<div class="date-tab-list"> | |||
@@ -19,6 +19,22 @@ | |||
</div> | |||
<div class="main" v-show="current !== 3"> | |||
<div class="tab-bar"> | |||
<div class="date-tab-con"> | |||
<div class="date-tab-list"> | |||
<div | |||
:class="['date-tab-item', { active: current === index, notClick: false }]" | |||
@click="onTabClick(item.value, index)" | |||
v-for="(item, index) in dateList" | |||
:key="index" | |||
> | |||
<img :src="tabImgUrl" alt v-if="index == 3" /> | |||
<span>{{ item.text }}</span> | |||
<img class="more" :src="selectDownImg" alt v-if="index == 3" /> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="top"> | |||
<!-- 日期选择 --> | |||
<!-- 标题 --> | |||
@@ -138,20 +154,13 @@ | |||
<div class="echart"> | |||
<EchartBox | |||
echartId="charts" | |||
outTitle="压力数据图" | |||
:outTitle="emoLegend.outTitle" | |||
height="200" | |||
width="200" | |||
:legend="emoLegend" | |||
:options="emoOptions" | |||
:options="defaultOptions" | |||
></EchartBox> | |||
</div> | |||
<!-- <EchartBox | |||
echartId="charts" | |||
outTitle="压力数据图" | |||
height="300" | |||
:legend="emoLegend" | |||
:options="emoOptions" | |||
></EchartBox> --> | |||
</div> | |||
<div class="line-gray"></div> | |||
@@ -197,9 +206,14 @@ | |||
<div class="title"> | |||
<span class="title-text">{{ surveyTitle }}</span> | |||
<div class="mood-list" v-if="emotionList.length > 0"> | |||
<div class="item" v-for="(item, index) in emotionList" :key="index"> | |||
<div | |||
class="item" | |||
v-for="(item, index) in emotionList" | |||
:key="index" | |||
:style="{ backgroundColor: item.color }" | |||
> | |||
<p> | |||
<span :style="{ color: item.color }" class="day">{{ item.days }}</span> | |||
<span class="day">{{ item.days }}</span> | |||
<span class="day-text">天</span> | |||
</p> | |||
@@ -282,6 +296,7 @@ import { EmotionModel, PsyBaseUrl } from '@/config/models'; | |||
import EchartBox from '@/components/EchartBox'; | |||
import NavBar from '@/components/NavBar'; | |||
import axios from 'axios'; | |||
import ToastService from '@/services/toast-service'; | |||
export default { | |||
name: 'psychological-monitor', | |||
components: { | |||
@@ -290,16 +305,6 @@ export default { | |||
}, | |||
data() { | |||
return { | |||
emoLegend: { | |||
title: '', | |||
list: [ | |||
{ name: '无压力倾向', color: '#179b3b' }, | |||
{ name: '轻度压力倾向', color: '#8dc21f' }, | |||
{ name: '中度压力倾向', color: '#2ea7e0' }, | |||
{ name: '重度压力倾向', color: '#ff5f8b' } | |||
] | |||
}, | |||
// 日期选择标签 | |||
dateList: [ | |||
{ name: 'today', text: '今天', value: 0 }, | |||
@@ -429,145 +434,31 @@ export default { | |||
}; | |||
}, | |||
computed: { | |||
// 默认折线图配置,echarts 具体配置 见 https://echarts.apache.org/zh/option.html#title | |||
emoOptions() { | |||
emoLegend() { | |||
return { | |||
grid: { | |||
top: '10%', | |||
left: '10%', | |||
right: '10%', | |||
bottom: '20%' | |||
}, | |||
xAxis: { | |||
type: 'category', | |||
axisLine: { | |||
show: false | |||
}, | |||
textStyle: { | |||
fontSize: 10 | |||
}, | |||
axisTick: { | |||
show: false | |||
}, | |||
nameLocation: 'left', | |||
axisLabel: { | |||
show: true, | |||
fontSize: 12, | |||
showMinLabel: true, //显示最小值 | |||
showMaxLabel: true //显示最大值 | |||
}, | |||
data: ['6:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00'] | |||
}, | |||
yAxis: { | |||
type: 'value' | |||
}, | |||
series: [ | |||
{ | |||
type: 'line', | |||
data: this.emotionDataNew, | |||
symbol: 'circle', | |||
symbolSize: 12, | |||
smooth: true, | |||
itemStyle: { | |||
normal: { | |||
color: '#fff', | |||
borderWidth: 2, | |||
lineStyle: { | |||
width: 6, | |||
type: 'solid', | |||
color: '#189b3b' | |||
} | |||
} | |||
} | |||
} | |||
title: '', | |||
outTitle: `${this.emoName}数据图`, | |||
list: [ | |||
{ name: `无${this.emoName}倾向`, color: '#179b3b' }, | |||
{ name: `轻度${this.emoName}倾向`, color: '#8dc21f' }, | |||
{ name: `中度${this.emoName}倾向`, color: '#2ea7e0' }, | |||
{ name: `重度${this.emoName}倾向`, color: '#ff5f8b' } | |||
] | |||
}; | |||
}, | |||
// 默认折线图配置,echarts 具体配置 见 https://echarts.apache.org/zh/option.html#title | |||
defaultOptions() { | |||
return { | |||
time: { | |||
useUTC: false | |||
}, | |||
title: { | |||
text: this.echartsTitle, | |||
left: 1, | |||
right: 25, | |||
bottom: 20, | |||
top: '3%', | |||
textStyle: { | |||
fontSize: 16, | |||
fontWeight: 'bold' | |||
} | |||
}, | |||
legend: { | |||
width: '65%', | |||
orient: 'horizontal', | |||
right: 'right', | |||
top: 1, | |||
bottom: '1%', | |||
itemHeight: 12, | |||
itemWidth: 12, | |||
itemGap: 10, | |||
align: 'left', | |||
selectedMode: false, | |||
data: [ | |||
{ | |||
name: `轻度${this.emoName}倾向`, | |||
icon: 'rect', | |||
itemStyle: { | |||
color: '#8dc21f' | |||
}, | |||
textStyle: { | |||
fontSize: 12 | |||
} | |||
}, | |||
{ | |||
name: `中度${this.emoName}倾向`, | |||
itemStyle: { | |||
color: '#2ea7e0' | |||
}, | |||
icon: 'rect', | |||
textStyle: { | |||
fontSize: 12 | |||
} | |||
}, | |||
{ | |||
name: `重度${this.emoName}倾向`, | |||
itemStyle: { | |||
color: '#ff5f8b' | |||
}, | |||
icon: 'rect', | |||
textStyle: { | |||
fontSize: 12 | |||
} | |||
}, | |||
{ | |||
name: `无${this.emoName}倾向`, | |||
icon: 'rect', | |||
itemStyle: { | |||
color: '#179b3b' | |||
}, | |||
textStyle: { | |||
fontSize: 12 | |||
} | |||
} | |||
], | |||
formatter: function (name) { | |||
// 自定义显示内容 | |||
if (name.length > 6) { | |||
return name.substring(0, 6) + '\n' + name.substring(6); | |||
} else { | |||
return name; | |||
} | |||
} | |||
}, | |||
grid: { | |||
show: true, | |||
borderWidth: 1, | |||
top: '20%', | |||
borderWidth: 0, | |||
top: '3%', | |||
left: '1%', | |||
right: '5%', | |||
bottom: '10%', | |||
right: '3%', | |||
bottom: '15%', | |||
containLabel: true | |||
}, | |||
xAxis: { | |||
@@ -611,8 +502,8 @@ export default { | |||
fontSize: 14 | |||
}, | |||
show: true, | |||
height: 15, | |||
bottom: 5, | |||
height: 20, | |||
bottom: 4, | |||
handleStyle: { | |||
borderWidth: 1, | |||
borderCap: 'square' | |||
@@ -639,16 +530,16 @@ export default { | |||
nameTextStyle: { | |||
fontSize: 13 | |||
}, | |||
alignTicks: true, | |||
alignTicks: false, | |||
axisTick: { | |||
show: true | |||
show: false | |||
}, | |||
axisLabel: { | |||
show: true, | |||
fontSize: 13 | |||
}, | |||
splitLine: { | |||
show: true, | |||
show: false, | |||
lineStyle: { | |||
color: '#ddd', | |||
width: 1 | |||
@@ -713,7 +604,7 @@ export default { | |||
series: [ | |||
{ | |||
type: 'pie', | |||
radius: ['40%', '80%'], | |||
radius: ['40%', '90%'], | |||
avoidLabelOverlap: false, | |||
startAngle: 270, // 设置逆时针渲染 | |||
itemStyle: { | |||
@@ -816,9 +707,8 @@ export default { | |||
// 读取路由传过来的参数,根据路由传过来的参数判断是哪种情绪 | |||
this.loadParams(); | |||
this.initEchartText(); | |||
this.getPieData(); | |||
this.getCalendarData(); | |||
this.getPsychologiclData('2023-11-21'); | |||
this.getPsychologiclData(); | |||
this.createList(); | |||
//this.getWeekResult(); | |||
}, | |||
@@ -951,7 +841,7 @@ export default { | |||
}, | |||
// 获取情绪数据 | |||
getPsychologiclData(date, startDate, endDate) { | |||
this.$toast.loading({ | |||
ToastService.loading({ | |||
message: '数据加载中' | |||
}); | |||
let reqDate = date | |||
@@ -1114,7 +1004,7 @@ export default { | |||
{ | |||
name: '平均值', | |||
type: 'scatter', | |||
symbolSize: 8, | |||
symbolSize: 14, | |||
data: this.emotionData | |||
}, | |||
{ | |||
@@ -1122,15 +1012,15 @@ export default { | |||
type: 'custom', | |||
data: this.weekAndMonData, | |||
renderItem: function (params, api) { | |||
var categoryIndex = api.value(0); | |||
var end = api.coord([categoryIndex, api.value(1)]); | |||
var start = api.coord([categoryIndex, api.value(2)]); | |||
var width = 8; | |||
var rectShape = that.$echarts.graphic.clipRectByRect( | |||
let categoryIndex = api.value(0); | |||
let end = api.coord([categoryIndex, api.value(1)]); | |||
let start = api.coord([categoryIndex, api.value(2)]); | |||
let width = 16; | |||
let rectShape = that.$echarts.graphic.clipRectByRect( | |||
{ | |||
x: start[0] - width / 2, | |||
y: start[1], | |||
width: 8, | |||
width: 16, | |||
height: end[1] - start[1] | |||
}, | |||
{ | |||
@@ -1162,25 +1052,25 @@ export default { | |||
{ | |||
name: `轻度${this.emoName}倾向`, | |||
type: 'scatter', | |||
symbolSize: 8, | |||
symbolSize: 12, | |||
data: '' | |||
}, | |||
{ | |||
name: `中度${this.emoName}倾向`, | |||
type: 'scatter', | |||
symbolSize: 8, | |||
symbolSize: 12, | |||
data: '' | |||
}, | |||
{ | |||
name: `重度${this.emoName}倾向`, | |||
type: 'scatter', | |||
symbolSize: 8, | |||
symbolSize: 12, | |||
data: '' | |||
}, | |||
{ | |||
name: `无${this.emoName}倾向`, | |||
type: 'scatter', | |||
symbolSize: 8, | |||
symbolSize: 12, | |||
data: '' | |||
} | |||
]; | |||
@@ -1215,17 +1105,14 @@ export default { | |||
this.result = data.Result; | |||
this.resultLevel = data.ResultLevel; | |||
this.advice = data.Advice; | |||
this.$toast.success({ | |||
ToastService.success({ | |||
message: '数据加载完成' | |||
}); | |||
} | |||
}) | |||
.catch(() => { | |||
this.$dialog({ | |||
message: '登录过期,请重新进入' | |||
}); | |||
}) | |||
.finally(() => {}); | |||
.catch(error => { | |||
console.log(error); | |||
}); | |||
}, | |||
// 计算百分比 | |||
calcPercentage(value, total) { | |||
@@ -1306,32 +1193,32 @@ export default { | |||
this.current = index; | |||
this.currentDays = value; | |||
this.$store.commit('tabClick', index); | |||
/* let currentDate = new Date(); */ | |||
let currentDate = new Date(); | |||
this.surveyTitle = value === 7 ? '7天概览' : '30天概览'; | |||
if (value === 7) { | |||
/* let dateList = this.getPostDate(currentDate, 6, true); */ | |||
this.getPsychologiclData('', /* dateList[0] */ '2023-11-15', /* dateList[1] */ '2023-11-21'); | |||
this.startDate = /* dateList[0] */ '2023-11-15'; | |||
this.endDate = /* dateList[1] */ '2023-11-21'; | |||
let dateList = this.getPostDate(currentDate, 6, true); | |||
this.getPsychologiclData('', dateList[0] /* '2023-11-15' */ /* dateList[1] */ /* '2023-11-21' */); | |||
this.startDate = dateList[0] /* '2023-11-15' */; | |||
this.endDate = dateList[1] /* '2023-11-21' */; | |||
} else if (value === 0) { | |||
// 今天 | |||
this.defaultOptions.xAxis.data = this.xAxisData; | |||
this.defaultOptions.series = this.defaultSeries; | |||
this.defaultOptions.series[0].data = this.emotionData; | |||
this.getPsychologiclData( | |||
this.selectDate ? this.selectDate : /* this.$dayjs(currentDate).format('YYYY-MM-DD') */ '2023-11-21' | |||
this.selectDate ? this.selectDate : this.$dayjs(currentDate).format('YYYY-MM-DD') /* '2023-11-21' */ | |||
); | |||
this.startDate = /* this.$dayjs(currentDate).format('YYYY-MM-DD') */ '2023-11-21'; | |||
this.endDate = /* this.$dayjs(currentDate).format('YYYY-MM-DD') */ '2023-11-21'; | |||
this.startDate = this.$dayjs(currentDate).format('YYYY-MM-DD') /* '2023-11-21' */; | |||
this.endDate = this.$dayjs(currentDate).format('YYYY-MM-DD') /* '2023-11-21' */; | |||
} else if (value === 30) { | |||
// 30天 | |||
this.defaultOptions.xAxis.data = this.xAxisData; | |||
this.defaultOptions.series = this.defaultSeries; | |||
this.defaultOptions.series[0].data = this.emotionData; | |||
/* let dateList = this.getPostDate(currentDate, 30, true); */ | |||
this.getPsychologiclData('', /* dateList[0] */ '2023-11-21', /* dateList[1] */ '2023-12-21'); | |||
this.startDate = /* dateList[0] */ '2023-11-21'; | |||
this.endDate = /* dateList[1] */ '2023-12-21'; | |||
let dateList = this.getPostDate(currentDate, 30, true); | |||
this.getPsychologiclData('', dateList[0] /* '2023-11-21' */, dateList[1] /* '2023-12-21' */); | |||
this.startDate = dateList[0] /* '2023-11-21' */; | |||
this.endDate = dateList[1] /* '2023-12-21' */; | |||
} else { | |||
// 周报菜单 | |||
this.getWeekResult(); | |||
@@ -1473,7 +1360,7 @@ export default { | |||
this.isPopup = false; | |||
}, | |||
getWeekResult() { | |||
this.$toast.loading('数据加载中'); | |||
ToastService.loading('数据加载中'); | |||
let baseUrl = | |||
process.env.NODE_ENV === 'production' ? 'https://dbmq.rzliot.com/auth_heart' : 'https://dbmq.rzliot.com/heart'; | |||
let reqUrl = `${baseUrl}/api/Data/GetWeekResult`; | |||
@@ -1500,7 +1387,7 @@ export default { | |||
}; | |||
}) | |||
.reverse(); | |||
this.$toast.success('数据加载完成'); | |||
ToastService.success('数据加载完成'); | |||
}); | |||
}, | |||
onClickItem(recordId) { | |||
@@ -35,12 +35,12 @@ | |||
<div class="title" @click="onRouterTo('emotionDetails')"> | |||
<p>今日情绪感知</p> | |||
<div> | |||
<p>4.28</p> | |||
<p>{{ now }}</p> | |||
<van-icon name="arrow" size="18" /> | |||
</div> | |||
</div> | |||
<ul> | |||
<li> | |||
<!-- <li> | |||
<h4>40</h4> | |||
<p>疲劳倾向</p> | |||
<span>无疲劳倾向</span> | |||
@@ -57,6 +57,12 @@ | |||
<p>焦虑倾向</p> | |||
<span>无焦虑倾向</span> | |||
<time>12:30</time> | |||
</li> --> | |||
<li v-for="(item, index) in psyDataList" :key="index"> | |||
<h4>{{ item.value || '--' }}</h4> | |||
<p>{{ item.name || '--' }}</p> | |||
<span>{{ item.result || '--' }}</span> | |||
<time>{{ item.time || '--' }}</time> | |||
</li> | |||
</ul> | |||
</div> | |||
@@ -65,7 +71,7 @@ | |||
<div class="title" @click="onRouterTo('signsDetails')"> | |||
<p>今体征感知</p> | |||
<div> | |||
<p>4.28</p> | |||
<p>{{ now }}</p> | |||
<van-icon name="arrow" size="18" /> | |||
</div> | |||
</div> | |||
@@ -200,6 +206,7 @@ | |||
import TabBar from '@/components/TabBar'; | |||
import { Calendar, Circle, Checkbox, CheckboxGroup } from 'vant'; | |||
import APICore from '@/api/core'; | |||
import APIPsy from '@/api/psychological'; | |||
export default { | |||
components: { | |||
TabBar, | |||
@@ -216,14 +223,66 @@ export default { | |||
maxDate: new Date(2023, 12, 18), | |||
currentRate1: 0, | |||
currentRate2: 0, | |||
result: [] | |||
result: [], | |||
uid: '2023101521270090082', | |||
psyDataList: [] | |||
}; | |||
}, | |||
computed: { | |||
now() { | |||
return this.$dayjs(new Date()).format('MM.DD'); | |||
} | |||
}, | |||
created() { | |||
this.getAuth(); | |||
}, | |||
mounted() {}, | |||
mounted() { | |||
this.getHomeData(); | |||
}, | |||
methods: { | |||
// 获取首页情绪数据 | |||
getHomeData() { | |||
let reqParams = { | |||
uid: this.uid, | |||
date: this.$dayjs(new Date()).format('YYYY-MM-DD') /* '2023-11-21' */ | |||
}; | |||
APIPsy.getHomeData(reqParams).then(res => { | |||
const data = res.data.response; | |||
if (!data) { | |||
return this.$toast.fail(res.data.msg); | |||
} | |||
this.psyDataList = [ | |||
// 2023.12.5 修改菜单顺序 | |||
// 疲劳指数 | |||
{ | |||
value: data.TirScore, | |||
name: '疲劳指数', | |||
class: 'tiredness', | |||
result: data.TirDesc, | |||
time: data.TirMeasureUpdateTime ? this.$dayjs(data.TirMeasureUpdateTime).format('HH:mm') : '', | |||
level: data.TirLevel | |||
}, | |||
// 压力指数 | |||
{ | |||
value: data.StressScore, | |||
name: '压力指数', | |||
class: 'stress', | |||
result: data.StressDesc, | |||
time: data.StressMeasureUpdateTime ? this.$dayjs(data.StressMeasureUpdateTime).format('HH:mm') : '', | |||
level: data.StressLevel | |||
}, | |||
// 抑郁 | |||
{ | |||
value: data.DepScore, | |||
name: '抑郁指数', | |||
class: 'depression', | |||
result: data.DepDesc, | |||
time: data.DepMeasureUpdateTime ? this.$dayjs(data.DepMeasureUpdateTime).format('HH:mm') : '', | |||
level: data.DepLevel | |||
} | |||
]; | |||
}); | |||
}, | |||
formatDate(date) { | |||
return `${date.getMonth() + 1}/${date.getDate()}`; | |||
}, | |||
@@ -1,224 +1,225 @@ | |||
.signs { | |||
min-height: 100vh; | |||
width: 100%; | |||
overflow: hidden; | |||
background-color: #fff; | |||
.main { | |||
min-height: 100vh; | |||
width: 100%; | |||
overflow: hidden; | |||
background-color: #fff; | |||
.main { | |||
position: relative; | |||
height: calc(100vh - 100px); | |||
overflow: scroll; | |||
padding-top: 100px; | |||
.date { | |||
padding: 20px 40px; | |||
color: #8b8b8b; | |||
display: flex; | |||
justify-content: space-between; | |||
align-items: center; | |||
/* justify-content: space-around; */ | |||
.left { | |||
font-size: 28px; | |||
} | |||
.right { | |||
font-size: 32px; | |||
} | |||
} | |||
.circle { | |||
position: relative; | |||
padding: 80px; | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
.van-circle { | |||
height: 200px !important; | |||
width: 200px !important; | |||
position: relative; | |||
height: calc(100vh - 100px); | |||
overflow: scroll; | |||
.date { | |||
padding: 20px 40px; | |||
color: #8B8B8B; | |||
.circle-text { | |||
height: 100%; | |||
padding: 0 20px; | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
.left { | |||
@include center(); | |||
font-size: 62px; | |||
color: #333; | |||
} | |||
.right { | |||
display: flex; | |||
justify-content: space-between; | |||
align-items: center; | |||
/* justify-content: space-around; */ | |||
.left{ | |||
font-size: 28px; | |||
justify-content: flex-start; | |||
align-self: center; | |||
flex-direction: column; | |||
img { | |||
height: 50px; | |||
width: 50px; | |||
margin: 0 10px; | |||
object-fit: contain; | |||
} | |||
.right { | |||
font-size: 32px; | |||
span { | |||
font-size: 18px; | |||
} | |||
} | |||
/* flex-direction: column; */ | |||
} | |||
.circle { | |||
position: relative; | |||
padding: 80px; | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
.van-circle { | |||
height: 200px !important; | |||
width: 200px !important; | |||
position: relative; | |||
.circle-text { | |||
height: 100%; | |||
padding: 0 20px; | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
.left { | |||
@include center(); | |||
font-size: 62px; | |||
color: #333; | |||
} | |||
.right { | |||
display: flex; | |||
justify-content: flex-start; | |||
align-self: center; | |||
flex-direction: column; | |||
img { | |||
height: 50px; | |||
width: 50px; | |||
margin: 0 10px; | |||
object-fit: contain; | |||
} | |||
span { | |||
font-size: 18px; | |||
} | |||
} | |||
/* flex-direction: column; */ | |||
} | |||
} | |||
.circle-white { | |||
position:absolute; | |||
bottom: 78px; | |||
right: 45%; | |||
height: 50px; | |||
width: 50px; | |||
border: 2px solid; | |||
border-radius: 50%; | |||
background: #fff; | |||
} | |||
} | |||
.circle-white { | |||
position: absolute; | |||
bottom: 78px; | |||
right: 45%; | |||
height: 50px; | |||
width: 50px; | |||
border: 2px solid; | |||
border-radius: 50%; | |||
background: #fff; | |||
} | |||
} | |||
.progress { | |||
position: relative; | |||
flex: 1; | |||
font-size: 30px; | |||
padding: 0 40px; | |||
display: flex; | |||
justify-content: space-between; | |||
align-items: center; | |||
.progress-circle { | |||
position: absolute; | |||
top: -12px; | |||
left: 0; | |||
height: 35px; | |||
width: 35px; | |||
background-color: #fff; | |||
border-radius: 50%; | |||
border: 12px solid; | |||
z-index: 99; | |||
} | |||
.state-item { | |||
width: 100%; | |||
.state-line { | |||
position: relative; | |||
height: 30px; | |||
font-size: 32px; | |||
&.low { | |||
border-top-left-radius: 20px; | |||
border-bottom-left-radius: 20px; | |||
} | |||
&.blue { | |||
background-color: $green; | |||
} | |||
&.hight { | |||
background-color: $com_red; | |||
border-top-right-radius: 20px; | |||
border-bottom-right-radius: 20px; | |||
} | |||
} | |||
.progress { | |||
position: relative; | |||
flex: 1; | |||
font-size: 30px; | |||
padding: 0 40px; | |||
display: flex; | |||
justify-content: space-between; | |||
align-items: center; | |||
.progress-circle { | |||
position: absolute; | |||
top: -12px; | |||
left: 0; | |||
height: 35px; | |||
width: 35px; | |||
background-color: #fff; | |||
border-radius: 50%; | |||
border: 12px solid; | |||
z-index: 99; | |||
} | |||
.state-item { | |||
width: 100%; | |||
.state-line { | |||
position: relative; | |||
height: 30px; | |||
font-size: 32px; | |||
&.low { | |||
border-top-left-radius: 20px; | |||
border-bottom-left-radius: 20px; | |||
} | |||
&.blue { | |||
background-color: $green; | |||
} | |||
&.hight { | |||
background-color: $com_red; | |||
border-top-right-radius: 20px; | |||
border-bottom-right-radius: 20px; | |||
} | |||
} | |||
.state-text { | |||
padding: 40px 0 40px 0; | |||
@include center(); | |||
color: #333; | |||
font-weight: bold; | |||
} | |||
} | |||
.state-text { | |||
padding: 40px 0 40px 0; | |||
@include center(); | |||
color: #333; | |||
font-weight: bold; | |||
} | |||
.statistics { | |||
position: relative; | |||
padding: 0px 28px 10px 28px; | |||
.list { | |||
flex: 1; | |||
width: 100%; | |||
display: flex; | |||
justify-content: space-around; | |||
align-items: center; | |||
font-size: 32px; | |||
.item { | |||
display: flex; | |||
justify-content: flex-start; | |||
align-items: flex-start; | |||
width: 126px; | |||
padding: 30px 60px 30px 20px; | |||
/* height: px2rem(136); */ | |||
flex-direction: column; | |||
border: 1px solid $border_color; | |||
border-radius: 30px; | |||
color: #fff; | |||
.top { | |||
font-size: 24px; | |||
} | |||
.middle { | |||
font-size: 48px; | |||
/* padding: 10px; */ | |||
} | |||
.bottom { | |||
font-size: 24px | |||
} | |||
.line { | |||
height: 3px; | |||
width: 100%; | |||
margin: 5px 0; | |||
background-color: #fff; | |||
@include center(); | |||
} | |||
} | |||
} | |||
} | |||
} | |||
.statistics { | |||
position: relative; | |||
padding: 0px 28px 10px 28px; | |||
.list { | |||
flex: 1; | |||
width: 100%; | |||
display: flex; | |||
justify-content: space-around; | |||
align-items: center; | |||
font-size: 32px; | |||
.item { | |||
display: flex; | |||
justify-content: flex-start; | |||
align-items: flex-start; | |||
width: 126px; | |||
padding: 30px 60px 30px 20px; | |||
/* height: px2rem(136); */ | |||
flex-direction: column; | |||
border: 1px solid $border_color; | |||
border-radius: 30px; | |||
color: #fff; | |||
.top { | |||
font-size: 24px; | |||
} | |||
.middle { | |||
font-size: 48px; | |||
/* padding: 10px; */ | |||
} | |||
.bottom { | |||
font-size: 24px; | |||
} | |||
.line { | |||
height: 3px; | |||
width: 100%; | |||
margin: 5px 0; | |||
background-color: #fff; | |||
@include center(); | |||
} | |||
} | |||
.warn-tips { | |||
padding: 40px 40px; | |||
display: flex; | |||
justify-content: flex-start; | |||
align-items: center; | |||
.left { | |||
img { | |||
height: 60px; | |||
width: 60px; | |||
object-fit: contain; | |||
margin-right: 30px; | |||
} | |||
} | |||
.right { | |||
font-size: 28px; | |||
.orange { | |||
color: #edb21d; | |||
} | |||
} | |||
} | |||
} | |||
.warn-tips { | |||
padding: 40px 40px; | |||
display: flex; | |||
justify-content: flex-start; | |||
align-items: center; | |||
.left { | |||
img { | |||
height: 60px; | |||
width: 60px; | |||
object-fit: contain; | |||
margin-right: 30px; | |||
} | |||
.tab-bar{ | |||
padding: 20px 40px; | |||
} | |||
.right { | |||
font-size: 28px; | |||
.orange { | |||
color: #edb21d; | |||
} | |||
} | |||
} | |||
.tab-bar { | |||
padding: 20px; | |||
position: relative; | |||
.date-tab-con { | |||
height: 50px; | |||
display: flex; | |||
justify-content: flex-start; | |||
align-items: center; | |||
background: #fff; | |||
border-top-left-radius: 40px; | |||
border-top-right-radius: 40px; | |||
border-bottom-left-radius: 40px; | |||
border-bottom-right-radius: 40px; | |||
.date-tab-list { | |||
display: flex; | |||
justify-content: space-around; | |||
align-items: center; | |||
color: #fff; | |||
flex: 1; | |||
height: 50px; | |||
.date-tab-item { | |||
position: relative; | |||
.date-tab-con { | |||
height: 50px; | |||
display: flex; | |||
justify-content: flex-start; | |||
align-items: center; | |||
background: #fff; | |||
border-top-left-radius: 40px; | |||
border-top-right-radius: 40px; | |||
border-bottom-left-radius: 40px; | |||
border-bottom-right-radius: 40px; | |||
.date-tab-list { | |||
display: flex; | |||
justify-content: space-around; | |||
align-items: center; | |||
color: #fff; | |||
flex: 1; | |||
height: 50px; | |||
.date-tab-item { | |||
position: relative; | |||
margin: 0 8px; | |||
height: 100%; | |||
width: 100%; | |||
border-radius: 40px; | |||
color: #6D6D6D; | |||
font-size: 28px; | |||
font-weight: bold; | |||
@include center(); | |||
background-color: #e6e6e6; | |||
img { | |||
height: 50px; | |||
width: 50px; | |||
padding: 0 16px; | |||
} | |||
.more { | |||
width: 20px; | |||
height: 12px; | |||
} | |||
/* &.active::after { | |||
margin: 0 8px; | |||
height: 100%; | |||
width: 100%; | |||
border-radius: 40px; | |||
color: #6d6d6d; | |||
font-size: 28px; | |||
font-weight: bold; | |||
@include center(); | |||
background-color: #e6e6e6; | |||
img { | |||
height: 50px; | |||
width: 50px; | |||
padding: 0 16px; | |||
} | |||
.more { | |||
width: 20px; | |||
height: 12px; | |||
} | |||
/* &.active::after { | |||
content: ''; | |||
width: 88px; | |||
position: absolute; | |||
@@ -227,20 +228,20 @@ | |||
box-sizing: border-box; | |||
border-bottom: 8px solid $green; | |||
} */ | |||
&.active { | |||
color: #fff; | |||
background-color: $green; | |||
} | |||
&.notClick { | |||
background-color: $border_color; | |||
color: #fff; | |||
border: 1px solid #fff; | |||
} | |||
} | |||
.date-tab-item:nth-child(3) { | |||
border-right: 1px solid #E0E0E0; | |||
} | |||
/* .date-tab-item:first-child { | |||
&.active { | |||
color: #fff; | |||
background-color: $green; | |||
} | |||
&.notClick { | |||
background-color: $border_color; | |||
color: #fff; | |||
border: 1px solid #fff; | |||
} | |||
} | |||
.date-tab-item:nth-child(3) { | |||
border-right: 1px solid #e0e0e0; | |||
} | |||
/* .date-tab-item:first-child { | |||
border-top-left-radius: 15px; | |||
border-bottom-left-radius: 15px; | |||
} | |||
@@ -248,139 +249,218 @@ | |||
border-top-right-radius: 15px; | |||
border-bottom-right-radius: 15px; | |||
} */ | |||
} | |||
img { | |||
height: 50xp; | |||
width: 50px; | |||
object-fit: contain; | |||
} | |||
} | |||
} | |||
.top { | |||
flex: 1; | |||
.title { | |||
display: flex; | |||
justify-content: space-between; | |||
align-items: center; | |||
padding: 0px 32px 20px 26px; | |||
font-size: 36px; | |||
.title-left { | |||
font-weight: bold; | |||
.van-icon { | |||
margin-left: 5px; | |||
font-size: 18px; | |||
} | |||
} | |||
} | |||
.monitoring-count { | |||
text-align: left; | |||
padding: 6px 28px; | |||
line-height: 40px; | |||
p { | |||
font-size: 24px; | |||
color: #8b8b8b; | |||
} | |||
} | |||
.pie-chart-con { | |||
flex: 1; | |||
padding: 10px 0 20px 0; | |||
display: flex; | |||
justify-content: space-between; | |||
align-items: flex-start; | |||
.pie-chart-left { | |||
position: relative; | |||
height: 300px; | |||
padding-left: 30px; | |||
width: 35%; | |||
@include center(); | |||
#pieChart { | |||
height: 212px; | |||
width: 212px; | |||
} | |||
} | |||
.pie-chart-right { | |||
height: 300px; | |||
width: 65%; | |||
padding-right: 40px; | |||
@include center(); | |||
.list { | |||
flex-direction: column; | |||
.item { | |||
width: 100%; | |||
display: flex; | |||
justify-content: space-between; | |||
align-items: center; | |||
font-size: 24px; | |||
padding: 18px 0; | |||
.item-left { | |||
display: flex; | |||
justify-content: flex-start; | |||
align-items: center; | |||
padding-right: 20px; | |||
.item-circle { | |||
height: 24px; | |||
width: 24px; | |||
margin: 0 8px; | |||
} | |||
span { | |||
font-size: 24px; | |||
} | |||
img { | |||
height: 50xp; | |||
width: 50px; | |||
object-fit: contain; | |||
.text { | |||
color: #000; | |||
font-size: 24px; | |||
} | |||
} | |||
.item-right { | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
} | |||
} | |||
} | |||
} | |||
.line-chart-con { | |||
height: 600px; | |||
padding: 20px; | |||
.line-chart { | |||
height: 580px; | |||
padding: 20px; | |||
background-color:#fff; | |||
border: 1px solid $com_light_green; | |||
border-radius: 40px; | |||
} | |||
} | |||
.echart-container { | |||
flex: 1; | |||
position: relative; | |||
min-height: 600px; | |||
background-color: #fff; | |||
padding: 0 20px; | |||
} | |||
.bottom { | |||
flex: 1; | |||
.result { | |||
padding: 20px 40px; | |||
.result-con { | |||
.title { | |||
span { | |||
font-size: 46px; | |||
font-weight: bold; | |||
} | |||
} | |||
.bottom { | |||
flex: 1; | |||
.result { | |||
padding: 20px 40px; | |||
.result-con { | |||
.title { | |||
span { | |||
font-size: 46px; | |||
font-weight: bold; | |||
} | |||
} | |||
.status { | |||
display: flex; | |||
flex-wrap: wrap; | |||
align-items: center; | |||
align-content: space-between; | |||
justify-content: space-between; | |||
width: 100%; | |||
margin: 20px 0; | |||
p { | |||
font-size: 52px; | |||
color: $green; | |||
font-weight: bold; | |||
} | |||
ul { | |||
display: flex; | |||
flex-wrap: wrap; | |||
align-items: center; | |||
justify-content: flex-start; | |||
li { | |||
width: 40px; | |||
height: 30px; | |||
border-radius: 20px; | |||
position: relative; | |||
& + li { | |||
margin-left: 10px; | |||
} | |||
&.toobad { | |||
background-color: #ff5f8b; | |||
&:after{ | |||
background-color: #ff5f8b; | |||
} | |||
} | |||
&.ordinary { | |||
background-color: #2ea7e0; | |||
&:after{ | |||
background-color: #2ea7e0; | |||
} | |||
} | |||
&.sameas { | |||
background-color: #8dc21f; | |||
&:after{ | |||
background-color: #8dc21f; | |||
} | |||
} | |||
&.excellent { | |||
background-color: #179b3b; | |||
&:after{ | |||
background-color: #179b3b; | |||
} | |||
} | |||
&.active { | |||
width: 240px; | |||
&:after { | |||
opacity: 1; | |||
} | |||
&:before { | |||
opacity: 1; | |||
} | |||
} | |||
&:after { | |||
content: ''; | |||
display: block; | |||
position: absolute; | |||
top: 50%; | |||
left: 50%; | |||
transform: translateX(-50%) translateY(-50%); | |||
width: 60px; | |||
height: 60px; | |||
opacity: 0; | |||
border-radius: 50%; | |||
} | |||
&:before { | |||
content: ''; | |||
display: block; | |||
position: absolute; | |||
top: 50%; | |||
left: 50%; | |||
transform: translateX(-50%) translateY(-50%); | |||
width: 35px; | |||
height: 35px; | |||
opacity: 0; | |||
border-radius: 50%; | |||
background-color:#fff; | |||
z-index: 2; | |||
} | |||
} | |||
} | |||
} | |||
.tips { | |||
font-size: 24px; | |||
} | |||
} | |||
} | |||
.status { | |||
display: flex; | |||
flex-wrap: wrap; | |||
align-items: center; | |||
align-content: space-between; | |||
justify-content: space-between; | |||
width: 100%; | |||
margin: 20px 0; | |||
p { | |||
font-size: 52px; | |||
color: $green; | |||
font-weight: bold; | |||
} | |||
.wran-tips { | |||
padding: 20px 40px 50px 40px; | |||
font-size: 24px; | |||
.tips-title { | |||
font-weight: bold; | |||
padding: 20px 0; | |||
color: #333; | |||
ul { | |||
display: flex; | |||
flex-wrap: wrap; | |||
align-items: center; | |||
justify-content: flex-start; | |||
li { | |||
width: 40px; | |||
height: 30px; | |||
border-radius: 20px; | |||
position: relative; | |||
& + li { | |||
margin-left: 10px; | |||
} | |||
&.toobad { | |||
background-color: #ff5f8b; | |||
&:after { | |||
background-color: #ff5f8b; | |||
} | |||
} | |||
&.ordinary { | |||
background-color: #2ea7e0; | |||
&:after { | |||
background-color: #2ea7e0; | |||
} | |||
} | |||
&.sameas { | |||
background-color: #8dc21f; | |||
&:after { | |||
background-color: #8dc21f; | |||
} | |||
} | |||
&.excellent { | |||
background-color: #179b3b; | |||
&:after { | |||
background-color: #179b3b; | |||
} | |||
} | |||
&.active { | |||
width: 240px; | |||
&:after { | |||
opacity: 1; | |||
} | |||
&:before { | |||
opacity: 1; | |||
} | |||
} | |||
&:after { | |||
content: ''; | |||
display: block; | |||
position: absolute; | |||
top: 50%; | |||
left: 50%; | |||
transform: translateX(-50%) translateY(-50%); | |||
width: 60px; | |||
height: 60px; | |||
opacity: 0; | |||
border-radius: 50%; | |||
} | |||
&:before { | |||
content: ''; | |||
display: block; | |||
position: absolute; | |||
top: 50%; | |||
left: 50%; | |||
transform: translateX(-50%) translateY(-50%); | |||
width: 35px; | |||
height: 35px; | |||
opacity: 0; | |||
border-radius: 50%; | |||
background-color: #fff; | |||
z-index: 2; | |||
} | |||
} | |||
} | |||
} | |||
.tips { | |||
font-size: 24px; | |||
} | |||
} | |||
} | |||
.wran-tips { | |||
padding: 20px 40px 50px 40px; | |||
font-size: 24px; | |||
.tips-title { | |||
font-weight: bold; | |||
padding: 20px 0; | |||
color: #333; | |||
} | |||
} | |||
} | |||
} | |||
} | |||
} |