diff --git a/README.md b/README.md index c896dcc..0979f76 100644 --- a/README.md +++ b/README.md @@ -424,4 +424,10 @@ feature `2023.5.13` update - 告警 - - 修改 误报文字为 免告警 \ No newline at end of file + - 修改 误报文字为 免告警 + +## v1.0.52 +`2023.5.30` +feature +- 增加 心理监测详情页面，抑郁，压力和疲劳当天图表展示 +- 增加 echarts图表依赖 diff --git a/package-lock.json b/package-lock.json index c273b21..e7eae5c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,6 +14,7 @@ "clipboard": "^2.0.11", "core-js": "^3.6.5", "dayjs": "^1.11.7", + "echarts": "^5.4.1", "html2canvas": "^1.4.1", "nprogress": "^0.2.0", "rxjs": "^7.8.0", @@ -7174,6 +7175,20 @@ "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": { "version": "0.15.3", "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", "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=", "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": { @@ -25702,6 +25730,22 @@ "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": { "version": "0.15.3", "resolved": "https://registry.npmjs.org/editorconfig/-/editorconfig-0.15.3.tgz", @@ -36093,6 +36137,21 @@ "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==" + } + } } } } diff --git a/package.json b/package.json index 2949606..c3e55b7 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,8 @@ "vue-router": "^3.2.0", "vuex": "^3.4.0", "weixin-js-sdk": "^1.6.0", - "clipboard": "^2.0.11" + "clipboard": "^2.0.11", + "echarts": "^5.4.1" }, "devDependencies": { "@vue/cli-plugin-babel": "^4.5.0", diff --git a/src/assets/css/public.scss b/src/assets/css/public.scss index e8444a8..4985566 100644 --- a/src/assets/css/public.scss +++ b/src/assets/css/public.scss @@ -3,6 +3,8 @@ $blue: #2599ff; $next: #8bc6fa; $red: #ff8c8c; $background: #f2f4f5; +// 灰色线条 +$lineGray: #F5F5F5; $border_color: #d1d1d1; /* 绑定时选择人物关系图片head.png */ $spriteWidthHead: 180; diff --git a/src/assets/img/no_data_01.png b/src/assets/img/no_data_01.png new file mode 100644 index 0000000..9a84f95 Binary files /dev/null and b/src/assets/img/no_data_01.png differ diff --git a/src/config/models.js b/src/config/models.js index 53c7907..86d0f77 100644 --- a/src/config/models.js +++ b/src/config/models.js @@ -1,11 +1,11 @@ /* * @Date: 2021-11-20 10:26:39 * @LastEditors: JinxChen - * @LastEditTime: 2023-05-13 22:16:53 + * @LastEditTime: 2023-05-29 17:10:20 * @FilePath: \TelpoH5FrontendWeb\src\config\models.js * @description: */ -export const VERSION_MODEL = '1.0.51F'; //版本号 +export const VERSION_MODEL = '1.0.52F'; //版本号 export const IMAGE_URL = { production: '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", // 随手精灵百度流量统计 正式环境 test: "https://hm.baidu.com/hm.js?edb76b471e997167b7782c1513382771", // 随手精灵百度流量统计 测试环境 development: "https://hm.baidu.com/hm.js?edb76b471e997167b7782c1513382771", // 随手精灵百度流量统计 测试环境 -} \ No newline at end of file +}; +// 情绪模型 +export const EmotionModel = { + // 抑郁 + depression: { + name: '抑郁', + type: 2 + }, + // 压力 + stress: { + name: '压力', + type: 1 + }, + // 疲劳 + tiredness: { + name: '疲劳', + type: 3 + } +}; \ No newline at end of file diff --git a/src/main.js b/src/main.js index d507f3e..b0b0fc5 100644 --- a/src/main.js +++ b/src/main.js @@ -1,7 +1,7 @@ /* * @Date: 2022-01-19 10:08:26 * @LastEditors: JinxChen - * @LastEditTime: 2023-05-10 09:15:16 + * @LastEditTime: 2023-05-30 10:58:58 * @FilePath: \TelpoH5FrontendWeb\src\main.js * @description: */ @@ -14,6 +14,8 @@ import '@/assets/css/reset.scss'; import dayjs from 'dayjs'; // ui库按需引入 import 'vant/lib/index.css'; +// 引入echarts +import * as echarts from 'echarts'; import { BaiduStatisticsModel } from '@/config/models'; import { Button, @@ -100,13 +102,14 @@ Vue Vue.config.productionTip = false; Vue.config.devtools = true; + // 全局配置 loading Toast.setDefaultOptions('success', { - duration: 2500, + duration: 1500, forbidClick: true, }); Toast.setDefaultOptions('loading', { - duration: 0, + duration: 1500, forbidClick: true, }); Dialog.setDefaultOptions({ @@ -115,6 +118,7 @@ Dialog.setDefaultOptions({ }); Vue.config.productionTip = false; Vue.prototype.$dayjs = dayjs; +Vue.prototype.$echarts = echarts; Vue.prototype.$bus = new Vue(); router.afterEach((to, from, next) => { // 创建百度统计js diff --git a/src/router/index.js b/src/router/index.js index 88fa066..c106406 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -1,7 +1,7 @@ /* * @Date: 2023-02-25 16:34:35 * @LastEditors: JinxChen - * @LastEditTime: 2023-03-24 14:40:54 + * @LastEditTime: 2023-05-29 17:04:22 * @FilePath: \TelpoH5FrontendWeb\src\router\index.js * @description: */ @@ -31,6 +31,8 @@ const routes = [ { path: '/cardActive', name: 'cardActive', component: resolve => require(['@/views/card-active'], 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({ diff --git a/src/views/health/psychological/index.scss b/src/views/health/psychological/index.scss new file mode 100644 index 0000000..0d3f1fc --- /dev/null +++ b/src/views/health/psychological/index.scss @@ -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; + } +} \ No newline at end of file diff --git a/src/views/health/psychological/index.vue b/src/views/health/psychological/index.vue new file mode 100644 index 0000000..a9d466c --- /dev/null +++ b/src/views/health/psychological/index.vue @@ -0,0 +1,1077 @@ + + + + + + \ No newline at end of file