@@ -873,6 +873,18 @@ update | |||||
- 增加 无数据文字提示 | - 增加 无数据文字提示 | ||||
## v1.0.110 | ## v1.0.110 | ||||
`2023.12.13` | |||||
update | |||||
- 设备设置列表 | |||||
- 优化 全部接口响应完成才加载完成 | |||||
## v1.0.111 | |||||
`2023.12.15` | |||||
fix | |||||
- 设备设置列表 | |||||
- 修复 接口未响应完成提示加载完成 | |||||
## v1.0.112 | |||||
`2023.12.28` | `2023.12.28` | ||||
update | update | ||||
- 心理监测首页 | - 心理监测首页 | ||||
@@ -884,3 +896,27 @@ update | |||||
update | update | ||||
- 心理监测详情,周报 | - 心理监测详情,周报 | ||||
- 修改 legend图例位置 | - 修改 legend图例位置 | ||||
## v1.0.114 | |||||
`2024.1.3` | |||||
fix | |||||
- 心理监测详情 | |||||
- 修复 心理切换按钮导致 ”今天“ 日期参数异常的问题 | |||||
## v1.0.115 | |||||
`2024.1.4` | |||||
fix | |||||
- c1后台设备功耗查看页面 | |||||
- 修复 设备状态时间戳转换错误的问题 | |||||
## v1.0.116 | |||||
`2024.1.26` | |||||
update | |||||
- ‘焦虑’文字改成‘抑郁’ | |||||
## v1.0.117 | |||||
`2024.3.21` | |||||
update | |||||
- ‘抑郁’文字 通过页面传过来的参数 改成‘焦虑’,否则不变 |
@@ -7,7 +7,7 @@ | |||||
# @description: | # @description: | ||||
### | ### | ||||
npm -v | npm -v | ||||
npm config set registry https://registry.npm.taobao.org | |||||
npm config set registry https://registry.npmmirror.com | |||||
npm install | npm install | ||||
npm run build-dev | npm run build-dev | ||||
image_version=`date +%Y%m%d%H%M`; | image_version=`date +%Y%m%d%H%M`; | ||||
@@ -7,7 +7,7 @@ | |||||
# @description: | # @description: | ||||
### | ### | ||||
npm -v | npm -v | ||||
npm config set registry https://registry.npm.taobao.org | |||||
npm config set registry https://registry.npmmirror.com | |||||
npm install | npm install | ||||
npm run build | npm run build | ||||
image_version=$version; | image_version=$version; | ||||
@@ -8,7 +8,7 @@ | |||||
### | ### | ||||
#!/bin/bash | #!/bin/bash | ||||
npm -v | npm -v | ||||
npm config set registry https://registry.npm.taobao.org | |||||
npm config set registry https://registry.npmmirror.com | |||||
npm install | npm install | ||||
npm run build-test | npm run build-test | ||||
image_version=$version; | image_version=$version; | ||||
@@ -5,7 +5,7 @@ | |||||
* @FilePath: \TelpoH5FrontendWeb\src\config\models.js | * @FilePath: \TelpoH5FrontendWeb\src\config\models.js | ||||
* @description: | * @description: | ||||
*/ | */ | ||||
export const VERSION_MODEL = '1.0.114F'; //版本号 | |||||
export const VERSION_MODEL = '1.0.117F'; //版本号 | |||||
export const IMAGE_URL = { | export const IMAGE_URL = { | ||||
production: 'http://zfb.ssjlai.com/web/', | production: 'http://zfb.ssjlai.com/web/', | ||||
test: 'http://zfb.ssjlai.com/web/', | test: 'http://zfb.ssjlai.com/web/', | ||||
@@ -24,15 +24,16 @@ export const BaiduStatisticsModel = { | |||||
test: "https://hm.baidu.com/hm.js?edb76b471e997167b7782c1513382771", // 随手精灵百度流量统计 测试环境 | test: "https://hm.baidu.com/hm.js?edb76b471e997167b7782c1513382771", // 随手精灵百度流量统计 测试环境 | ||||
development: "https://hm.baidu.com/hm.js?edb76b471e997167b7782c1513382771", // 随手精灵百度流量统计 测试环境 | development: "https://hm.baidu.com/hm.js?edb76b471e997167b7782c1513382771", // 随手精灵百度流量统计 测试环境 | ||||
}; | }; | ||||
// 情绪模型 | |||||
// 抑郁文字 | |||||
export const EmotionModel = { | export const EmotionModel = { | ||||
// 抑郁 | // 抑郁 | ||||
depression: { | depression: { | ||||
name: '抑郁', | name: '抑郁', | ||||
type: 2, | type: 2, | ||||
title1: '抑郁倾向', | |||||
title1: `抑郁倾向`, | |||||
article1: `<p>设备所检测的是个体的抑郁倾向。通过将个人的生理特征(脉搏波、心率变异性等)和行为习惯(运动、作息等)与临床诊断为抑郁症的患者的相应特征进行对比,判断出个体的抑郁倾向(即抑郁症的可能性)程度。抑郁倾向持续的时间越长、程度越严重,代表患有抑郁症的风险就越大。</p>`, | article1: `<p>设备所检测的是个体的抑郁倾向。通过将个人的生理特征(脉搏波、心率变异性等)和行为习惯(运动、作息等)与临床诊断为抑郁症的患者的相应特征进行对比,判断出个体的抑郁倾向(即抑郁症的可能性)程度。抑郁倾向持续的时间越长、程度越严重,代表患有抑郁症的风险就越大。</p>`, | ||||
title2: '抑郁倾向算法原理', | |||||
title2: `抑郁倾向算法原理`, | |||||
article2: `<p>1.研究发现,抑郁症等情绪障碍可能会引起个体外周生理系统反应的钝化,因此患者可能在面临危险、压力等应激状态下表现出较低的生理反应唤醒水平。这一点能够通过皮肤电、心率变异性等生理特征的周期性变化来判断。</p> | article2: `<p>1.研究发现,抑郁症等情绪障碍可能会引起个体外周生理系统反应的钝化,因此患者可能在面临危险、压力等应激状态下表现出较低的生理反应唤醒水平。这一点能够通过皮肤电、心率变异性等生理特征的周期性变化来判断。</p> | ||||
<p>2.抑郁症等情绪障碍的患者会出现明显的失眠、运动少、和生物钟紊乱,算法能够有效分析判断出这些异常的行为特征。</p>` | <p>2.抑郁症等情绪障碍的患者会出现明显的失眠、运动少、和生物钟紊乱,算法能够有效分析判断出这些异常的行为特征。</p>` | ||||
@@ -14,9 +14,10 @@ import '@/assets/css/reset.scss'; | |||||
import dayjs from 'dayjs'; | import dayjs from 'dayjs'; | ||||
// ui库按需引入 | // ui库按需引入 | ||||
import 'vant/lib/index.css'; | import 'vant/lib/index.css'; | ||||
import { replaceAll } from '@/utils'; | |||||
// 引入echarts | // 引入echarts | ||||
import * as echarts from 'echarts'; | import * as echarts from 'echarts'; | ||||
import { BaiduStatisticsModel } from '@/config/models'; | |||||
import { BaiduStatisticsModel} from '@/config/models'; | |||||
import { | import { | ||||
Button, | Button, | ||||
Calendar, | Calendar, | ||||
@@ -128,6 +129,7 @@ Vue.config.productionTip = false; | |||||
Vue.prototype.$dayjs = dayjs; | Vue.prototype.$dayjs = dayjs; | ||||
Vue.prototype.$echarts = echarts; | Vue.prototype.$echarts = echarts; | ||||
Vue.prototype.$bus = new Vue(); | Vue.prototype.$bus = new Vue(); | ||||
Vue.prototype.$replaceAll = replaceAll; | |||||
router.afterEach((to, from, next) => { | router.afterEach((to, from, next) => { | ||||
// 创建百度统计js | // 创建百度统计js | ||||
setTimeout(()=>{ | setTimeout(()=>{ | ||||
@@ -24,6 +24,7 @@ export default new Vuex.Store({ | |||||
fromSsjl: '', | fromSsjl: '', | ||||
active: null, //点击左边树形图下标 | active: null, //点击左边树形图下标 | ||||
tabClick: '', //心理监测点击tab | tabClick: '', //心理监测点击tab | ||||
appType: '', //应用类型 | |||||
}, | }, | ||||
mutations: { | mutations: { | ||||
imei(state, imei) { | imei(state, imei) { | ||||
@@ -70,6 +71,11 @@ export default new Vuex.Store({ | |||||
state.tabClick = tabClick; | state.tabClick = tabClick; | ||||
window.localStorage[prefix + 'tabClick'] = tabClick; | window.localStorage[prefix + 'tabClick'] = tabClick; | ||||
}, | }, | ||||
appType(state, appType) { | |||||
state.appType = appType; | |||||
window.localStorage[prefix + 'appType'] = appType; | |||||
}, | |||||
}, | }, | ||||
getters: { | getters: { | ||||
@@ -117,7 +123,11 @@ export default new Vuex.Store({ | |||||
if (state.tabClick != '') return state.tabClick; | if (state.tabClick != '') return state.tabClick; | ||||
return window.localStorage[prefix + 'tabClick'] == null ? '' : window.localStorage[prefix + 'tabClick']; | return window.localStorage[prefix + 'tabClick'] == null ? '' : window.localStorage[prefix + 'tabClick']; | ||||
}, | }, | ||||
appType: state => { | |||||
if (state.appType != '') return state.appType; | |||||
return window.localStorage[prefix + 'appType'] == null ? '' : window.localStorage[prefix + 'appType']; | |||||
}, | |||||
}, | }, | ||||
actions: {}, | actions: {}, | ||||
modules: {} | modules: {} |
@@ -5,7 +5,7 @@ | |||||
* @FilePath: \AntpayFrontEnd\src\utils\index.js | * @FilePath: \AntpayFrontEnd\src\utils\index.js | ||||
* @description: 工具类 | * @description: 工具类 | ||||
*/ | */ | ||||
import store from "@/store"; | |||||
/** | /** | ||||
* 判断是否为空 | * 判断是否为空 | ||||
@@ -88,4 +88,34 @@ export function isShowAntpay(array) { | |||||
} else { | } else { | ||||
return false; | return false; | ||||
} | } | ||||
} | |||||
} | |||||
// 将传入内容的某个文字全部替换成指定的文字 | |||||
/** | |||||
* | |||||
* @param {*} target 目标字符串 | |||||
* @param {*} searchValue 要搜索和替换的子串 | |||||
* @param {*} replacement 替换的新字符串 | |||||
* @returns | |||||
*/ | |||||
export function replaceAll(target, searchValue, replacement) { | |||||
// 应用类型,目前1 是健康好蕴,其他则不替换 | |||||
const appTypeList = ['1']; | |||||
const appType = store.getters.appType; | |||||
if(appTypeList.indexOf(appType) > -1) { | |||||
if(isNotNull(target) && isNotNull(searchValue)) { | |||||
if(target.includes(searchValue)) { | |||||
return target.replace(new RegExp(searchValue, 'g'), replacement); | |||||
} else { | |||||
return target | |||||
} | |||||
} else { | |||||
return target | |||||
} | |||||
} else { | |||||
return target | |||||
} | |||||
} |
@@ -19,37 +19,20 @@ | |||||
<div class="action"> | <div class="action"> | ||||
<div class="left"> | <div class="left"> | ||||
<van-dropdown-menu> | <van-dropdown-menu> | ||||
<van-dropdown-item | |||||
style="min-width: 150px" | |||||
v-model="dayValue" | |||||
:options="dayOption" | |||||
@change="onChange" | |||||
/> | |||||
<van-dropdown-item style="min-width: 150px" v-model="dayValue" :options="dayOption" @change="onChange" /> | |||||
</van-dropdown-menu> | </van-dropdown-menu> | ||||
</div> | </div> | ||||
<div class="right"> | <div class="right"> | ||||
<div class="btn-container"> | <div class="btn-container"> | ||||
<van-button | |||||
:class="['btn', { active: btnActive === item.index }]" | |||||
@click="onClickBtn(item.index)" | |||||
v-for="(item, index) in btnList" | |||||
:key="index" | |||||
>{{ item.text }}</van-button | |||||
> | |||||
<van-button :class="['btn', { active: btnActive === item.index }]" @click="onClickBtn(item.index)" | |||||
v-for="(item, index) in btnList" :key="index">{{ item.text }}</van-button> | |||||
</div> | </div> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
<div | |||||
class="details-container" | |||||
v-if=" | |||||
(btnActive === 0 && data.length > 0) || | |||||
(tableData.length > 0 && btnActive === 1) | |||||
" | |||||
> | |||||
<p | |||||
class="last-time" | |||||
v-show="btnActive === 0 && params.title === 'Offline'" | |||||
> | |||||
<div class="details-container" v-if="(btnActive === 0 && data.length > 0) || | |||||
(tableData.length > 0 && btnActive === 1) | |||||
"> | |||||
<p class="last-time" v-show="btnActive === 0 && params.title === 'Offline'"> | |||||
最近一次离线时间:{{ lastTime }} | 最近一次离线时间:{{ lastTime }} | ||||
</p> | </p> | ||||
<Echart :option="chartOption" v-show="btnActive === 0" /> | <Echart :option="chartOption" v-show="btnActive === 0" /> | ||||
@@ -103,7 +86,7 @@ export default { | |||||
created() { | created() { | ||||
this.loadParams(); | this.loadParams(); | ||||
}, | }, | ||||
mounted() {}, | |||||
mounted() { }, | |||||
methods: { | methods: { | ||||
loadParams() { | loadParams() { | ||||
let params = this.$route.query; | let params = this.$route.query; | ||||
@@ -141,6 +124,7 @@ export default { | |||||
) { | ) { | ||||
this.filterData = | this.filterData = | ||||
data[this.echarts.type].data /* .list.propertyInfo */; | data[this.echarts.type].data /* .list.propertyInfo */; | ||||
console.log("this.filterData", this.filterData); | |||||
} else if (this.echarts.type === "offline") { | } else if (this.echarts.type === "offline") { | ||||
this.filterData = data.Offline.data; | this.filterData = data.Offline.data; | ||||
} | } | ||||
@@ -398,24 +382,22 @@ export default { | |||||
}, | }, | ||||
formatter: function (params) { | formatter: function (params) { | ||||
return `${params[0].marker}${params[0].data.time}</br> | return `${params[0].marker}${params[0].data.time}</br> | ||||
${ | |||||
params[0].data.type === "offline" | |||||
? "最近离线时间:" + params[0].data.lastTime | |||||
: "" | |||||
}</br> | |||||
${ | |||||
params[0].data.type === "offline" | |||||
? "离线次数:" + params[0].data.value + "次" | |||||
: params[0].data.type === "status" | |||||
? "rssi值:" + params[0].data.value | |||||
: "电量:" + params[0].data.value | |||||
}`; | |||||
${params[0].data.type === "offline" | |||||
? "最近离线时间:" + params[0].data.lastTime | |||||
: "" | |||||
}</br> | |||||
${params[0].data.type === "offline" | |||||
? "离线次数:" + params[0].data.value + "次" | |||||
: params[0].data.type === "status" | |||||
? "rssi值:" + params[0].data.value | |||||
: "电量:" + params[0].data.value | |||||
}`; | |||||
}, | }, | ||||
}, | }, | ||||
}; | }; | ||||
} | } | ||||
}) | }) | ||||
.catch(() => {}) | |||||
.catch(() => { }) | |||||
.finally(() => { | .finally(() => { | ||||
this.$toast.clear(); | this.$toast.clear(); | ||||
}); | }); | ||||
@@ -1,164 +1,210 @@ | |||||
<template> | <template> | ||||
<div class="psychological-main-container"> | |||||
<van-nav-bar title="今日情绪" :border="true" @click-left="onNavBack"> | |||||
<template #left> | |||||
<div v-show="isShowLeft" class="nav-bar-title"> | |||||
<van-icon name="arrow-left" size="23"/><span>返回</span> | |||||
</div> | |||||
</template> | |||||
<template #title> | |||||
<span>今日情绪</span> | |||||
</template> | |||||
</van-nav-bar> | |||||
<div class="main"> | |||||
<div class="list"> | |||||
<div v-for="(item,index) in healhtList" :key="index" :class="['item', item.class]" @click="onClick(item)"> | |||||
<p class="health-value" :style="{ color: calcColor(item.value) }"> | |||||
{{ item.value || '--' }} | |||||
</p> | |||||
<p class="health-name"> | |||||
{{ item.name || '--'}} | |||||
</p> | |||||
<div class="health-result"> | |||||
<div :class="['left', item.class]"> | |||||
<p class="result"> | |||||
{{ item.result || '暂无数据'}} | |||||
</p> | |||||
</div> | |||||
<div class="right"> | |||||
<!-- img --> | |||||
<img :src="item.img" alt=""> | |||||
</div> | |||||
</div> | |||||
<div class="health-time"> | |||||
<p class="time">{{ item.time || '--' }}</p> | |||||
</div> | |||||
</div> | |||||
<div class="psychological-main-container"> | |||||
<van-nav-bar title="今日情绪" :border="true" @click-left="onNavBack"> | |||||
<template #left> | |||||
<div v-show="isShowLeft" class="nav-bar-title"> | |||||
<van-icon name="arrow-left" size="23" /><span>返回</span> | |||||
</div> | |||||
</template> | |||||
<template #title> | |||||
<span>今日情绪</span> | |||||
</template> | |||||
</van-nav-bar> | |||||
<div class="main"> | |||||
<div class="list"> | |||||
<div v-for="(item, index) in healhtList" :key="index" :class="['item', item.class]" @click="onClick(item)"> | |||||
<p class="health-value" :style="{ color: calcColor(item.value) }"> | |||||
{{ item.value || "--" }} | |||||
</p> | |||||
<p class="health-name"> | |||||
{{ item.name || "--" }} | |||||
</p> | |||||
<div class="health-result"> | |||||
<div :class="['left', item.class]"> | |||||
<p class="result"> | |||||
{{ item.result || "暂无数据" }} | |||||
</p> | |||||
</div> | |||||
<div class="right"> | |||||
<!-- img --> | |||||
<img :src="item.img" alt="" /> | |||||
</div> | </div> | ||||
</div> | |||||
<div class="health-time"> | |||||
<p class="time">{{ item.time || "--" }}</p> | |||||
</div> | |||||
</div> | </div> | ||||
</div> | |||||
</div> | </div> | ||||
</div> | |||||
</template> | </template> | ||||
<script> | <script> | ||||
import axios from "axios"; | import axios from "axios"; | ||||
import { isNotNull } from "@/utils/index"; | import { isNotNull } from "@/utils/index"; | ||||
import { PsyBaseUrl } from "@/config/models"; | |||||
import { PsyBaseUrl, } from "@/config/models"; | |||||
import APICore from "@/api/core"; | import APICore from "@/api/core"; | ||||
export default { | export default { | ||||
name: 'psychologicalMain', | |||||
data(){ | |||||
return { | |||||
healhtList: [ | |||||
/* { value: 40, name: '抑郁指数', class: 'depression',result: '无抑郁倾向', time: '17:52', img: require('@/assets/img/regardless.png') }, | |||||
{ value: 55, name: '压力指数', class: 'stress', result: '轻度压力', time: '17:52', img: require('@/assets/img/regardless.png') }, | |||||
{ value: 75, name: '疲劳指数', class: 'tiredness', result: '中度疲劳', time: '17:52', img: require('@/assets/img/moderate.png') }, */ | |||||
], | |||||
uid: '', | |||||
routeDate: '', | |||||
params: {} | |||||
name: "psychologicalMain", | |||||
data() { | |||||
return { | |||||
} | |||||
healhtList: [ | |||||
/* { value: 40, name: '抑郁指数', class: 'depression',result: '无抑郁倾向', time: '17:52', img: require('@/assets/img/regardless.png') }, | |||||
{ value: 55, name: '压力指数', class: 'stress', result: '轻度压力', time: '17:52', img: require('@/assets/img/regardless.png') }, | |||||
{ value: 75, name: '疲劳指数', class: 'tiredness', result: '中度疲劳指数', time: '17:52', img: require('@/assets/img/moderate.png') }, */ | |||||
], | |||||
uid: "", | |||||
routeDate: "", | |||||
params: {}, | |||||
}; | |||||
}, | }, | ||||
computed: { | computed: { | ||||
isShowLeft() { | isShowLeft() { | ||||
return isNotNull(this.$route.query.fromUrl); | |||||
} | |||||
return isNotNull(this.$route.query.fromUrl); | |||||
}, | |||||
}, | }, | ||||
mounted() { | mounted() { | ||||
this.loadParams(); | this.loadParams(); | ||||
this.$store.commit('tabClick', 0); | |||||
window.document.title = '心理呵护'; | |||||
this.$store.commit("tabClick", 0); | |||||
window.document.title = "心理呵护"; | |||||
}, | }, | ||||
methods: { | methods: { | ||||
// 获取b端token | // 获取b端token | ||||
getAuth() { | getAuth() { | ||||
let manufactorId = "5bf13062-a41e-4d00-ba14-1101aad12650"; | |||||
let that = this; | |||||
return new Promise((resolve, reject) => { | |||||
APICore.getAuth({ manufactorId: manufactorId }).then(res => { | |||||
let data = res.data; | |||||
if(data.code === 0) { | |||||
resolve(res.data.data); | |||||
} else { | |||||
this.$toast.fail(`${data.message}`); | |||||
reject(''); | |||||
} | |||||
}) | |||||
}) | |||||
let manufactorId = "5bf13062-a41e-4d00-ba14-1101aad12650"; | |||||
let that = this; | |||||
return new Promise((resolve, reject) => { | |||||
APICore.getAuth({ manufactorId: manufactorId }).then((res) => { | |||||
let data = res.data; | |||||
if (data.code === 0) { | |||||
resolve(res.data.data); | |||||
} else { | |||||
this.$toast.fail(`${data.message}`); | |||||
reject(""); | |||||
} | |||||
}); | |||||
}); | |||||
}, | }, | ||||
// 加载路由参数 | // 加载路由参数 | ||||
async loadParams() { | async loadParams() { | ||||
let params = this.$route.query; | |||||
if (params) { | |||||
this.uid = params.uid; | |||||
this.routeDate = params.date; | |||||
this.params = params; | |||||
if(!params.accessToken) { | |||||
let authToken = await this.getAuth(); | |||||
this.$store.commit('ssjlToken', authToken); | |||||
} else { | |||||
this.$store.commit('ssjlToken', params.accessToken); | |||||
} | |||||
this.getHomeData(); | |||||
let params = this.$route.query; | |||||
if (params) { | |||||
this.uid = params.uid; | |||||
this.routeDate = params.date; | |||||
this.params = params; | |||||
if (params.appType) { | |||||
this.$store.commit("appType", params.appType); | |||||
} | } | ||||
if (!params.accessToken) { | |||||
let authToken = await this.getAuth(); | |||||
this.$store.commit("ssjlToken", authToken); | |||||
} else { | |||||
this.$store.commit("ssjlToken", params.accessToken); | |||||
} | |||||
this.getHomeData(); | |||||
} | |||||
}, | }, | ||||
// 获取首页数据 | // 获取首页数据 | ||||
getHomeData() { | getHomeData() { | ||||
this.$toast.loading('数据加载中'); | |||||
let reqUrl = `${PsyBaseUrl}/api/Data/GetHomeData`; | |||||
let reqParams = { | |||||
uid: this.uid, | |||||
date: this.routeDate || this.$dayjs(new Date()).format('YYYY-MM-DD') | |||||
}; | |||||
axios.get(reqUrl, { | |||||
params: { ...reqParams }, | |||||
headers: { 'AccessToken': this.$store.getters.ssjlToken } | |||||
}).then(res => { | |||||
const data = res.data.response; | |||||
if(!data) { | |||||
return this.$toast.fail(res.data.msg); | |||||
} | |||||
this.healhtList = [ | |||||
// 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, img: data.TirScore ? this.calcImg(data.TirLevel, 'tiredness') : '' }, | |||||
// 压力指数 | |||||
{ value: data.StressScore, name: '压力指数', class: 'stress', result: data.StressDesc, time: data.StressMeasureUpdateTime ? this.$dayjs(data.StressMeasureUpdateTime).format('HH:mm') : '', level: data.StressLevel, img: data.StressScore ? this.calcImg(data.StressLevel, 'stress') : ''}, | |||||
// 抑郁 | |||||
{ value: data.DepScore, name: '抑郁指数', class: 'depression', result: data.DepDesc, time: data.DepMeasureUpdateTime ? this.$dayjs(data.DepMeasureUpdateTime).format('HH:mm'): '', level: data.DepLevel, img: data.DepScore ? this.calcImg(data.DepLevel, 'depression') : ''}, | |||||
]; | |||||
this.$toast.success('数据加载完成'); | |||||
}).catch(() =>{}).finally(() => { }) | |||||
this.$toast.loading("数据加载中"); | |||||
let reqUrl = `${PsyBaseUrl}/api/Data/GetHomeData`; | |||||
let reqParams = { | |||||
uid: this.uid, | |||||
date: this.routeDate || this.$dayjs(new Date()).format("YYYY-MM-DD"), | |||||
}; | |||||
axios | |||||
.get(reqUrl, { | |||||
params: { ...reqParams }, | |||||
headers: { AccessToken: this.$store.getters.ssjlToken }, | |||||
}) | |||||
.then((res) => { | |||||
console.log("res", res); | |||||
const data = res.data.response; | |||||
if (!data) { | |||||
return this.$toast.fail(res.data.msg); | |||||
} | |||||
this.healhtList = [ | |||||
// 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, | |||||
img: data.TirScore | |||||
? this.calcImg(data.TirLevel, "tiredness") | |||||
: "", | |||||
}, | |||||
// 压力指数 | |||||
{ | |||||
value: data.StressScore, | |||||
name: "压力指数", | |||||
class: "stress", | |||||
result: data.StressDesc, | |||||
time: data.StressMeasureUpdateTime | |||||
? this.$dayjs(data.StressMeasureUpdateTime).format("HH:mm") | |||||
: "", | |||||
level: data.StressLevel, | |||||
img: data.StressScore | |||||
? this.calcImg(data.StressLevel, "stress") | |||||
: "", | |||||
}, | |||||
// 抑郁指数 | |||||
{ | |||||
value: data.DepScore, | |||||
name: this.$replaceAll(`抑郁指数`, '抑郁', '焦虑'), | |||||
class: "depression", | |||||
result: this.$replaceAll(data.DepDesc, '抑郁', '焦虑'), | |||||
time: data.DepMeasureUpdateTime | |||||
? this.$dayjs(data.DepMeasureUpdateTime).format("HH:mm") | |||||
: "", | |||||
level: data.DepLevel, | |||||
img: data.DepScore | |||||
? this.calcImg(data.DepLevel, "depression") | |||||
: "", | |||||
}, | |||||
]; | |||||
this.$toast.success("数据加载完成"); | |||||
}) | |||||
.catch(() => { }) | |||||
.finally(() => { }); | |||||
}, | }, | ||||
onClick(item) { | onClick(item) { | ||||
this.params.name = item.class; | |||||
this.$router.replace({ | |||||
name: 'psychological', | |||||
query: { | |||||
name: item.class, | |||||
uid: this.uid, | |||||
date: this.routeDate, | |||||
...this.params | |||||
} | |||||
}) | |||||
this.params.name = item.class; | |||||
this.$router.replace({ | |||||
name: "psychological", | |||||
query: { | |||||
name: item.class, | |||||
uid: this.uid, | |||||
date: this.routeDate, | |||||
...this.params, | |||||
}, | |||||
}); | |||||
}, | }, | ||||
onNavBack() { | onNavBack() { | ||||
if(this.isShowLeft) { | |||||
window.location.href = `${this.$route.query.fromUrl}/#/${ this.$route.query.fromMenu || 'device'}`; | |||||
} else { | |||||
this.$router.go(-1); | |||||
} | |||||
if (this.isShowLeft) { | |||||
window.location.href = `${this.$route.query.fromUrl}/#/${this.$route.query.fromMenu || "device" | |||||
}`; | |||||
} else { | |||||
this.$router.go(-1); | |||||
} | |||||
}, | }, | ||||
// 计算表情 | // 计算表情 | ||||
calcImg(level, name) { | calcImg(level, name) { | ||||
let imgUrl = ''; | |||||
/* imgUrl = require(`@/assets/img/psychological/${name}_${level}.png`); */ | |||||
let numLevel = Number(level); | |||||
console.log(`@/assets/img/psychological/${name}_${numLevel}.png`); | |||||
imgUrl = require(`@/assets/img/psychological/${name}_${numLevel + 1}.png`); | |||||
/* switch(level) { | |||||
let imgUrl = ""; | |||||
/* imgUrl = require(`@/assets/img/psychological/${name}_${level}.png`); */ | |||||
let numLevel = Number(level); | |||||
console.log(`@/assets/img/psychological/${name}_${numLevel}.png`); | |||||
imgUrl = require(`@/assets/img/psychological/${name}_${numLevel + 1 | |||||
}.png`); | |||||
/* switch(level) { | |||||
case '0': | case '0': | ||||
imgUrl = require(`@/assets/img/psychological/${name}_${numLevel + 1}.png`); | imgUrl = require(`@/assets/img/psychological/${name}_${numLevel + 1}.png`); | ||||
break; | break; | ||||
@@ -172,28 +218,28 @@ export default { | |||||
imgUrl = require('@/assets/img/moderate.png'); | imgUrl = require('@/assets/img/moderate.png'); | ||||
break; | break; | ||||
} */ | } */ | ||||
return imgUrl; | |||||
return imgUrl; | |||||
}, | }, | ||||
// 计算颜色 | // 计算颜色 | ||||
calcColor(value) { | calcColor(value) { | ||||
let color = ""; | |||||
if (value <= 40) { | |||||
color = "#62BD48"; | |||||
} else if (value > 40 && value <= 65) { | |||||
color = "#FEC350"; | |||||
} else if (value > 65 && value <= 80) { | |||||
color = "#F86825"; | |||||
} else if (value > 80) { | |||||
color = "#EB1D15"; | |||||
} else { | |||||
color = ""; | |||||
} | |||||
return color; | |||||
} | |||||
} | |||||
} | |||||
let color = ""; | |||||
if (value <= 40) { | |||||
color = "#62BD48"; | |||||
} else if (value > 40 && value <= 65) { | |||||
color = "#FEC350"; | |||||
} else if (value > 65 && value <= 80) { | |||||
color = "#F86825"; | |||||
} else if (value > 80) { | |||||
color = "#EB1D15"; | |||||
} else { | |||||
color = ""; | |||||
} | |||||
return color; | |||||
}, | |||||
}, | |||||
}; | |||||
</script> | </script> | ||||
<style scoped lang="scss"> | <style scoped lang="scss"> | ||||
@import "./index.scss"; | |||||
@import "./index.scss"; | |||||
</style> | </style> |
@@ -4,7 +4,7 @@ $newBlue: #638EE4; | |||||
width: 100%; | width: 100%; | ||||
overflow: hidden; | overflow: hidden; | ||||
background-color: #fff; | background-color: #fff; | ||||
.tab-bar { | |||||
.tab-bar{ | |||||
width: 100%; | width: 100%; | ||||
position: relative; | position: relative; | ||||
.date-tab-con { | .date-tab-con { | ||||
@@ -68,9 +68,45 @@ $newBlue: #638EE4; | |||||
} | } | ||||
} | } | ||||
} | } | ||||
.psy-tab-bar { | |||||
height: 40px; | |||||
position: relative; | |||||
margin: 5px 0; | |||||
padding: 0 10px; | |||||
.psy-tab-con { | |||||
background-color: #EEEEEE; | |||||
border-top-left-radius: 20px; | |||||
border-top-right-radius: 20px; | |||||
border-bottom-left-radius: 20px; | |||||
border-bottom-right-radius: 20px; | |||||
.psy-tab-list { | |||||
display: flex; | |||||
justify-content: space-around; | |||||
align-items: center; | |||||
color: #fff; | |||||
height: 40px; | |||||
width: 100%; | |||||
/* background-color: red; */ | |||||
.psy-tab-item { | |||||
position: relative; | |||||
padding: 0 10px; | |||||
color: #6D6D6D; | |||||
height: 100%; | |||||
width: 100%; | |||||
font-size: 18px; | |||||
border-radius: 20px; | |||||
@include center(); | |||||
&.active { | |||||
color: #FFFFFF; | |||||
background-color: #638EE4; | |||||
} | |||||
} | |||||
} | |||||
} | |||||
} | |||||
.main { | .main { | ||||
position: relative; | position: relative; | ||||
height: calc(100vh - 90px); | |||||
height: calc(100vh - 150px); | |||||
overflow: scroll; | overflow: scroll; | ||||
.top { | .top { | ||||
flex: 1; | flex: 1; | ||||
@@ -334,7 +370,7 @@ $newBlue: #638EE4; | |||||
} | } | ||||
&.report { | &.report { | ||||
position: relative; | position: relative; | ||||
height: calc(100vh - 90px); | |||||
height: calc(100vh - 150px); | |||||
overflow: scroll; | overflow: scroll; | ||||
background-color: #f5f5f5; | background-color: #f5f5f5; | ||||
.content { | .content { | ||||
@@ -6,226 +6,235 @@ | |||||
* @description: | * @description: | ||||
--> | --> | ||||
<template> | <template> | ||||
<div class="report-main"> | |||||
<van-nav-bar title="心理监测" :border="true" :left-arrow="true" @click-left="onNavBack"> | |||||
<template #left> | |||||
<van-icon name="arrow-left" size="24" style="padding: 0" /> | |||||
</template> | |||||
</van-nav-bar> | |||||
<div class="main"> | |||||
<div class="tabs"></div> | |||||
<div class="content"> | |||||
<div class="list" v-if="weekList"> | |||||
<div | |||||
class="item" | |||||
v-for="(item, index) in weekList" | |||||
:key="index" | |||||
@click="onClickItem(item.recordId)" | |||||
> | |||||
<div class="left"> | |||||
<img :src="weekImg" alt /> | |||||
<div class="middle"> | |||||
<div class="title"> | |||||
<span>周报</span> | |||||
<p>{{ item.name }}</p> | |||||
</div> | |||||
<div class="overall"> | |||||
<div class="left"> | |||||
<span>总评</span> | |||||
<p>{{ item. summary}}</p> | |||||
</div> | |||||
</div> | |||||
<!-- <div class="trend"> | |||||
<div class="report-main"> | |||||
<van-nav-bar | |||||
title="心理监测" | |||||
:border="true" | |||||
:left-arrow="true" | |||||
@click-left="onNavBack" | |||||
> | |||||
<template #left> | |||||
<van-icon name="arrow-left" size="24" style="padding: 0" /> | |||||
</template> | |||||
</van-nav-bar> | |||||
<div class="main"> | |||||
<div class="tabs"></div> | |||||
<div class="content"> | |||||
<div class="list" v-if="weekList"> | |||||
<div | |||||
class="item" | |||||
v-for="(item, index) in weekList" | |||||
:key="index" | |||||
@click="onClickItem(item.recordId)" | |||||
> | |||||
<div class="left"> | |||||
<img :src="weekImg" alt /> | |||||
<div class="middle"> | |||||
<div class="title"> | |||||
<span>周报</span> | |||||
<p>{{ item.name }}</p> | |||||
</div> | |||||
<div class="overall"> | |||||
<div class="left"> | |||||
<span>总评</span> | |||||
<p>{{ item.summary }}</p> | |||||
</div> | |||||
</div> | |||||
<!-- <div class="trend"> | |||||
<p>( <span>无抑郁倾向</span><span>5%</span>,<span>轻度抑郁倾向</span> <span>5%</span> )</p> | <p>( <span>无抑郁倾向</span><span>5%</span>,<span>轻度抑郁倾向</span> <span>5%</span> )</p> | ||||
</div>--> | </div>--> | ||||
</div> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
<div class="right"> | |||||
<img :src="moreImg" alt /> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
<div class="list no-data" v-else> | |||||
<img src="../../../../assets/img/no_data_01.png" alt /> | |||||
<p>暂无数据</p> | |||||
</div> | |||||
<div class="right"> | |||||
<img :src="moreImg" alt /> | |||||
</div> | </div> | ||||
</div> | |||||
</div> | |||||
<div class="list no-data" v-else> | |||||
<img src="../../../../assets/img/no_data_01.png" alt /> | |||||
<p>暂无数据</p> | |||||
</div> | </div> | ||||
</div> | |||||
</div> | </div> | ||||
</div> | |||||
</template> | </template> | ||||
<script> | <script> | ||||
import { EmotionModel, PsyBaseUrl } from "@/config/models"; | import { EmotionModel, PsyBaseUrl } from "@/config/models"; | ||||
import axios from "axios"; | import axios from "axios"; | ||||
export default { | export default { | ||||
name:'', | |||||
data(){ | |||||
return { | |||||
active: 0, | |||||
tabImgUrl: require("@/assets/img/psychological/statistical_form.png"), | |||||
selectDownImg: require("@/assets/img/psychological/select_down.png"), | |||||
weekImg: require("@/assets/img/psychological/week_report.png"), | |||||
moreImg: require("@/assets/img/psychological/more.png"), | |||||
weekList: [], | |||||
uid: '', | |||||
emoName: '', | |||||
} | |||||
name: "", | |||||
data() { | |||||
return { | |||||
active: 0, | |||||
tabImgUrl: require("@/assets/img/psychological/statistical_form.png"), | |||||
selectDownImg: require("@/assets/img/psychological/select_down.png"), | |||||
weekImg: require("@/assets/img/psychological/week_report.png"), | |||||
moreImg: require("@/assets/img/psychological/more.png"), | |||||
weekList: [], | |||||
uid: "", | |||||
emoName: "", | |||||
}; | |||||
}, | }, | ||||
methods: { | methods: { | ||||
onNavBack() {}, | onNavBack() {}, | ||||
loadParams() { | loadParams() { | ||||
let params = this.$route.query; | |||||
if (params) { | |||||
this.emoName = EmotionModel[params.name].name; | |||||
this.emoType = EmotionModel[params.name].type; | |||||
this.uid = params.uid; | |||||
} | |||||
let params = this.$route.query; | |||||
if (params) { | |||||
this.emoName = EmotionModel[params.name].name; | |||||
this.emoType = EmotionModel[params.name].type; | |||||
this.uid = params.uid; | |||||
} | |||||
}, | }, | ||||
onClickItem(recordId) { | onClickItem(recordId) { | ||||
this.$router.push({ | |||||
name: 'psychologicalReport', | |||||
query: { | |||||
recordId: recordId, | |||||
name: 'depression', | |||||
isShowLeft: true | |||||
} | |||||
}) | |||||
this.$router.push({ | |||||
name: "psychologicalReport", | |||||
query: { | |||||
recordId: recordId, | |||||
name: "depression", | |||||
isShowLeft: true, | |||||
}, | |||||
}); | |||||
}, | }, | ||||
getWeekResult() { | getWeekResult() { | ||||
this.$toast.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`; | |||||
let reqParams = { | |||||
uid: /* this.uid */'2023101521270090082', | |||||
type: this.emoType | |||||
}; | |||||
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.map(item => { | |||||
return { | |||||
name: item.Name.replace('周报', ''), | |||||
recordId: item.RecordId, | |||||
summary: item.Summary, | |||||
type: this.emoType | |||||
} | |||||
}); | |||||
this.$toast.success('数据加载完成'); | |||||
this.$toast.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`; | |||||
let reqParams = { | |||||
uid: /* this.uid */ "2023101521270090082", | |||||
type: this.emoType, | |||||
}; | |||||
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.map((item) => { | |||||
return { | |||||
name: item.Name.replace("周报", ""), | |||||
recordId: item.RecordId, | |||||
summary: item.Summary, | |||||
type: this.emoType, | |||||
}; | |||||
}); | |||||
this.$toast.success("数据加载完成"); | |||||
}); | |||||
}, | |||||
}, | }, | ||||
mounted() { | mounted() { | ||||
this.loadParams(); | this.loadParams(); | ||||
this.getWeekResult(); | this.getWeekResult(); | ||||
} | |||||
} | |||||
}, | |||||
}; | |||||
</script> | </script> | ||||
<style scoped lang="scss"> | <style scoped lang="scss"> | ||||
.report-main { | .report-main { | ||||
height: 100vh; | |||||
width: 100%; | |||||
overflow: hidden; | |||||
background-color: #f5f5f5; | |||||
.main { | |||||
height: calc(100vh - 45px); | |||||
overflow: scroll; | |||||
.content { | |||||
position: relative; | |||||
.list { | |||||
.item { | |||||
display: flex; | |||||
justify-content: space-between; | |||||
align-items: flex-end; | |||||
padding: 34px 15px; | |||||
background-color: #fff; | |||||
margin-bottom: 11px; | |||||
.left { | |||||
display: flex; | |||||
justify-content: flex-start; | |||||
align-items: flex-start; | |||||
img { | |||||
height: 25px; | |||||
width: 25px; | |||||
} | |||||
.middle { | |||||
.title, | |||||
.overall, | |||||
.trend { | |||||
display: flex; | |||||
justify-content: flex-start; | |||||
align-items: center; | |||||
padding-left: 13px; | |||||
span, | |||||
p { | |||||
font-size: 18px; | |||||
font-family: Source Han Sans CN; | |||||
font-weight: 400; | |||||
color: #8d8d8d; | |||||
line-height: 30px; | |||||
} | |||||
} | |||||
.title { | |||||
span { | |||||
padding-right: 20px; | |||||
} | |||||
p { | |||||
color: #282828; | |||||
} | |||||
} | |||||
.overall { | |||||
display: flex; | |||||
justify-content: space-between; | |||||
align-items: center; | |||||
width: 100%; | |||||
.left { | |||||
p { | |||||
padding-left: 20px; | |||||
font-weight: bold; | |||||
} | |||||
} | |||||
.right { | |||||
img { | |||||
height: 15px; | |||||
width: 9px; | |||||
} | |||||
} | |||||
} | |||||
.trend { | |||||
align-items: flex-start; | |||||
text-align: left; | |||||
} | |||||
} | |||||
} | |||||
.right { | |||||
img { | |||||
width: 9px; | |||||
height: 15px; | |||||
} | |||||
} | |||||
height: 100vh; | |||||
width: 100%; | |||||
overflow: hidden; | |||||
background-color: #f5f5f5; | |||||
.main { | |||||
height: calc(100vh - 45px); | |||||
overflow: scroll; | |||||
.content { | |||||
position: relative; | |||||
.list { | |||||
.item { | |||||
display: flex; | |||||
justify-content: space-between; | |||||
align-items: flex-end; | |||||
padding: 34px 15px; | |||||
background-color: #fff; | |||||
margin-bottom: 11px; | |||||
.left { | |||||
display: flex; | |||||
justify-content: flex-start; | |||||
align-items: flex-start; | |||||
img { | |||||
height: 25px; | |||||
width: 25px; | |||||
} | |||||
.middle { | |||||
.title, | |||||
.overall, | |||||
.trend { | |||||
display: flex; | |||||
justify-content: flex-start; | |||||
align-items: center; | |||||
padding-left: 13px; | |||||
span, | |||||
p { | |||||
font-size: 18px; | |||||
font-family: Source Han Sans CN; | |||||
font-weight: 400; | |||||
color: #8d8d8d; | |||||
line-height: 30px; | |||||
} | |||||
} | |||||
.title { | |||||
span { | |||||
padding-right: 20px; | |||||
} | } | ||||
&.no-data { | |||||
height: calc(100vh - 45px); | |||||
width: 100%; | |||||
@include center(); | |||||
flex-direction: column; | |||||
img { | |||||
height: 110px; | |||||
width: 175px; | |||||
} | |||||
p { | |||||
color: #999; | |||||
font-size: 12px; | |||||
padding: 20px 0 65px 0; | |||||
} | |||||
p { | |||||
color: #282828; | |||||
} | } | ||||
} | |||||
.overall { | |||||
display: flex; | |||||
justify-content: space-between; | |||||
align-items: center; | |||||
width: 100%; | |||||
.left { | |||||
p { | |||||
padding-left: 20px; | |||||
font-weight: bold; | |||||
} | |||||
} | |||||
.right { | |||||
img { | |||||
height: 15px; | |||||
width: 9px; | |||||
} | |||||
} | |||||
} | |||||
.trend { | |||||
align-items: flex-start; | |||||
text-align: left; | |||||
} | |||||
} | |||||
} | |||||
.right { | |||||
img { | |||||
width: 9px; | |||||
height: 15px; | |||||
} | } | ||||
} | |||||
} | } | ||||
&.no-data { | |||||
height: calc(100vh - 45px); | |||||
width: 100%; | |||||
@include center(); | |||||
flex-direction: column; | |||||
img { | |||||
height: 110px; | |||||
width: 175px; | |||||
} | |||||
p { | |||||
color: #999; | |||||
font-size: 12px; | |||||
padding: 20px 0 65px 0; | |||||
} | |||||
} | |||||
} | |||||
} | } | ||||
} | |||||
} | } | ||||
</style> | </style> |
@@ -1,382 +1,397 @@ | |||||
<template> | <template> | ||||
<div class="page" v-if="isSHowPage"> | |||||
<van-nav-bar title="" :border="true" :left-arrow="true" @click-left="onNavBack" v-if="showLeftArrow"> | |||||
<template #left> | |||||
<van-icon name="arrow-left" size="23" style="padding: 0"/>返回 | |||||
</template> | |||||
</van-nav-bar> | |||||
<div class="tip"> | |||||
<div class="icon"> | |||||
<i class="iconfont icon-tishi"></i> | |||||
</div> | |||||
<div class="info"> | |||||
<div class="titie">温馨提醒:</div> | |||||
<div class="content"> | |||||
{{ tips }} | |||||
</div> | |||||
</div> | |||||
</div> | |||||
<div v-if="info"> | |||||
<!-- 第一步 --> | |||||
<div class="step" v-show="info.initScaleState !== 1"> | |||||
<div class="name">第一步</div> | |||||
<div class="title"> | |||||
<div class="text">情绪初始化评估</div> | |||||
<div class="status success" v-if="info.initScaleState === 1"> | |||||
<span class="icon" | |||||
><i class="iconfont icon-caozuochenggong"></i | |||||
></span> | |||||
<span>已完成</span> | |||||
</div> | |||||
<div class="status" v-else>待完成</div> | |||||
</div> | |||||
<div class="sub_title"> | |||||
完成一次“情绪初始化评估”,有助于建立您的个人情绪模型。 | |||||
</div> | |||||
<div class="step_button"> | |||||
<van-button | |||||
round | |||||
type="info" | |||||
style="width: 100%; height: 100%" | |||||
v-if="info.initScaleState !== 1" | |||||
@click="toQuestion" | |||||
>去完成</van-button> | |||||
</div> | |||||
</div> | |||||
<div class="page" v-if="isSHowPage"> | |||||
<van-nav-bar title="" :border="true" :left-arrow="true" @click-left="onNavBack" v-if="showLeftArrow"> | |||||
<template #left> | |||||
<van-icon name="arrow-left" size="23" style="padding: 0" />返回 | |||||
</template> | |||||
</van-nav-bar> | |||||
<div class="tip"> | |||||
<div class="icon"> | |||||
<i class="iconfont icon-tishi"></i> | |||||
</div> | |||||
<div class="info"> | |||||
<div class="titie">温馨提醒:</div> | |||||
<div class="content"> | |||||
{{ tips }} | |||||
</div> | |||||
</div> | |||||
</div> | |||||
<div v-if="info"> | |||||
<!-- 第一步 --> | |||||
<div class="step" v-show="info.initScaleState !== 1"> | |||||
<div class="name">第一步</div> | |||||
<div class="title"> | |||||
<div class="text">情绪初始化评估</div> | |||||
<div class="status success" v-if="info.initScaleState === 1"> | |||||
<span class="icon"><i class="iconfont icon-caozuochenggong"></i></span> | |||||
<span>已完成</span> | |||||
</div> | |||||
<div class="status" v-else>待完成</div> | |||||
</div> | |||||
<div class="sub_title"> | |||||
完成一次“情绪初始化评估”,有助于建立您的个人情绪模型。 | |||||
</div> | |||||
<div class="step_button"> | |||||
<van-button round type="info" style="width: 100%; height: 100%" v-if="info.initScaleState !== 1" | |||||
@click="toQuestion">去完成</van-button> | |||||
</div> | |||||
</div> | |||||
<!-- 第二步 --> | |||||
<div class="step" v-show="info.progress !== 1"> | |||||
<div class="name">第二步</div> | |||||
<div class="title"> | |||||
<div class="text">连续佩戴两小时</div> | |||||
<div class="status success" v-if="info.progress === 1"> | |||||
<span class="icon" | |||||
><i class="iconfont icon-caozuochenggong"></i | |||||
></span> | |||||
<span>已完成</span> | |||||
</div> | |||||
<div class="status" v-else>{{ stateText}}</div> | |||||
</div> | |||||
<div class="schedule"> | |||||
<van-progress | |||||
:percentage="(info.progress) * 100" | |||||
stroke-width="10px" | |||||
color="#638ee4" | |||||
:show-pivot="true" | |||||
></van-progress> | |||||
</div> | |||||
<div class="sub_title"> | |||||
请连续佩戴不低于2小时,有助于为您输出更加精准的情绪分析指标。 | |||||
</div> | |||||
</div> | |||||
<div class="completed" v-show="info.progress === 1 && info.initScaleState === 1"> | |||||
<van-button | |||||
round | |||||
type="info" | |||||
>建模已完成</van-button | |||||
> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
<!-- 第二步 --> | |||||
<div class="step" v-show="info.progress !== 1"> | |||||
<div class="name">第二步</div> | |||||
<div class="title"> | |||||
<div class="text">连续佩戴两小时</div> | |||||
<div class="status success" v-if="info.progress === 1"> | |||||
<span class="icon"><i class="iconfont icon-caozuochenggong"></i></span> | |||||
<span>已完成</span> | |||||
</div> | |||||
<div class="status" v-else>{{ stateText }}</div> | |||||
</div> | |||||
<div class="schedule"> | |||||
<van-progress :percentage="info.progress * 100" stroke-width="10px" color="#638ee4" | |||||
:show-pivot="true"></van-progress> | |||||
</div> | |||||
<div class="sub_title"> | |||||
请连续佩戴不低于2小时,有助于为您输出更加精准的情绪分析指标。 | |||||
</div> | |||||
</div> | |||||
<div class="completed" v-show="info.progress === 1 && info.initScaleState === 1"> | |||||
<van-button round type="info">建模已完成</van-button> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
</template> | </template> | ||||
<script> | <script> | ||||
import axios from 'axios' | |||||
import axios from "axios"; | |||||
import APICore from "@/api/core"; | import APICore from "@/api/core"; | ||||
export default { | export default { | ||||
name: 'PsychologicalModeling', | |||||
data() { | |||||
return { | |||||
info: null, | |||||
showLeftArrow: null, | |||||
isSHowPage: false, | |||||
fromUrl: '', | |||||
} | |||||
name: "PsychologicalModeling", | |||||
data() { | |||||
return { | |||||
info: null, | |||||
showLeftArrow: null, | |||||
isSHowPage: false, | |||||
fromUrl: "", | |||||
}; | |||||
}, | |||||
computed: { | |||||
stateText() { | |||||
return this.info.progress > 0 ? "进行中" : "待完成"; | |||||
}, | }, | ||||
computed: { | |||||
stateText() { | |||||
return this.info.progress > 0 ? '进行中' : '待完成'; | |||||
}, | |||||
autoJump() { | |||||
return this.$route.query.autoJump === '1'; | |||||
}, | |||||
tips() { | |||||
return this.info.isFirstModeling === 1 | |||||
? '首次佩戴,需完成以下2步,建立情绪模型。完成初始化建模后,将为您计算抑郁、压力、疲劳分值。' | |||||
: '由于您长时间未佩戴手表,需重新建模,请连续佩戴不低于2小时,佩戴完成后,将为您计算抑郁、压力、疲劳的分值。' | |||||
} | |||||
autoJump() { | |||||
return this.$route.query.autoJump === "1"; | |||||
}, | }, | ||||
mounted() { | |||||
//页面标题 | |||||
window.document.title = '情绪初始化建模' | |||||
tips() { | |||||
return this.info.isFirstModeling === 1 | |||||
? `首次佩戴,需完成以下2步,建立情绪模型。完成初始化建模后,将为您计算${this.$replaceAll('抑郁', '抑郁', '焦虑')}、压力、疲劳分值。` | |||||
: `由于您长时间未佩戴手表,需重新建模,请连续佩戴不低于2小时,佩戴完成后,将为您计算${this.$replaceAll('抑郁', '抑郁', '焦虑')}、压力、疲劳的分值。`; | |||||
}, | |||||
}, | |||||
mounted() { | |||||
//页面标题 | |||||
window.document.title = "情绪初始化建模"; | |||||
//页面传参 | |||||
let params = { ...this.$route.query } | |||||
if (params.uid) { | |||||
this.uid = params.uid; | |||||
// 缓存从随手精灵传过来的token | |||||
this.$store.commit('ssjlToken', params.accessToken || ''); | |||||
// 缓存从随手精灵传过来的标识 | |||||
this.$store.commit('fromSsjl', params.fromSsjl); | |||||
// 是否显示 返回标签 | |||||
this.showLeftArrow = this.$store.getters.fromSsjl === 'true'; | |||||
this.fromUrl = params.fromUrl; | |||||
console.log("fromUrl", this.fromUrl); | |||||
//初始化 | |||||
this.init() | |||||
} else { | |||||
this.$toast('参数错误') | |||||
} | |||||
}, | |||||
methods: { | |||||
// 获取b端token | |||||
getAuth() { | |||||
let manufactorId = "5bf13062-a41e-4d00-ba14-1101aad12650"; | |||||
let that = this; | |||||
return new Promise((resolve, reject) => { | |||||
APICore.getAuth({ manufactorId: manufactorId }).then(res => { | |||||
let data = res.data; | |||||
if(data.code === 0) { | |||||
resolve(res.data.data); | |||||
} else { | |||||
that.$toast.fail(`${data.message}`); | |||||
reject(''); | |||||
} | |||||
}) | |||||
}) | |||||
}, | |||||
// 返回 | |||||
onNavBack() { | |||||
let fromSsjl = this.$store.getters.fromSsjl === 'true'; | |||||
if(fromSsjl) { | |||||
let baseUrl = this.fromUrl; | |||||
window.location.href = `${baseUrl}/#/${ this.$route.query.fromMenu || 'device'}`; | |||||
} else { | |||||
this.$router.go(-1); | |||||
} | |||||
//页面传参 | |||||
let params = { ...this.$route.query }; | |||||
if (params.uid) { | |||||
this.uid = params.uid; | |||||
// 缓存从随手精灵传过来的token | |||||
this.$store.commit("ssjlToken", params.accessToken || ""); | |||||
if (params.appType) { | |||||
this.$store.commit("appType", params.appType); | |||||
} | |||||
// 缓存从随手精灵传过来的标识 | |||||
this.$store.commit("fromSsjl", params.fromSsjl); | |||||
// 是否显示 返回标签 | |||||
this.showLeftArrow = this.$store.getters.fromSsjl === "true"; | |||||
this.fromUrl = params.fromUrl; | |||||
console.log("fromUrl", this.fromUrl); | |||||
//初始化 | |||||
this.init(); | |||||
} else { | |||||
this.$toast("参数错误"); | |||||
} | |||||
}, | |||||
methods: { | |||||
// 获取b端token | |||||
getAuth() { | |||||
let manufactorId = "5bf13062-a41e-4d00-ba14-1101aad12650"; | |||||
let that = this; | |||||
return new Promise((resolve, reject) => { | |||||
APICore.getAuth({ manufactorId: manufactorId }).then((res) => { | |||||
let data = res.data; | |||||
if (data.code === 0) { | |||||
resolve(res.data.data); | |||||
} else { | |||||
that.$toast.fail(`${data.message}`); | |||||
reject(""); | |||||
} | |||||
}); | |||||
}); | |||||
}, | |||||
// 返回 | |||||
onNavBack() { | |||||
let fromSsjl = this.$store.getters.fromSsjl === "true"; | |||||
if (fromSsjl) { | |||||
let baseUrl = this.fromUrl; | |||||
window.location.href = `${baseUrl}/#/${this.$route.query.fromMenu || "device" | |||||
}`; | |||||
} else { | |||||
this.$router.go(-1); | |||||
} | |||||
}, | |||||
async init() { | |||||
if (!this.$route.query.accessToken) { | |||||
// 如果当前url没有 accessToken, 获取token,并且存储到本地缓存里面 | |||||
let authToken = await this.getAuth(); | |||||
this.$store.commit("ssjlToken", authToken); | |||||
} | |||||
let ssjlToken = this.$store.getters.ssjlToken; | |||||
let re = await this.api( | |||||
"/api/Question/Progress", | |||||
{ | |||||
method: "GET", | |||||
sslVerify: false, | |||||
withCredentials: false, | |||||
params: { | |||||
uid: this.uid, | |||||
}, | |||||
}, | }, | ||||
async init() { | |||||
if(!this.$route.query.accessToken) { | |||||
// 如果当前url没有 accessToken, 获取token,并且存储到本地缓存里面 | |||||
let authToken = await this.getAuth(); | |||||
this.$store.commit('ssjlToken', authToken); | |||||
} | |||||
let ssjlToken = this.$store.getters.ssjlToken; | |||||
let re = await this.api('/api/Question/Progress', { | |||||
method: 'GET', | |||||
sslVerify: false, | |||||
withCredentials: false, | |||||
params: { | |||||
uid: this.uid, | |||||
}, | |||||
}, ssjlToken) | |||||
if (re.success) { | |||||
this.info = re.response | |||||
setTimeout(() => { | |||||
this.isSHowPage = true; | |||||
}, 800) | |||||
if (re.response && re.response.state === -1) { | |||||
this.$toast('用户不存在或未绑定手表') | |||||
} else if (re.response && re.response.initScaleState === 1 && re.response.progress === 1 && !this.autoJump) { | |||||
// 2023.6.1 需求变更,建模完成直接跳到心理健康汇总页面 | |||||
this.$router.replace(`/psychologicalMain?uid=${this.uid}&fromUrl=${this.fromUrl || ''}&fromMenu=${ this.showLeftArrow ? 'device' : ''}`); | |||||
} | |||||
} else { | |||||
this.$toast(re.msg) | |||||
ssjlToken | |||||
); | |||||
if (re.success) { | |||||
this.info = re.response; | |||||
setTimeout(() => { | |||||
this.isSHowPage = true; | |||||
}, 800); | |||||
if (re.response && re.response.state === -1) { | |||||
this.$toast("用户不存在或未绑定手表"); | |||||
} else if ( | |||||
re.response && | |||||
re.response.initScaleState === 1 && | |||||
re.response.progress === 1 && | |||||
!this.autoJump | |||||
) { | |||||
// 2023.6.1 需求变更,建模完成直接跳到心理健康汇总页面 | |||||
this.$router.replace( | |||||
`/psychologicalMain?uid=${this.uid}&fromUrl=${this.fromUrl || "" | |||||
}&fromMenu=${this.showLeftArrow ? "device" : ""}` | |||||
); | |||||
} | |||||
} else { | |||||
this.$toast(re.msg); | |||||
} | |||||
}, | |||||
toQuestion() { | |||||
this.$router.replace(`/PsychologicalQuestionnaire?uid=${this.uid}`); | |||||
}, | |||||
api(url, config, token) { | |||||
let baseUrl = | |||||
process.env.NODE_ENV === "production" | |||||
? "https://dbmq.rzliot.com/auth_heart" | |||||
: "https://dbmq.rzliot.com/heart"; | |||||
setTimeout(() => { | |||||
this.$toast.loading({ | |||||
message: "", | |||||
forbidClick: true, | |||||
duration: 0, | |||||
}); | |||||
}, 100); | |||||
return new Promise((res) => { | |||||
axios({ | |||||
url: `${baseUrl}${url}`, | |||||
...config, | |||||
// 增加请求头部 token | |||||
headers: { | |||||
AccessToken: token, | |||||
}, | |||||
}) | |||||
.then((re) => { | |||||
if (re) { | |||||
if (re.data) { | |||||
console.log(re.data); | |||||
res(re.data); | |||||
this.$toast.clear(); | |||||
return; | |||||
} | |||||
this.$toast(`信息获取失败-${re.status}`); | |||||
res(true); | |||||
this.$toast.clear(); | |||||
return; | |||||
} | } | ||||
}, | |||||
toQuestion() { | |||||
this.$router.replace(`/PsychologicalQuestionnaire?uid=${this.uid}`) | |||||
}, | |||||
api(url, config, token) { | |||||
let baseUrl = process.env.NODE_ENV === 'production' ? 'https://dbmq.rzliot.com/auth_heart' : 'https://dbmq.rzliot.com/heart'; | |||||
setTimeout(() => { | |||||
this.$toast.loading({ | |||||
message: '', | |||||
forbidClick: true, | |||||
duration: 0, | |||||
}) | |||||
}, 100) | |||||
return new Promise((res) => { | |||||
axios({ | |||||
url: `${baseUrl}${url}`, | |||||
...config, | |||||
// 增加请求头部 token | |||||
headers: { | |||||
'AccessToken': token | |||||
} | |||||
}) | |||||
.then((re) => { | |||||
if (re) { | |||||
if (re.data) { | |||||
console.log(re.data) | |||||
res(re.data) | |||||
this.$toast.clear() | |||||
return | |||||
} | |||||
this.$toast(`信息获取失败-${re.status}`) | |||||
res(true) | |||||
this.$toast.clear() | |||||
return | |||||
} | |||||
this.$toast(`信息获取失败-${url}`) | |||||
res(true) | |||||
this.$toast.clear() | |||||
}) | |||||
.catch((e) => { | |||||
this.$toast(`信息获取失败-${url}`) | |||||
res(true) | |||||
this.$toast.clear() | |||||
console.log(e) | |||||
}) | |||||
}) | |||||
}, | |||||
}, | |||||
} | |||||
this.$toast(`信息获取失败-${url}`); | |||||
res(true); | |||||
this.$toast.clear(); | |||||
}) | |||||
.catch((e) => { | |||||
this.$toast(`信息获取失败-${url}`); | |||||
res(true); | |||||
this.$toast.clear(); | |||||
console.log(e); | |||||
}); | |||||
}); | |||||
}, | |||||
}, | |||||
}; | |||||
</script> | </script> | ||||
<style lang="scss" scoped> | <style lang="scss" scoped> | ||||
@font-face { | @font-face { | ||||
font-family: 'iconfont'; /* Project id 2652084 */ | |||||
src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAQoAAsAAAAACFQAAAPaAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACDBgqEIIQDATYCJAMMCwgABCAFhGcHQRtqBxEVnBvJPhLjmMRz8aCJJho3wfN8ne+5817QmS/XTApqUAGT1kmpHaidloBWXGdzOaZE+Aj1S75l+ek70v5OL82zLE6hFEIiJEbx96dyFkjAnwUAJnXNTcUP1HiBAtaxhhUr2KsXyLuo1/rCrIx6BgFM6tACo12HbjZpk4bPmkIRGksqkFbKpPFjhxOWRnRLpRBGCEKXamQTATDWGo+AjeHn5RdRCYNBQGHt0mtM+1Hc+Zr+1VZ+0gf1Gl+CgIcbQABQQI2NmWVIu7MfKk7WQGHWKTUpDKIRjEkjySSEglIHt/zHM0CCWMoUTFVRGBclugwEvto8VnH9qyAIhIDrIApTOVMVOr2mNDQjKSPHeM4zz6ZrPrYDY3fjR7a4+xTrY15tvZVw5KkZtx/X+HznyRPHnvCeqZskVmTOjMmRnF1girdzz7F4ju3uiB/xc53CoFi1HdXMW9Vu1TonY+gTzqB98OucaHakkW3GjxWJhX9kQXymq/AjJ5sfbS5Hc9nm5+KfvW9ZiYfnRXbG8tzG6nK7+u265yW2Hv38lNG3PmqlJo7Hjv0enTXu0fJ0ouuAIf1WL94ysHiw9aA5vca2mth0ZPGOvtu99JioF7HtiBd95LA4E7Gj3qPSVmO6tC3erV1e54F9yvUsu3Bh2Z7l+lwiLGETNtvRp9ylmtsGlm7eieOF8GLvn+zifT/067/LLFd8TdeujrureHTFyFEf+hbPVft+SK96RrBXE7tqx8rt21XpUO2QwwZswmZvsZsOz8+pN3TsrzXZ143c71m5NwLL+4xyo30jdTbxttGdTvRcMG4rPzrU0SFdrfTjHqXWlOrxuHR1FdK1219m/7yFvU52Hh3x6th9I25U9b0QTS1XvFyq35thACTvqtuqZZiOq5kq9v9/w/jtj8cOTW/2P2xpAN5vbXsP+5NxDcwN4RfjFPjbqkFApFYhULpOcFsQQLEkk4cBmLYJfm81QBZvh6uzweUghMlOwSBEcVCEKYdpqhoEsIhCkDDNwaQ67VdbZPsIzBFdDKjEC4GQwRsM0rgKigw+mKa+ECCPHwTJ4A8mrqy2s6gkZs2oBC3oB9SGBudoJJR7QD92iqtiF+RY4wjkSVbM7HFAHmNGvPpCxIFj6mHHT8OuIwhMDRpJKpFQpqmre0liqJ+sYRCFgFgAzQOgxkAMOB8t+e87gHhGOhQMxC52JlKeyAdyEjIAtlcOoLYb6R254ikQBEdHORiiB9gpO9LZSQII9YMaEIOQUA2IB0pSgnJQZbK8un+5XYCJtaUSQ5Ro0kcqeo5kKhy8J7dhKXWs6skEAAA='); | |||||
font-family: "iconfont"; | |||||
/* Project id 2652084 */ | |||||
src: url("data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAQoAAsAAAAACFQAAAPaAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACDBgqEIIQDATYCJAMMCwgABCAFhGcHQRtqBxEVnBvJPhLjmMRz8aCJJho3wfN8ne+5817QmS/XTApqUAGT1kmpHaidloBWXGdzOaZE+Aj1S75l+ek70v5OL82zLE6hFEIiJEbx96dyFkjAnwUAJnXNTcUP1HiBAtaxhhUr2KsXyLuo1/rCrIx6BgFM6tACo12HbjZpk4bPmkIRGksqkFbKpPFjhxOWRnRLpRBGCEKXamQTATDWGo+AjeHn5RdRCYNBQGHt0mtM+1Hc+Zr+1VZ+0gf1Gl+CgIcbQABQQI2NmWVIu7MfKk7WQGHWKTUpDKIRjEkjySSEglIHt/zHM0CCWMoUTFVRGBclugwEvto8VnH9qyAIhIDrIApTOVMVOr2mNDQjKSPHeM4zz6ZrPrYDY3fjR7a4+xTrY15tvZVw5KkZtx/X+HznyRPHnvCeqZskVmTOjMmRnF1girdzz7F4ju3uiB/xc53CoFi1HdXMW9Vu1TonY+gTzqB98OucaHakkW3GjxWJhX9kQXymq/AjJ5sfbS5Hc9nm5+KfvW9ZiYfnRXbG8tzG6nK7+u265yW2Hv38lNG3PmqlJo7Hjv0enTXu0fJ0ouuAIf1WL94ysHiw9aA5vca2mth0ZPGOvtu99JioF7HtiBd95LA4E7Gj3qPSVmO6tC3erV1e54F9yvUsu3Bh2Z7l+lwiLGETNtvRp9ylmtsGlm7eieOF8GLvn+zifT/067/LLFd8TdeujrureHTFyFEf+hbPVft+SK96RrBXE7tqx8rt21XpUO2QwwZswmZvsZsOz8+pN3TsrzXZ143c71m5NwLL+4xyo30jdTbxttGdTvRcMG4rPzrU0SFdrfTjHqXWlOrxuHR1FdK1219m/7yFvU52Hh3x6th9I25U9b0QTS1XvFyq35thACTvqtuqZZiOq5kq9v9/w/jtj8cOTW/2P2xpAN5vbXsP+5NxDcwN4RfjFPjbqkFApFYhULpOcFsQQLEkk4cBmLYJfm81QBZvh6uzweUghMlOwSBEcVCEKYdpqhoEsIhCkDDNwaQ67VdbZPsIzBFdDKjEC4GQwRsM0rgKigw+mKa+ECCPHwTJ4A8mrqy2s6gkZs2oBC3oB9SGBudoJJR7QD92iqtiF+RY4wjkSVbM7HFAHmNGvPpCxIFj6mHHT8OuIwhMDRpJKpFQpqmre0liqJ+sYRCFgFgAzQOgxkAMOB8t+e87gHhGOhQMxC52JlKeyAdyEjIAtlcOoLYb6R254ikQBEdHORiiB9gpO9LZSQII9YMaEIOQUA2IB0pSgnJQZbK8un+5XYCJtaUSQ5Ro0kcqeo5kKhy8J7dhKXWs6skEAAA="); | |||||
} | } | ||||
.iconfont { | .iconfont { | ||||
font-family: 'iconfont' !important; | |||||
// font-size: 16px; | |||||
font-style: normal; | |||||
-webkit-font-smoothing: antialiased; | |||||
-moz-osx-font-smoothing: grayscale; | |||||
font-family: "iconfont" !important; | |||||
// font-size: 16px; | |||||
font-style: normal; | |||||
-webkit-font-smoothing: antialiased; | |||||
-moz-osx-font-smoothing: grayscale; | |||||
} | } | ||||
.icon-caozuochenggong:before { | .icon-caozuochenggong:before { | ||||
content: '\e60f'; | |||||
content: "\e60f"; | |||||
} | } | ||||
.icon-tishi:before { | .icon-tishi:before { | ||||
content: '\e654'; | |||||
content: "\e654"; | |||||
} | } | ||||
.page { | .page { | ||||
width: 100%; | |||||
min-height: 100%; | |||||
box-sizing: border-box; | |||||
font-size: 3.6vw; | |||||
text-align: left; | |||||
background: #f4f4f4; | |||||
padding-bottom: 30vw; | |||||
.tip { | |||||
display: flex; | |||||
font-size: 3.3vw; | |||||
padding: 6vw 4vw; | |||||
justify-content: space-between; | |||||
align-items: center; | |||||
background: white; | |||||
width: 100%; | |||||
min-height: 100%; | |||||
box-sizing: border-box; | |||||
font-size: 3.6vw; | |||||
text-align: left; | |||||
background: #f4f4f4; | |||||
padding-bottom: 30vw; | |||||
.icon { | |||||
overflow: hidden; | |||||
display: flex; | |||||
justify-content: center; | |||||
align-items: center; | |||||
width: 40px; | |||||
height: 40px; | |||||
color: #ff865a; | |||||
font-size: 6vw; | |||||
border-radius: 50%; | |||||
background: #fff5f1; | |||||
} | |||||
.info { | |||||
width: calc(100% - 50px); | |||||
line-height: 20px; | |||||
text-align: left; | |||||
.titie { | |||||
color: #ff865a; | |||||
} | |||||
.content { | |||||
color: gray; | |||||
} | |||||
} | |||||
} | |||||
.step { | |||||
margin-top: 3vw; | |||||
padding: 4vw 8vw; | |||||
padding-right: 4vw; | |||||
background: white; | |||||
.tip { | |||||
display: flex; | |||||
font-size: 3.3vw; | |||||
padding: 6vw 4vw; | |||||
justify-content: space-between; | |||||
align-items: center; | |||||
background: white; | |||||
.name { | |||||
display: flex; | |||||
align-items: center; | |||||
font-size: 3.8vw; | |||||
padding-bottom: 2vw; | |||||
.icon { | |||||
overflow: hidden; | |||||
display: flex; | |||||
justify-content: center; | |||||
align-items: center; | |||||
width: 40px; | |||||
height: 40px; | |||||
color: #ff865a; | |||||
font-size: 6vw; | |||||
border-radius: 50%; | |||||
background: #fff5f1; | |||||
} | |||||
&::before { | |||||
content: ''; | |||||
display: block; | |||||
width: 1vw; | |||||
height: 1vw; | |||||
border: 2px solid #638ee4; | |||||
border-radius: 50%; | |||||
margin-left: calc(-2vw - 4px); | |||||
margin-right: 1vw; | |||||
} | |||||
} | |||||
.title { | |||||
display: flex; | |||||
justify-content: space-between; | |||||
padding: 3vw 0; | |||||
.info { | |||||
width: calc(100% - 50px); | |||||
line-height: 20px; | |||||
text-align: left; | |||||
.status { | |||||
color: #ff865a; | |||||
} | |||||
.success { | |||||
color: #638ee4; | |||||
.titie { | |||||
color: #ff865a; | |||||
} | |||||
.icon { | |||||
font-size: 4vw; | |||||
margin-right: 1vw; | |||||
} | |||||
} | |||||
} | |||||
.sub_title { | |||||
padding: 3vw 0; | |||||
color: gray; | |||||
} | |||||
.step_button { | |||||
height: 14vw; | |||||
width: 60vw; | |||||
margin: auto; | |||||
.van-button--info { | |||||
background-color: #638ee4; | |||||
border: 1px solid #638ee4; | |||||
} | |||||
} | |||||
} | |||||
.completed { | |||||
position: relative; | |||||
margin-top: 3vw; | |||||
height: 400px; | |||||
@include center(); | |||||
.van-button--info { | |||||
height: 8vh; | |||||
width: 75vw; | |||||
background-color: #638ee4; | |||||
border: 1px solid #638ee4; | |||||
} | |||||
.content { | |||||
color: gray; | |||||
} | |||||
} | |||||
} | |||||
.step { | |||||
margin-top: 3vw; | |||||
padding: 4vw 8vw; | |||||
padding-right: 4vw; | |||||
background: white; | |||||
.name { | |||||
display: flex; | |||||
align-items: center; | |||||
font-size: 3.8vw; | |||||
padding-bottom: 2vw; | |||||
&::before { | |||||
content: ""; | |||||
display: block; | |||||
width: 1vw; | |||||
height: 1vw; | |||||
border: 2px solid #638ee4; | |||||
border-radius: 50%; | |||||
margin-left: calc(-2vw - 4px); | |||||
margin-right: 1vw; | |||||
} | |||||
} | |||||
.title { | |||||
display: flex; | |||||
justify-content: space-between; | |||||
padding: 3vw 0; | |||||
.status { | |||||
color: #ff865a; | |||||
} | |||||
.success { | |||||
color: #638ee4; | |||||
.icon { | |||||
font-size: 4vw; | |||||
margin-right: 1vw; | |||||
} | } | ||||
.button { | |||||
position: fixed; | |||||
left: 0; | |||||
right: 0; | |||||
bottom: 15vw; | |||||
width: 75vw; | |||||
height: 14vw; | |||||
margin: auto; | |||||
} | |||||
} | |||||
.sub_title { | |||||
padding: 3vw 0; | |||||
color: gray; | |||||
} | |||||
.step_button { | |||||
height: 14vw; | |||||
width: 60vw; | |||||
margin: auto; | |||||
.van-button--info { | |||||
background-color: #638ee4; | |||||
border: 1px solid #638ee4; | |||||
} | |||||
} | |||||
} | |||||
.completed { | |||||
position: relative; | |||||
margin-top: 3vw; | |||||
height: 400px; | |||||
@include center(); | |||||
.van-button--info { | |||||
height: 8vh; | |||||
width: 75vw; | |||||
background-color: #638ee4; | |||||
border: 1px solid #638ee4; | |||||
} | |||||
} | |||||
.button { | |||||
position: fixed; | |||||
left: 0; | |||||
right: 0; | |||||
bottom: 15vw; | |||||
width: 75vw; | |||||
height: 14vw; | |||||
margin: auto; | |||||
.van-button--info { | |||||
background-color: #638ee4; | |||||
border: 1px solid #638ee4; | |||||
} | |||||
} | |||||
.van-button--info { | |||||
background-color: #638ee4; | |||||
border: 1px solid #638ee4; | |||||
} | |||||
} | |||||
} | } | ||||
</style> | </style> |