|
|
|
@@ -0,0 +1,914 @@ |
|
|
|
<!-- --> |
|
|
|
|
|
|
|
<template> |
|
|
|
<div class="report "> |
|
|
|
<NavBar title="周报" @on-click-left="onNavBack" right-text=""> </NavBar> |
|
|
|
<!-- 日期切换 --> |
|
|
|
<div class="periodSwitch"> |
|
|
|
<div class="arrow arrowLeft"> |
|
|
|
<van-icon name="arrow-left" :color="isPreClick ? '' : '#e6e6e6'" @click="dateClick"></van-icon> |
|
|
|
</div> |
|
|
|
<div class="timearea">{{ currentRecord.name }}</div> |
|
|
|
<div class="arrow arrowRight"> |
|
|
|
<van-icon name="arrow" :color="isAddClick ? '' : '#e6e6e6'" @click="dateClick('add')"></van-icon> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 情绪切换 --> |
|
|
|
|
|
|
|
<div class="psy-tab-bar"> |
|
|
|
<div class="psy-tab-con"> |
|
|
|
<div class="psy-tab-list"> |
|
|
|
<div :class="['psy-tab-item', { active: psyCurrent === index, notClick: false }]" |
|
|
|
@click="onPsyTabClick(item, index)" v-for="(item, index) in psyList" :key="index"> |
|
|
|
<span>{{ item.text }}</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="main"> |
|
|
|
<div class="pie-chart-con"> |
|
|
|
<div class="pie-chart-left"> |
|
|
|
<div id="pieChart" ref="pieChart"></div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="pie-chart-right"> |
|
|
|
<div class="list"> |
|
|
|
<div class="item" v-for="(item, index) in pieRightList" :key="index"> |
|
|
|
<div class="item-left"> |
|
|
|
<div class="circle" :style="{ backgroundColor: item.color }"></div> |
|
|
|
|
|
|
|
<span class="text">{{ item.text || '--' }}</span> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="item-right"> |
|
|
|
<span :style="{ color: item.color }">{{ item.count ? item.count + '天' : `0天` }}</span> |
|
|
|
<label :style="{ color: item.color }">{{ '(' + item.percentage + ')' }}%</label> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="statistics"> |
|
|
|
<div class="list"> |
|
|
|
<div class="item" v-for="(item, index) in statisticsList" :key="index" |
|
|
|
:style="{ backgroundColor: item.bgColor }"> |
|
|
|
<div class="top"> |
|
|
|
<span>{{ item.label || '--' }}</span> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="middle"> |
|
|
|
<span>{{ item.value || '--' }}</span> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="bottom"> |
|
|
|
<span>{{ item.time || '--' }}</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="bottom"> |
|
|
|
|
|
|
|
<div class="echart-container"> |
|
|
|
<div class="echart"> |
|
|
|
<EchartBox echartId="charts" :outTitle="emoLegend.outTitle" rightRowType="in-line-block" height="200" |
|
|
|
width="200" :legend="emoLegend" :options="defaultOptions"></EchartBox> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="result"> |
|
|
|
<div class="result-con"> |
|
|
|
<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" |
|
|
|
:style="{ backgroundColor: item.color }"> |
|
|
|
<p> |
|
|
|
<span class="day">{{ item.days }}</span> |
|
|
|
<span class="day-text">天</span> |
|
|
|
</p> |
|
|
|
|
|
|
|
<p>{{ item.text }}</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="mood-list-no-data" v-else> |
|
|
|
<div class="no-data"> |
|
|
|
<img :src="noDataImg" alt /> |
|
|
|
<p>暂无数据</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import axios from 'axios'; |
|
|
|
import NavBar from '@/components/NavBar'; |
|
|
|
import { Signsmodel } from '@/config/models'; |
|
|
|
import EchartBox from '@/components/EchartBox'; |
|
|
|
export default { |
|
|
|
components: { |
|
|
|
NavBar, EchartBox |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
count: 0, |
|
|
|
isPreClick: true, |
|
|
|
isAddClick: true, |
|
|
|
clickFlag: true, //左右日期按钮是否给予点击 |
|
|
|
weekList: [], |
|
|
|
maxCount: '', |
|
|
|
currentRecord: {}, |
|
|
|
psyCurrent: 0, |
|
|
|
psyList: [ |
|
|
|
{ name: 'temperature', text: '体温', value: 1 }, |
|
|
|
{ name: 'heartrate', text: '心率', value: 0 }, |
|
|
|
{ name: 'step', text: '步数', value: 2 } |
|
|
|
], |
|
|
|
healthyType: '', |
|
|
|
emoName: '', |
|
|
|
currentEmoName: '', |
|
|
|
pieRightList: [ |
|
|
|
{ |
|
|
|
text: "无情绪倾向", |
|
|
|
count: 12, |
|
|
|
percentage: "80", |
|
|
|
color: "#179b3b" |
|
|
|
}, |
|
|
|
{ |
|
|
|
text: "轻度情绪倾向", |
|
|
|
count: 2, |
|
|
|
percentage: "80", |
|
|
|
color: "#8dc21f" |
|
|
|
}, |
|
|
|
{ |
|
|
|
text: "中度情绪倾向", |
|
|
|
count: 1, |
|
|
|
percentage: "80", |
|
|
|
color: "#2ea7e0" |
|
|
|
}, |
|
|
|
{ |
|
|
|
text: "重度情绪倾向", |
|
|
|
count: 1, |
|
|
|
percentage: "80", |
|
|
|
color: "#ff5f8b" |
|
|
|
} |
|
|
|
], |
|
|
|
pieEcharts: null, |
|
|
|
pieData: [], //饼状图数据 |
|
|
|
statisticsList: [ |
|
|
|
{ label: '最大值', value: '75', time: '08:15', bgColor: '#ff5f8b' }, |
|
|
|
{ label: '最小值', value: '40', time: '10:15', bgColor: '#189b3b' }, |
|
|
|
{ label: '最近值', value: '50', time: '18:15', bgColor: '#2ea7e0' } |
|
|
|
], |
|
|
|
emotionList: [ |
|
|
|
{ days: "5", text: "无情绪倾向", color: "#179b3b" }, |
|
|
|
{ days: "4", text: "轻度情绪倾向", color: "#8dc21f" }, |
|
|
|
{ days: "3", text: "中度情绪倾向", color: "#2ea7e0" }, |
|
|
|
{ days: "2", text: "重度情绪倾向", color: "#ff5f8b" } |
|
|
|
], |
|
|
|
} |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
|
|
|
|
pieOption() { |
|
|
|
return { |
|
|
|
tooltip: { |
|
|
|
trigger: 'item', |
|
|
|
textStyle: { |
|
|
|
fontSize: 16 |
|
|
|
}, |
|
|
|
position: 'right' |
|
|
|
}, |
|
|
|
legend: { |
|
|
|
top: '5%', |
|
|
|
left: 'center', |
|
|
|
show: false |
|
|
|
}, |
|
|
|
series: [ |
|
|
|
{ |
|
|
|
type: 'pie', |
|
|
|
radius: ['40%', '90%'], |
|
|
|
avoidLabelOverlap: false, |
|
|
|
startAngle: 270, // 设置逆时针渲染 |
|
|
|
itemStyle: { |
|
|
|
borderRadius: 10, |
|
|
|
borderColor: '#fff', |
|
|
|
borderWidth: 4, |
|
|
|
fontSize: 16 |
|
|
|
}, |
|
|
|
label: { |
|
|
|
show: false, |
|
|
|
position: 'center', |
|
|
|
fontSize: 16 |
|
|
|
}, |
|
|
|
emphasis: { |
|
|
|
label: { |
|
|
|
show: false, |
|
|
|
fontSize: 16, |
|
|
|
fontWeight: 'bold' |
|
|
|
} |
|
|
|
}, |
|
|
|
labelLine: { |
|
|
|
show: false |
|
|
|
}, |
|
|
|
data: this.pieData |
|
|
|
} |
|
|
|
] |
|
|
|
}; |
|
|
|
}, |
|
|
|
emoLegend() { |
|
|
|
if (this.healthyType === 0) { |
|
|
|
return { |
|
|
|
title: '', |
|
|
|
outTitle: `${this.emoName}数据图`, |
|
|
|
list: [ |
|
|
|
{ name: `${this.emoName}偏低`, color: '#2ea7e0' }, |
|
|
|
{ name: `${this.emoName}正常`, color: '#179b3b' }, |
|
|
|
{ name: `${this.emoName}偏高`, color: '#ff5f8b' } |
|
|
|
] |
|
|
|
}; |
|
|
|
} else if (this.healthyType === 1) { |
|
|
|
return { |
|
|
|
title: '', |
|
|
|
outTitle: `${this.emoName}数据图`, |
|
|
|
list: [ |
|
|
|
{ name: `${this.emoName}正常`, color: '#179b3b' }, |
|
|
|
{ name: `${this.emoName}偏高`, color: '#ff5f8b' } |
|
|
|
] |
|
|
|
}; |
|
|
|
} else { |
|
|
|
return { |
|
|
|
title: '', |
|
|
|
outTitle: `${this.emoName}数据图`, |
|
|
|
list: [ |
|
|
|
{ name: `${this.emoName}偏低`, color: '#2ea7e0' }, |
|
|
|
{ name: `${this.emoName}正常`, color: '#179b3b' }, |
|
|
|
{ name: `${this.emoName}偏高`, color: '#ff5f8b' } |
|
|
|
] |
|
|
|
}; |
|
|
|
} |
|
|
|
}, |
|
|
|
// 默认折线图配置，echarts 具体配置 见 https://echarts.apache.org/zh/option.html#title |
|
|
|
defaultOptions() { |
|
|
|
return { |
|
|
|
time: { |
|
|
|
useUTC: false |
|
|
|
}, |
|
|
|
grid: { |
|
|
|
show: true, |
|
|
|
borderWidth: 0, |
|
|
|
top: '10%', |
|
|
|
left: '5%', |
|
|
|
right: '10%', |
|
|
|
bottom: '20%', |
|
|
|
containLabel: true |
|
|
|
}, |
|
|
|
xAxis: { |
|
|
|
type: 'category', |
|
|
|
axisLine: { |
|
|
|
show: false |
|
|
|
}, |
|
|
|
textStyle: { |
|
|
|
fontSize: 10 |
|
|
|
}, |
|
|
|
axisTick: { |
|
|
|
show: false |
|
|
|
}, |
|
|
|
splitLine: { |
|
|
|
show: false, |
|
|
|
lineStyle: { |
|
|
|
color: '#ddd', |
|
|
|
width: 4 |
|
|
|
} |
|
|
|
}, |
|
|
|
nameLocation: 'center', |
|
|
|
axisLabel: { |
|
|
|
show: true, |
|
|
|
fontSize: 12, |
|
|
|
showMinLabel: true, //显示最小值 |
|
|
|
showMaxLabel: true, //显示最大值 |
|
|
|
marginBottom: 10 // 调整标签与轴线的距离 |
|
|
|
}, |
|
|
|
data: this.xAxisData |
|
|
|
}, |
|
|
|
dataZoom: [ |
|
|
|
{ |
|
|
|
start: 0, |
|
|
|
end: 100, |
|
|
|
textStyle: { |
|
|
|
color: '#FFF', |
|
|
|
fontSize: 14 |
|
|
|
}, |
|
|
|
show: true, |
|
|
|
height: 20, |
|
|
|
bottom: 8, |
|
|
|
handleStyle: { |
|
|
|
borderWidth: 4, |
|
|
|
borderCap: 'square' |
|
|
|
} |
|
|
|
} |
|
|
|
], |
|
|
|
tooltip: { |
|
|
|
trigger: 'axis', |
|
|
|
textStyle: { |
|
|
|
fontSize: 16, |
|
|
|
align: 'center' |
|
|
|
}, |
|
|
|
formatter: function (params) { |
|
|
|
return params[0].marker + params[0].name + '</br>' + params[0].value; |
|
|
|
} |
|
|
|
}, |
|
|
|
yAxis: { |
|
|
|
type: 'value', |
|
|
|
/* max: 100, |
|
|
|
min: 0, |
|
|
|
interval: 20, */ |
|
|
|
splitNumber: 1, |
|
|
|
boundaryGap: ['5%', '5%'], |
|
|
|
nameTextStyle: { |
|
|
|
fontSize: 13 |
|
|
|
}, |
|
|
|
alignTicks: false, |
|
|
|
axisTick: { |
|
|
|
show: false |
|
|
|
}, |
|
|
|
axisLabel: { |
|
|
|
show: true, |
|
|
|
fontSize: 13 |
|
|
|
}, |
|
|
|
splitLine: { |
|
|
|
show: false, |
|
|
|
lineStyle: { |
|
|
|
color: '#ddd', |
|
|
|
width: 1 |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
series: [ |
|
|
|
{ |
|
|
|
name: `无${this.emoName}倾向`, |
|
|
|
type: 'line', |
|
|
|
padding: 10, |
|
|
|
smooth: true, |
|
|
|
data: this.emotionData, |
|
|
|
symbol: 'circle', |
|
|
|
symbolSize: 10, |
|
|
|
itemStyle: { |
|
|
|
color: '#fff', |
|
|
|
borderWidth: 4 |
|
|
|
}, |
|
|
|
lineStyle: { |
|
|
|
width: 6, |
|
|
|
type: 'solid', |
|
|
|
color: '#189b3b' |
|
|
|
} |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: `轻度${this.emoName}倾向`, |
|
|
|
type: 'line', |
|
|
|
data: '' |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: `中度${this.emoName}倾向`, |
|
|
|
type: 'line', |
|
|
|
data: '' |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: `重度${this.emoName}倾向`, |
|
|
|
type: 'line', |
|
|
|
data: '' |
|
|
|
} |
|
|
|
] |
|
|
|
}; |
|
|
|
}, |
|
|
|
surveyTitle() { |
|
|
|
return this.params.dateType == 0 ? '本周概览' : '本月概览' |
|
|
|
} |
|
|
|
|
|
|
|
}, |
|
|
|
created() { |
|
|
|
this.loadParams(); |
|
|
|
this.initEchartText(); |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
this.$nextTick(() => { |
|
|
|
this.getWeekResult() |
|
|
|
}) |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
loadParams() { |
|
|
|
let params = this.$route.query; |
|
|
|
if (params) { |
|
|
|
this.params = params; |
|
|
|
this.emoName = Signsmodel[params.name].name; |
|
|
|
this.currentEmoName = params.name; |
|
|
|
} |
|
|
|
}, |
|
|
|
// 初始化图表的文字内容 |
|
|
|
initEchartText() { |
|
|
|
this.defaultSeries = [ |
|
|
|
{ |
|
|
|
name: ``, |
|
|
|
type: 'line', |
|
|
|
padding: 10, |
|
|
|
data: this.emotionData, |
|
|
|
symbol: 'circle', |
|
|
|
symbolSize: 12, // 拐点圆的大小 |
|
|
|
areaStyle: {} |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: `轻度${this.emoName}倾向`, |
|
|
|
type: 'line', |
|
|
|
padding: 10, |
|
|
|
data: '', |
|
|
|
symbol: 'circle', |
|
|
|
symbolSize: 12 // 拐点圆的大小 |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: `中度${this.emoName}倾向`, |
|
|
|
type: 'line', |
|
|
|
data: '' |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: `重度${this.emoName}倾向`, |
|
|
|
type: 'line', |
|
|
|
data: '' |
|
|
|
} |
|
|
|
]; |
|
|
|
/* this.pieRightList = this.pieRightList.map((item) => { |
|
|
|
item.text = item.text.replace("情绪", this.emoName); |
|
|
|
return item; |
|
|
|
}); */ |
|
|
|
}, |
|
|
|
onNavBack() { |
|
|
|
this.$router.back(); |
|
|
|
}, |
|
|
|
dateClick(type) { |
|
|
|
if (type == 'add') { |
|
|
|
if (this.count <= 0) { |
|
|
|
return; |
|
|
|
} |
|
|
|
this.count--; |
|
|
|
this.isPreClick = true; |
|
|
|
this.currentRecord = this.weekList.filter(item => { |
|
|
|
return item.count === this.count; |
|
|
|
})[0]; |
|
|
|
let date = this.weekList.filter(item => { |
|
|
|
return item.count === this.count; |
|
|
|
})[0].name; |
|
|
|
if (this.count <= 0) { |
|
|
|
this.isAddClick = false; |
|
|
|
} |
|
|
|
console.log("当前切换的日期", date); |
|
|
|
} else { |
|
|
|
// 上一个 |
|
|
|
if (this.count >= this.maxCount) { |
|
|
|
return; |
|
|
|
} |
|
|
|
this.count++; |
|
|
|
this.isAddClick = true; |
|
|
|
// 当前切换的日期 |
|
|
|
let date = this.weekList.filter(item => { |
|
|
|
return item.count === this.count; |
|
|
|
})[0].name; |
|
|
|
this.currentRecord = this.weekList.filter(item => { |
|
|
|
return item.count === this.count; |
|
|
|
})[0] |
|
|
|
console.log("当前切换的日期", date); |
|
|
|
if (this.count >= this.maxCount) { |
|
|
|
this.isPreClick = false; |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
getWeekResult() { |
|
|
|
let baseUrl = |
|
|
|
process.env.NODE_ENV === 'production' ? 'https://dbmq.rzliot.com/auth_heart' : 'https://dbmq.rzliot.com/heart'; |
|
|
|
let reqUrl = `${baseUrl}/api/Data/GetWeekResult`; |
|
|
|
let reqParams = { |
|
|
|
uid: this.$store.getters.uid, |
|
|
|
type: 1 |
|
|
|
}; |
|
|
|
axios |
|
|
|
.get(reqUrl, { |
|
|
|
params: { ...reqParams } |
|
|
|
/* headers: { 'AccessToken': this.$store.getters.ssjlToken } */ |
|
|
|
}) |
|
|
|
.then(res => { |
|
|
|
console.log('res', res); |
|
|
|
const data = res.data.response; |
|
|
|
this.weekList = data.reverse() |
|
|
|
.map((item, index) => { |
|
|
|
return { |
|
|
|
name: item.Name.replace('周报', '').replace(/-/g, '.').replace(/~/g, '-'), |
|
|
|
recordId: item.RecordId, |
|
|
|
summary: item.Summary, |
|
|
|
summaryLevel: item.SummaryLevel, |
|
|
|
count: index |
|
|
|
}; |
|
|
|
}) |
|
|
|
|
|
|
|
this.currentRecord = this.weekList[0]; |
|
|
|
this.count = 0; |
|
|
|
this.maxCount = data.length - 1; |
|
|
|
this.isAddClick = this.maxCount - this.count < this.maxCount; |
|
|
|
this.isPreClick = this.maxCount - this.count > 0; |
|
|
|
console.log("weekList", this.weekList, this.count); |
|
|
|
}); |
|
|
|
}, |
|
|
|
onPsyTabClick(item) { |
|
|
|
this.healthyType = item.value; |
|
|
|
this.psyCurrent = this.calcPsyTabindex(Signsmodel[item.name].type); |
|
|
|
this.emoName = Signsmodel[item.name].name; |
|
|
|
this.currentEmoName = item.name; |
|
|
|
}, |
|
|
|
calcPsyTabindex(type) { |
|
|
|
let psyIndex = ''; |
|
|
|
switch (type) { |
|
|
|
case 0: |
|
|
|
psyIndex = 1; |
|
|
|
break; |
|
|
|
case 1: |
|
|
|
psyIndex = 0; |
|
|
|
break; |
|
|
|
case 2: |
|
|
|
psyIndex = 2; |
|
|
|
break; |
|
|
|
default: |
|
|
|
break; |
|
|
|
} |
|
|
|
return psyIndex; |
|
|
|
}, |
|
|
|
initPieEchart() { |
|
|
|
if (this.pieEcharts != null && this.pieEcharts != '' && this.pieEcharts != undefined) { |
|
|
|
this.pieEcharts.dispose(); |
|
|
|
} |
|
|
|
this.pieEcharts = this.$echarts.init(this.$refs.pieChart); |
|
|
|
this.pieEcharts.setOption(this.pieOption); |
|
|
|
}, |
|
|
|
}, |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style scoped lang="scss"> |
|
|
|
.report { |
|
|
|
height: 100vh; |
|
|
|
width: 100%; |
|
|
|
overflow: hidden; |
|
|
|
background-color: #f5f5f5; |
|
|
|
font-family: Source Han Sans CN; |
|
|
|
|
|
|
|
.periodSwitch { |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
align-items: center; |
|
|
|
padding: 20px 40px; |
|
|
|
padding-bottom: 10px; |
|
|
|
padding-top: 100px; |
|
|
|
left: 0; |
|
|
|
|
|
|
|
.timearea { |
|
|
|
font-size: 28px; |
|
|
|
justify-self: center; |
|
|
|
color: gray; |
|
|
|
} |
|
|
|
|
|
|
|
.arrow { |
|
|
|
font-size: 45px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.psy-tab-bar { |
|
|
|
height: 60px; |
|
|
|
position: relative; |
|
|
|
margin: 20px 0 0 0; |
|
|
|
padding: 0 20px; |
|
|
|
|
|
|
|
.psy-tab-con { |
|
|
|
background-color: #eeeeee; |
|
|
|
border-top-left-radius: 40px; |
|
|
|
border-top-right-radius: 40px; |
|
|
|
border-bottom-left-radius: 40px; |
|
|
|
border-bottom-right-radius: 40px; |
|
|
|
|
|
|
|
.psy-tab-list { |
|
|
|
display: flex; |
|
|
|
justify-content: space-around; |
|
|
|
align-items: center; |
|
|
|
color: #fff; |
|
|
|
height: 50px; |
|
|
|
width: 100%; |
|
|
|
|
|
|
|
.psy-tab-item { |
|
|
|
position: relative; |
|
|
|
padding: 0 20px; |
|
|
|
color: #6d6d6d; |
|
|
|
height: 100%; |
|
|
|
width: 100%; |
|
|
|
font-size: 28px; |
|
|
|
border-radius: 40px; |
|
|
|
font-weight: bold; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
|
|
|
|
&.active { |
|
|
|
color: #fff; |
|
|
|
background-color: $green; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.main { |
|
|
|
height: calc(100vh - 150px); |
|
|
|
overflow: scroll; |
|
|
|
background-color: #fff; |
|
|
|
padding: 0 20px; |
|
|
|
|
|
|
|
.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; |
|
|
|
|
|
|
|
.circle { |
|
|
|
height: 24px; |
|
|
|
width: 24px; |
|
|
|
margin: 0 8px; |
|
|
|
} |
|
|
|
|
|
|
|
span { |
|
|
|
font-size: 24px; |
|
|
|
} |
|
|
|
|
|
|
|
.text { |
|
|
|
color: #000; |
|
|
|
font-size: 24px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.item-right { |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.statistics { |
|
|
|
|
|
|
|
/* padding: 40px 40px; */ |
|
|
|
.list { |
|
|
|
padding: 40px 40px; |
|
|
|
display: grid; |
|
|
|
grid-template-columns: repeat(3, 1fr); //定义了一个 3x3 的网格布 |
|
|
|
/* grid-template-rows: repeat(3, 1fr); */ |
|
|
|
gap: 40px; |
|
|
|
font-size: 32px; |
|
|
|
|
|
|
|
.item { |
|
|
|
display: flex; |
|
|
|
justify-content: flex-start; |
|
|
|
align-items: flex-start; |
|
|
|
padding: 30px; |
|
|
|
/* height: px2rem(136); */ |
|
|
|
flex-direction: column; |
|
|
|
border: 1px solid $border_color; |
|
|
|
border-radius: 40px; |
|
|
|
color: #fff; |
|
|
|
|
|
|
|
.top { |
|
|
|
font-size: 24px; |
|
|
|
} |
|
|
|
|
|
|
|
.middle { |
|
|
|
font-size: 48px; |
|
|
|
} |
|
|
|
|
|
|
|
.bottom { |
|
|
|
font-size: 18px; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.bottom { |
|
|
|
flex: 1; |
|
|
|
overflow: scroll; |
|
|
|
|
|
|
|
.echart-container { |
|
|
|
position: relative; |
|
|
|
min-height: 600px; |
|
|
|
background-color: #fff; |
|
|
|
padding: 0 10px; |
|
|
|
|
|
|
|
.echart { |
|
|
|
height: 200px; |
|
|
|
padding: 0 10px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.result { |
|
|
|
padding-bottom: 40px; |
|
|
|
|
|
|
|
.result-con { |
|
|
|
height: 100%; |
|
|
|
background-color: #fff; |
|
|
|
border-radius: 40px; |
|
|
|
overflow: hidden; |
|
|
|
|
|
|
|
&.reminder { |
|
|
|
padding: 0 32px 40px 32px; |
|
|
|
} |
|
|
|
|
|
|
|
.title { |
|
|
|
display: flex; |
|
|
|
justify-content: flex-start; |
|
|
|
align-items: flex-start; |
|
|
|
flex-direction: column; |
|
|
|
margin-bottom: 60px; |
|
|
|
|
|
|
|
span { |
|
|
|
font-size: 36px; |
|
|
|
font-weight: bold; |
|
|
|
} |
|
|
|
|
|
|
|
.font-28 { |
|
|
|
font-weight: 400; |
|
|
|
font-size: 24px; |
|
|
|
color: #8b8b8b; |
|
|
|
text-align: left; |
|
|
|
} |
|
|
|
|
|
|
|
.title-no-data { |
|
|
|
padding: 68px 0 26px 30px; |
|
|
|
} |
|
|
|
|
|
|
|
p { |
|
|
|
font-size: 24px; |
|
|
|
color: $green; |
|
|
|
} |
|
|
|
|
|
|
|
.title-emo { |
|
|
|
font-size: 48px; |
|
|
|
padding: 28px 0 42px 0; |
|
|
|
text-align: left; |
|
|
|
} |
|
|
|
|
|
|
|
.no-data { |
|
|
|
height: 500px; |
|
|
|
width: 100%; |
|
|
|
@include center(); |
|
|
|
flex-direction: column; |
|
|
|
|
|
|
|
img { |
|
|
|
height: 220px; |
|
|
|
width: 350px; |
|
|
|
} |
|
|
|
|
|
|
|
p { |
|
|
|
color: #999; |
|
|
|
font-size: 24px; |
|
|
|
padding: 40px 0 130px 0; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.title-text { |
|
|
|
padding: 68px 0 26px 30px; |
|
|
|
} |
|
|
|
|
|
|
|
.title-reminder { |
|
|
|
padding: 68px 0 0 0; |
|
|
|
} |
|
|
|
|
|
|
|
.friendly-reminder, |
|
|
|
.warm-reminder { |
|
|
|
display: flex; |
|
|
|
justify-content: flex-start; |
|
|
|
align-items: flex-start; |
|
|
|
flex-direction: column; |
|
|
|
margin-bottom: 20px; |
|
|
|
background-color: #f2f2f2; |
|
|
|
padding: 40px 38px 38px 28px; |
|
|
|
|
|
|
|
p { |
|
|
|
font-weight: bold; |
|
|
|
text-align: left; |
|
|
|
padding-bottom: 22px; |
|
|
|
font-size: 30px; |
|
|
|
} |
|
|
|
|
|
|
|
span { |
|
|
|
text-align: left; |
|
|
|
font-size: 24px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.mood-list { |
|
|
|
display: grid; |
|
|
|
grid-template-columns: repeat(2, auto); //定义了一个 2x2 的网格布 |
|
|
|
grid-template-rows: repeat(2, 1fr); |
|
|
|
gap: 42px; |
|
|
|
padding: 0 88px 40px 74px; |
|
|
|
|
|
|
|
.item { |
|
|
|
width: 274px; |
|
|
|
height: 220px; |
|
|
|
@include center(); |
|
|
|
flex-direction: column; |
|
|
|
border-radius: 40px; |
|
|
|
|
|
|
|
p { |
|
|
|
font-size: 24px; |
|
|
|
padding: 0; |
|
|
|
color: #fff; |
|
|
|
|
|
|
|
.day { |
|
|
|
padding: 10px; |
|
|
|
font-size: 56px; |
|
|
|
} |
|
|
|
|
|
|
|
.day-text { |
|
|
|
font-size: 24px; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.mood-list-no-data { |
|
|
|
height: 500px; |
|
|
|
width: 100%; |
|
|
|
|
|
|
|
.no-data { |
|
|
|
@include center(); |
|
|
|
flex-direction: column; |
|
|
|
|
|
|
|
img { |
|
|
|
height: 220px; |
|
|
|
width: 350px; |
|
|
|
} |
|
|
|
|
|
|
|
p { |
|
|
|
color: #999; |
|
|
|
font-size: 24px; |
|
|
|
padding: 40px 0 130px 0; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
/* @import url(); 引入css类 */ |
|
|
|
</style> |
