chenJinxu
/
HealthStudentWeb
Observar 1
Favorito 0
Fork 0
Código Issues 0 Pull requests 0 Versões 0 Wiki Atividade
Ver código fonte

增加 vconsole调试插件 

增加 今日-情绪心理相关接口对接
增加 获取授权code
test
chenJinxu 11 meses atrás
pai
929f5b7897
commit
f9f74be132
10 arquivos alterados com 1838 adições e 1196 exclusões
Visão dividida
Opções de diferenças
Mostrar estatísticas Baixar arquivo de patch Baixar arquivo de diferenças
  1. +1
    -0
      package.json
  2. +23
    -0
      src/api/psychological.js
  3. +19
    -1
      src/main.js
  4. +16
    -4
      src/views/insight/index.vue
  5. +3
    -2
      src/views/login/login.vue
  6. +77
    -190
      src/views/today/emotionDetails.vue
  7. +64
    -5
      src/views/today/index.vue
  8. +486
    -505
      src/views/today/scss/emotion-details.scss
  9. +430
    -350
      src/views/today/scss/signs-details.scss
  10. +719
    -139
      src/views/today/signsDetails.vue

+ 1
- 0
package.json Ver arquivo

@@ -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",


+ 23
- 0
src/api/psychological.js Ver arquivo

@@ -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
});
}

+ 19
- 1
src/main.js Ver arquivo

@@ -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;


+ 16
- 4
src/views/insight/index.vue Ver arquivo

@@ -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() {
//初始化图表


+ 3
- 2
src/views/login/login.vue Ver arquivo

@@ -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 });
}
})


+ 77
- 190
src/views/today/emotionDetails.vue Ver arquivo

@@ -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) {


+ 64
- 5
src/views/today/index.vue Ver arquivo

@@ -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()}`;
},


+ 486
- 505
src/views/today/scss/emotion-details.scss
Diferenças do arquivo suprimidas por serem muito extensas
Ver arquivo


+ 430
- 350
src/views/today/scss/signs-details.scss Ver arquivo

@@ -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;
}
}
}
}
}
}

+ 719
- 139
src/views/today/signsDetails.vue
Diferenças do arquivo suprimidas por serem muito extensas
Ver arquivo


Escrever Pré-visualização
Carregando…
Cancelar
Salvar