chenJinxu
/
TelpoH5FrontendWeb
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

feature 

- 增加 心理监测详情页面，抑郁，压力和疲劳当天图表展示
- 增加 echarts图表依赖
master
JinxChen 1 year ago
parent
74e7abe797
commit
df10a96f84
10 changed files with 1490 additions and 9 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +7
    -1
      README.md
  2. +59
    -0
      package-lock.json
  3. +2
    -1
      package.json
  4. +2
    -0
      src/assets/css/public.scss
  5. BIN
      src/assets/img/no_data_01.png
  6. +21
    -3
      src/config/models.js
  7. +7
    -3
      src/main.js
  8. +3
    -1
      src/router/index.js
  9. +312
    -0
      src/views/health/psychological/index.scss
  10. +1077
    -0
      src/views/health/psychological/index.vue

+ 7
- 1
README.md View File

@@ -424,4 +424,10 @@ feature
`2023.5.13` `2023.5.13`
update update
- 告警 - 告警
- 修改 误报文字为 免告警
- 修改 误报文字为 免告警

## v1.0.52
`2023.5.30`
feature
- 增加 心理监测详情页面，抑郁，压力和疲劳当天图表展示
- 增加 echarts图表依赖

+ 59
- 0
package-lock.json View File

@@ -14,6 +14,7 @@
"clipboard": "^2.0.11", "clipboard": "^2.0.11",
"core-js": "^3.6.5", "core-js": "^3.6.5",
"dayjs": "^1.11.7", "dayjs": "^1.11.7",
"echarts": "^5.4.1",
"html2canvas": "^1.4.1", "html2canvas": "^1.4.1",
"nprogress": "^0.2.0", "nprogress": "^0.2.0",
"rxjs": "^7.8.0", "rxjs": "^7.8.0",
@@ -7174,6 +7175,20 @@
"safer-buffer": "^2.1.0" "safer-buffer": "^2.1.0"
} }
}, },
"node_modules/echarts": {
"version": "5.4.2",
"resolved": "https://registry.npmjs.org/echarts/-/echarts-5.4.2.tgz",
"integrity": "sha512-2W3vw3oI2tWJdyAz+b8DuWS0nfXtSDqlDmqgin/lfzbkB01cuMEN66KWBlmur3YMp5nEDEEt5s23pllnAzB4EA==",
"dependencies": {
"tslib": "2.3.0",
"zrender": "5.4.3"
}
},
"node_modules/echarts/node_modules/tslib": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
"integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
},
"node_modules/editorconfig": { "node_modules/editorconfig": {
"version": "0.15.3", "version": "0.15.3",
"resolved": "https://registry.npmjs.org/editorconfig/-/editorconfig-0.15.3.tgz", "resolved": "https://registry.npmjs.org/editorconfig/-/editorconfig-0.15.3.tgz",
@@ -20052,6 +20067,19 @@
"resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz", "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
"integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=", "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=",
"dev": true "dev": true
},
"node_modules/zrender": {
"version": "5.4.3",
"resolved": "https://registry.npmjs.org/zrender/-/zrender-5.4.3.tgz",
"integrity": "sha512-DRUM4ZLnoaT0PBVvGBDO9oWIDBKFdAVieNWxWwK0niYzJCMwGchRk21/hsE+RKkIveH3XHCyvXcJDkgLVvfizQ==",
"dependencies": {
"tslib": "2.3.0"
}
},
"node_modules/zrender/node_modules/tslib": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
"integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
} }
}, },
"dependencies": { "dependencies": {
@@ -25702,6 +25730,22 @@
"safer-buffer": "^2.1.0" "safer-buffer": "^2.1.0"
} }
}, },
"echarts": {
"version": "5.4.2",
"resolved": "https://registry.npmjs.org/echarts/-/echarts-5.4.2.tgz",
"integrity": "sha512-2W3vw3oI2tWJdyAz+b8DuWS0nfXtSDqlDmqgin/lfzbkB01cuMEN66KWBlmur3YMp5nEDEEt5s23pllnAzB4EA==",
"requires": {
"tslib": "2.3.0",
"zrender": "5.4.3"
},
"dependencies": {
"tslib": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
"integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
}
}
},
"editorconfig": { "editorconfig": {
"version": "0.15.3", "version": "0.15.3",
"resolved": "https://registry.npmjs.org/editorconfig/-/editorconfig-0.15.3.tgz", "resolved": "https://registry.npmjs.org/editorconfig/-/editorconfig-0.15.3.tgz",
@@ -36093,6 +36137,21 @@
"dev": true "dev": true
} }
} }
},
"zrender": {
"version": "5.4.3",
"resolved": "https://registry.npmjs.org/zrender/-/zrender-5.4.3.tgz",
"integrity": "sha512-DRUM4ZLnoaT0PBVvGBDO9oWIDBKFdAVieNWxWwK0niYzJCMwGchRk21/hsE+RKkIveH3XHCyvXcJDkgLVvfizQ==",
"requires": {
"tslib": "2.3.0"
},
"dependencies": {
"tslib": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
"integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
}
}
} }
} }
} }

+ 2
- 1
package.json View File

@@ -25,7 +25,8 @@
"vue-router": "^3.2.0", "vue-router": "^3.2.0",
"vuex": "^3.4.0", "vuex": "^3.4.0",
"weixin-js-sdk": "^1.6.0", "weixin-js-sdk": "^1.6.0",
"clipboard": "^2.0.11"
"clipboard": "^2.0.11",
"echarts": "^5.4.1"
}, },
"devDependencies": { "devDependencies": {
"@vue/cli-plugin-babel": "^4.5.0", "@vue/cli-plugin-babel": "^4.5.0",


+ 2
- 0
src/assets/css/public.scss View File

@@ -3,6 +3,8 @@ $blue: #2599ff;
$next: #8bc6fa; $next: #8bc6fa;
$red: #ff8c8c; $red: #ff8c8c;
$background: #f2f4f5; $background: #f2f4f5;
// 灰色线条
$lineGray: #F5F5F5;
$border_color: #d1d1d1; $border_color: #d1d1d1;
/* 绑定时选择人物关系图片head.png */ /* 绑定时选择人物关系图片head.png */
$spriteWidthHead: 180; $spriteWidthHead: 180;


BIN
src/assets/img/no_data_01.png View File

Before After
Width: 263  |  Height: 165  |  Size: 24KB

+ 21
- 3
src/config/models.js View File

@@ -1,11 +1,11 @@
/* /*
* @Date: 2021-11-20 10:26:39 * @Date: 2021-11-20 10:26:39
* @LastEditors: JinxChen * @LastEditors: JinxChen
* @LastEditTime: 2023-05-13 22:16:53
* @LastEditTime: 2023-05-29 17:10:20
* @FilePath: \TelpoH5FrontendWeb\src\config\models.js * @FilePath: \TelpoH5FrontendWeb\src\config\models.js
* @description: * @description:
*/ */
export const VERSION_MODEL = '1.0.51F'; //版本号
export const VERSION_MODEL = '1.0.52F'; //版本号
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/',
@@ -23,4 +23,22 @@ export const BaiduStatisticsModel = {
production: "https://hm.baidu.com/hm.js?b33e6f07636c9fd9ec8cfe04979f1664", // 随手精灵百度流量统计 正式环境 production: "https://hm.baidu.com/hm.js?b33e6f07636c9fd9ec8cfe04979f1664", // 随手精灵百度流量统计 正式环境
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 = {
// 抑郁
depression: {
name: '抑郁',
type: 2
},
// 压力
stress: {
name: '压力',
type: 1
},
// 疲劳
tiredness: {
name: '疲劳',
type: 3
}
};

+ 7
- 3
src/main.js View File

@@ -1,7 +1,7 @@
/* /*
* @Date: 2022-01-19 10:08:26 * @Date: 2022-01-19 10:08:26
* @LastEditors: JinxChen * @LastEditors: JinxChen
* @LastEditTime: 2023-05-10 09:15:16
* @LastEditTime: 2023-05-30 10:58:58
* @FilePath: \TelpoH5FrontendWeb\src\main.js * @FilePath: \TelpoH5FrontendWeb\src\main.js
* @description: * @description:
*/ */
@@ -14,6 +14,8 @@ 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';
// 引入echarts
import * as echarts from 'echarts';
import { BaiduStatisticsModel } from '@/config/models'; import { BaiduStatisticsModel } from '@/config/models';
import { import {
Button, Button,
@@ -100,13 +102,14 @@ Vue


Vue.config.productionTip = false; Vue.config.productionTip = false;
Vue.config.devtools = true; Vue.config.devtools = true;

// 全局配置 loading // 全局配置 loading
Toast.setDefaultOptions('success', { Toast.setDefaultOptions('success', {
duration: 2500,
duration: 1500,
forbidClick: true, forbidClick: true,
}); });
Toast.setDefaultOptions('loading', { Toast.setDefaultOptions('loading', {
duration: 0,
duration: 1500,
forbidClick: true, forbidClick: true,
}); });
Dialog.setDefaultOptions({ Dialog.setDefaultOptions({
@@ -115,6 +118,7 @@ Dialog.setDefaultOptions({
}); });
Vue.config.productionTip = false; Vue.config.productionTip = false;
Vue.prototype.$dayjs = dayjs; Vue.prototype.$dayjs = dayjs;
Vue.prototype.$echarts = echarts;
Vue.prototype.$bus = new Vue(); Vue.prototype.$bus = new Vue();
router.afterEach((to, from, next) => { router.afterEach((to, from, next) => {
// 创建百度统计js // 创建百度统计js


+ 3
- 1
src/router/index.js View File

@@ -1,7 +1,7 @@
/* /*
* @Date: 2023-02-25 16:34:35 * @Date: 2023-02-25 16:34:35
* @LastEditors: JinxChen * @LastEditors: JinxChen
* @LastEditTime: 2023-03-24 14:40:54
* @LastEditTime: 2023-05-29 17:04:22
* @FilePath: \TelpoH5FrontendWeb\src\router\index.js * @FilePath: \TelpoH5FrontendWeb\src\router\index.js
* @description: * @description:
*/ */
@@ -31,6 +31,8 @@ const routes = [
{ path: '/cardActive', name: 'cardActive', component: resolve => require(['@/views/card-active'], resolve) }, { path: '/cardActive', name: 'cardActive', component: resolve => require(['@/views/card-active'], resolve) },


{ path: '/alarmDetails', name: 'alarmDetails', component: resolve => require(['@/views/alarm/alarm-details'], resolve) }, { path: '/alarmDetails', name: 'alarmDetails', component: resolve => require(['@/views/alarm/alarm-details'], resolve) },
// 健康-心理监测详情，抑郁，压力和疲劳
{ path: '/psychological', name: 'psychological', component: resolve => require(['@/views/health/psychological'], resolve) },
]; ];


const router = new VueRouter({ const router = new VueRouter({


+ 312
- 0
src/views/health/psychological/index.scss View File

@@ -0,0 +1,312 @@
$newBlue: #638EE4;
.psychological-container{
height: 100vh;
width: 100%;
overflow: hidden;
background-color: #fff;
.main {
height: calc(100vh - 45px);
overflow: scroll;
.top {
flex: 1;

.tab-bar {
padding: 23px 13px 0 13px;
.date-tab-con {
padding: 10px 0;
height: 35px;
display: flex;
justify-content: flex-start;
align-items: center;
.date-tab-list {
display: flex;
justify-content: flex-start;
align-items: center;
flex: 1;
border-radius: 15px;
color: #fff;
.date-tab-item {
height: 35px;
width: 100%;
color: #6D6D6D;
font-size: 18px;
@include center();
border: 1px solid $newBlue;
&.active {
background-color: $newBlue;
color: #fff;
}
&.notClick {
background-color: $border_color;
color: #fff;
border: 1px solid #fff;
}
}
.date-tab-item:first-child {
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
}
.date-tab-item:last-child {
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
}
}
}
}
.title {
display: flex;
justify-content: space-between;
align-items: center;
padding: 27px 16px 16px 13px;
font-size: 18px;
.title-left {
font-weight: bold;
}
}
.monitoring-count {
text-align: left;
padding: 3px 14px;
line-height: 20px;
p {
font-size: 12px;
color: #8B8B8B;
}
}
.pie-chart-con {
flex: 1;
padding: 17px 0 45px 0;
display: flex;
justify-content: space-between;
align-items: flex-start;
.pie-chart-left {
position: relative;
height: 180px;
padding-left: 23px;
width: 40%;
@include center();
#pieChart {
height: 106px;
width: 106px;
}
}
.pie-chart-right {
height: 180px;
width: 55%;
padding-right: 20px;
@include center();
.list {
flex-direction: column;
.item {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 15px;
padding: 9px 0;
.item-left {
display: flex;
justify-content: flex-start;
align-items: center;
padding-right: 10px;
.circle {
height: 12px;
width: 12px;
margin: 0 4px;
}
span {
font-size: 15px;
}
.text {
color: #000;
}
}
.item-right {
display: flex;
justify-content: flex-end;
align-items: center;
}
}
}
}
}
.statistics {
position: relative;
padding: 0 12px 36px 36px;
.list {
flex: 1;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 16px;
.item {
@include center();
width: 58px;
/* height: px2rem(136); */
flex-direction: column;
.top {
font-size: 12px;
}
.middle {
font-size: 24px;
font-weight: bold;
padding: 16px 5px 11px 5px;
}
.bottom {
font-size: 9px
}
}
}
}
}
.line {
position: relative;
height: 11px;
background-color: $lineGray;
}
.bottom {
flex: 1;
.echart-container {
height: 400px;
background-color:#fff;
padding: 0 5px;
.echart {
height: 400px;
padding: 0 5px;
}
}
.line-gray {
height: 11px;
width: 100%;
background-color: $lineGray;
margin-top: 30px;
}
.result {
.result-con {
height: 100%;
background-color: #fff;
border-radius: 10px;
&.reminder {
padding: 0 16px 20px 16px;
}
.title {
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: column;
margin-bottom: 10px;
span {
font-size: 18px;
font-weight: bold;
}
.font-28 {
font-weight: 400;
font-size: 13px;
color: #8B8B8B;
text-align: left;
}
.title-no-data {
padding: 34px 0 13px 15px;
}
p {
font-size: 12px;
color: $newBlue;
}
.title-emo {
font-size: 24px;
padding: 14px 0 21px 0;
}
.no-data {
height: 250px;
width: 100%;
@include center();
flex-direction: column;
img {
height: 110px;
width: 175px;
}
p {
color: #999;
font-size: 12px;
padding: 20px 0 65px 0;
}
}
}
.title-text {
padding: 34px 0 13px 15px;
}
.title-reminder {
padding: 34px 0 0 0;
}
.friendly-reminder, .warm-reminder {
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: column;
margin-bottom: 10px;
background-color: #F2F2F2;
padding: 20px 19px 19px 14px;
p {
font-weight: bold;
text-align: left;
padding-bottom: 11px;
font-size: 15px;
}
span {
text-align: left;
font-size: 12px;
}
}
.mood-list {
display: grid;
grid-template-columns: repeat(2, 1fr); //定义了一个 2x2 的网格布
grid-template-rows: repeat(2, 1fr);
gap: 21px;
//width: 100%;
padding: 0 44px 20px 37px;
.item {
width: 137px;
height: 94px;
/* padding: px2rem(47) px2rem(57) px2rem(49) px2rem(57); */
background-color: #F2F6FF;
@include center();
flex-direction: column;
p {
font-size: 14px;
padding: 0;
color: #666666;
.day {
padding: 5px;
font-size: 28px;
}
.day-text {
font-size: 12px
}
}
}
}
.mood-list-no-data {
height: 250px;
width: 100%;
.no-data {
@include center();
flex-direction: column;
img {
height: 110px;
width: 175px;
}
p {
color: #999;
font-size: 12px;
padding: 20px 0 65px 0;
}
}
}
}
}
}
}
.title {
font-size: 16px;
}
}

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


Write Preview
Loading…
Cancel
Save