Browse Source

Merge branch 'develop' into mer-master

master
chenJinxu 8 months ago
parent
commit
20c1a505e3
16 changed files with 3897 additions and 3535 deletions
  1. +36
    -0
      README.md
  2. +1
    -1
      setup_development.sh
  3. +1
    -1
      setup_production.sh
  4. +1
    -1
      setup_test.sh
  5. +5
    -4
      src/config/models.js
  6. +3
    -1
      src/main.js
  7. +11
    -1
      src/store/index.js
  8. +32
    -2
      src/utils/index.js
  9. +20
    -38
      src/views/gps-card-frontend/device-power/index.vue
  10. +661
    -656
      src/views/gps-card-frontend/device-setting/index.vue
  11. +189
    -143
      src/views/health/psychological-main/index.vue
  12. +39
    -3
      src/views/health/psychological/index.scss
  13. +1427
    -1283
      src/views/health/psychological/index.vue
  14. +915
    -869
      src/views/health/psychological/report/index.vue
  15. +196
    -187
      src/views/health/psychological/report/report-entry.vue
  16. +360
    -345
      src/views/psychological-modeling/index.vue

+ 36
- 0
README.md View File

@@ -873,6 +873,18 @@ update
- 增加 无数据文字提示

## v1.0.110
`2023.12.13`
update
- 设备设置列表
- 优化 全部接口响应完成才加载完成

## v1.0.111
`2023.12.15`
fix
- 设备设置列表
- 修复 接口未响应完成提示加载完成

## v1.0.112
`2023.12.28`
update
- 心理监测首页
@@ -884,3 +896,27 @@ update
update
- 心理监测详情,周报
- 修改 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
- ‘抑郁’文字 通过页面传过来的参数 改成‘焦虑’,否则不变

+ 1
- 1
setup_development.sh View File

@@ -7,7 +7,7 @@
# @description:
###
npm -v
npm config set registry https://registry.npm.taobao.org
npm config set registry https://registry.npmmirror.com
npm install
npm run build-dev
image_version=`date +%Y%m%d%H%M`;


+ 1
- 1
setup_production.sh View File

@@ -7,7 +7,7 @@
# @description:
###
npm -v
npm config set registry https://registry.npm.taobao.org
npm config set registry https://registry.npmmirror.com
npm install
npm run build
image_version=$version;


+ 1
- 1
setup_test.sh View File

@@ -8,7 +8,7 @@
###
#!/bin/bash
npm -v
npm config set registry https://registry.npm.taobao.org
npm config set registry https://registry.npmmirror.com
npm install
npm run build-test
image_version=$version;


+ 5
- 4
src/config/models.js View File

@@ -5,7 +5,7 @@
* @FilePath: \TelpoH5FrontendWeb\src\config\models.js
* @description:
*/
export const VERSION_MODEL = '1.0.114F'; //版本号
export const VERSION_MODEL = '1.0.117F'; //版本号
export const IMAGE_URL = {
production: '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", // 随手精灵百度流量统计 测试环境
development: "https://hm.baidu.com/hm.js?edb76b471e997167b7782c1513382771", // 随手精灵百度流量统计 测试环境
};
// 情绪模型

// 抑郁文字
export const EmotionModel = {
// 抑郁
depression: {
name: '抑郁',
type: 2,
title1: '抑郁倾向',
title1: `抑郁倾向`,
article1: `<p>设备所检测的是个体的抑郁倾向。通过将个人的生理特征(脉搏波、心率变异性等)和行为习惯(运动、作息等)与临床诊断为抑郁症的患者的相应特征进行对比,判断出个体的抑郁倾向(即抑郁症的可能性)程度。抑郁倾向持续的时间越长、程度越严重,代表患有抑郁症的风险就越大。</p>`,
title2: '抑郁倾向算法原理',
title2: `抑郁倾向算法原理`,
article2: `<p>1.研究发现,抑郁症等情绪障碍可能会引起个体外周生理系统反应的钝化,因此患者可能在面临危险、压力等应激状态下表现出较低的生理反应唤醒水平。这一点能够通过皮肤电、心率变异性等生理特征的周期性变化来判断。</p>
<p>2.抑郁症等情绪障碍的患者会出现明显的失眠、运动少、和生物钟紊乱,算法能够有效分析判断出这些异常的行为特征。</p>`



+ 3
- 1
src/main.js View File

@@ -14,9 +14,10 @@ import '@/assets/css/reset.scss';
import dayjs from 'dayjs';
// ui库按需引入
import 'vant/lib/index.css';
import { replaceAll } from '@/utils';
// 引入echarts
import * as echarts from 'echarts';
import { BaiduStatisticsModel } from '@/config/models';
import { BaiduStatisticsModel} from '@/config/models';
import {
Button,
Calendar,
@@ -128,6 +129,7 @@ Vue.config.productionTip = false;
Vue.prototype.$dayjs = dayjs;
Vue.prototype.$echarts = echarts;
Vue.prototype.$bus = new Vue();
Vue.prototype.$replaceAll = replaceAll;
router.afterEach((to, from, next) => {
// 创建百度统计js
setTimeout(()=>{


+ 11
- 1
src/store/index.js View File

@@ -24,6 +24,7 @@ export default new Vuex.Store({
fromSsjl: '',
active: null, //点击左边树形图下标
tabClick: '', //心理监测点击tab
appType: '', //应用类型
},
mutations: {
imei(state, imei) {
@@ -70,6 +71,11 @@ export default new Vuex.Store({
state.tabClick = tabClick;
window.localStorage[prefix + 'tabClick'] = tabClick;
},
appType(state, appType) {
state.appType = appType;
window.localStorage[prefix + 'appType'] = appType;
},

},
getters: {
@@ -117,7 +123,11 @@ export default new Vuex.Store({
if (state.tabClick != '') return state.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: {},
modules: {}

+ 32
- 2
src/utils/index.js View File

@@ -5,7 +5,7 @@
* @FilePath: \AntpayFrontEnd\src\utils\index.js
* @description: 工具类
*/
import store from "@/store";

/**
* 判断是否为空
@@ -88,4 +88,34 @@ export function isShowAntpay(array) {
} else {
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
}
}

+ 20
- 38
src/views/gps-card-frontend/device-power/index.vue View File

@@ -19,37 +19,20 @@
<div class="action">
<div class="left">
<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>
</div>
<div class="right">
<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
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 }}
</p>
<Echart :option="chartOption" v-show="btnActive === 0" />
@@ -103,7 +86,7 @@ export default {
created() {
this.loadParams();
},
mounted() {},
mounted() { },
methods: {
loadParams() {
let params = this.$route.query;
@@ -141,6 +124,7 @@ export default {
) {
this.filterData =
data[this.echarts.type].data /* .list.propertyInfo */;
console.log("this.filterData", this.filterData);
} else if (this.echarts.type === "offline") {
this.filterData = data.Offline.data;
}
@@ -398,24 +382,22 @@ export default {
},
formatter: function (params) {
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(() => {
this.$toast.clear();
});


+ 661
- 656
src/views/gps-card-frontend/device-setting/index.vue
File diff suppressed because it is too large
View File


+ 189
- 143
src/views/health/psychological-main/index.vue View File

@@ -1,164 +1,210 @@
<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 class="health-time">
<p class="time">{{ item.time || "--" }}</p>
</div>
</div>
</div>
</div>
</div>
</template>

<script>
import axios from "axios";
import { isNotNull } from "@/utils/index";
import { PsyBaseUrl } from "@/config/models";
import { PsyBaseUrl, } from "@/config/models";
import APICore from "@/api/core";
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: {
isShowLeft() {
return isNotNull(this.$route.query.fromUrl);
}
return isNotNull(this.$route.query.fromUrl);
},
},
mounted() {
this.loadParams();
this.$store.commit('tabClick', 0);
window.document.title = '心理呵护';
this.$store.commit("tabClick", 0);
window.document.title = "心理呵护";
},
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 {
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() {
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() {
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) {
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() {
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) {
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':
imgUrl = require(`@/assets/img/psychological/${name}_${numLevel + 1}.png`);
break;
@@ -172,28 +218,28 @@ export default {
imgUrl = require('@/assets/img/moderate.png');
break;
} */
return imgUrl;
return imgUrl;
},
// 计算颜色
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>

<style scoped lang="scss">
@import "./index.scss";
@import "./index.scss";
</style>

+ 39
- 3
src/views/health/psychological/index.scss View File

@@ -4,7 +4,7 @@ $newBlue: #638EE4;
width: 100%;
overflow: hidden;
background-color: #fff;
.tab-bar {
.tab-bar{
width: 100%;
position: relative;
.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 {
position: relative;
height: calc(100vh - 90px);
height: calc(100vh - 150px);
overflow: scroll;
.top {
flex: 1;
@@ -334,7 +370,7 @@ $newBlue: #638EE4;
}
&.report {
position: relative;
height: calc(100vh - 90px);
height: calc(100vh - 150px);
overflow: scroll;
background-color: #f5f5f5;
.content {


+ 1427
- 1283
src/views/health/psychological/index.vue
File diff suppressed because it is too large
View File


+ 915
- 869
src/views/health/psychological/report/index.vue
File diff suppressed because it is too large
View File


+ 196
- 187
src/views/health/psychological/report/report-entry.vue View File

@@ -6,226 +6,235 @@
* @description:
-->
<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>
</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 class="list no-data" v-else>
<img src="../../../../assets/img/no_data_01.png" alt />
<p>暂无数据</p>
</div>
</div>
</div>
</div>
</template>

<script>
import { EmotionModel, PsyBaseUrl } from "@/config/models";
import axios from "axios";
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: {
onNavBack() {},
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) {
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() {
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() {
this.loadParams();
this.getWeekResult();
}
}
},
};
</script>

<style scoped lang="scss">
.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>

+ 360
- 345
src/views/psychological-modeling/index.vue View File

@@ -1,382 +1,397 @@
<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>

<script>
import axios from 'axios'
import axios from "axios";
import APICore from "@/api/core";
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>

<style lang="scss" scoped>
@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 {
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 {
content: '\e60f';
content: "\e60f";
}

.icon-tishi:before {
content: '\e654';
content: "\e654";
}

.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>

Loading…
Cancel
Save