hulei_ip
/
h5
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

大屏评估代码

This commit is contained in:
xg-29 2024-09-27 17:32:46 +08:00
parent fdd080806f
commit c584b8118c
2 changed files with 479 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
api/index.js
View File

@ -120,10 +120,12 @@ export default { // 所有接口
//http://192.171.1.22:9206/ytj-report/testReportDetails?userId=15&familyId=1
testReportDetails: (param) => ajax.get(`ytj-report/testReportDetails`, param),
queryLargeScreenData: (param) => ajax1.get(`dataDetection/facilityChart/queryLargeScreenData`, param), //数据大屏
queryLargeScreenData2: (param) => ajax1.get(`dataDetection/facilityChart/queryLargeScreenData2`, param), //数据大屏-健康趋势
queryLargeScreenData3: (param) => ajax1.get(`dataDetection/facilityChart/queryLargeScreenData3`, param), //数据大屏-部门对比分析
newselectDictList: (param) => ajax.get(`disease-assess-dict/selectDictList`, param), //疾病评估列表
newTypeList: (param) => ajax.get(`diggmindUser/typeList`, param), //
}

594
src/pages/largeScreenEvaluation/evaluationList.vue
View File

@ -1,10 +1,50 @@
<template>
<!-- 评估列表 -->
<view class="evaluation-list-container">
<view class="evaluation-list-content">
<!-- 疾病 -->
<view class="evaluation-list-content" v-show="groupShow == 1">
<view class="title-group">
<view class="title">疾病风险评估</view>
</view>
<view class="list-content">
<scroll-view scroll-y="true" class="scroll-Y">
<view class="content" v-for="(item, index) in illnessList" :key="index">
<!-- <view class="status">高风险</view> -->
<!-- <view class="status status1">中风险</view> -->
<view class="status status2" :style="{ 'color': item.riskLevelColor }" v-if="item.riskLevel">{{ item.riskLevel }}
</view>
<view class="content-info">
<image :src="item.coverAddress" class="thumb"></image>
<view class="descri-group">
<view class="name">{{ item.diseaseName == '基础评估' ? item.diseaseName : (item.diseaseName + '风险评估') }}</view>
<view class="descri">{{ item.diseaseIntroduce }}</view>
</view>
</view>
<view class="bottom-info" v-if="item.riskLevel">
<view class="detail-info">
{{ item.datePoor }}天前测过
</view>
<view class="btn-group">
<view class="btn1">查看历史结果</view>
<view class="btn1 btn2">重新评估</view>
</view>
</view>
<view class="bottom-info" v-if="item.riskLevel == null">
<view class="detail-info">
{{ item.assessCount }}人测过<text style="margin:0 10px">|</text>约{{ item.subjectCount }}题
</view>
<view class="btn">去评估</view>
</view>
</view>
</scroll-view>
</view>
</view>
<!-- 心理 -->
<view class="mind-list-content" v-show="groupShow == 2">
<view class="title-group">
<view class="title">心理健康评估</view>
</view>
<view class="list-content">
<scroll-view scroll-y="true" class="scroll-Y">
<view class="content">
@ -12,7 +52,7 @@
<!-- <view class="status status1">中风险</view> -->
<view class="status status2">低风险</view>
<view class="content-info">
<iamge src="" class="thumb"></iamge>
<image src="" class="thumb"></image>
<view class="descri-group">
<view class="name">基础评估</view>
<view class="descri">高血压是指以体循环动脉血压增高（收收收...</view>
@ -39,7 +79,7 @@
<!-- <view class="status status1">中风险</view> -->
<view class="status status2">低风险</view>
<view class="content-info">
<iamge src="" class="thumb"></iamge>
<image src="" class="thumb"></image>
<view class="descri-group">
<view class="name">基础评估</view>
<view class="descri">高血压是指以体循环动脉血压增高（收收收...</view>
@ -66,7 +106,7 @@
<!-- <view class="status status1">中风险</view> -->
<view class="status status2">低风险</view>
<view class="content-info">
<iamge src="" class="thumb"></iamge>
<image src="" class="thumb"></image>
<view class="descri-group">
<view class="name">基础评估</view>
<view class="descri">高血压是指以体循环动脉血压增高（收收收...</view>
@ -93,7 +133,7 @@
<!-- <view class="status status1">中风险</view> -->
<view class="status status2">低风险</view>
<view class="content-info">
<iamge src="" class="thumb"></iamge>
<image src="" class="thumb"></image>
<view class="descri-group">
<view class="name">基础评估</view>
<view class="descri">高血压是指以体循环动脉血压增高（收收收...</view>
@ -115,15 +155,30 @@
<view class="btn">去评估</view>
</view>
</view>
</scroll-view>
</view>
</view>
<view class="search">
<view class="search" v-show="groupShow == 1">
<image src="https://shayu5qny.yhy.ren/search_bg.png"></image>
<input placeholder="搜索评估关键词" class="inputClass" v-model="contentText" @input="input" maxlength="17" />
<view class="searchTitle" @tap="searchChange">搜索</view>
</view>
<view class="sort-part" v-show="groupShow == 2">
<scroll-view scroll-x="true" class="scroll-X">
<view :class="item.isChecked ? 'sort1' : 'sort'" v-for="(item, index) in sortList" :key="index"
@click="onChangeSort(item, index)">
<text>{{ item.name }}</text>
</view>
</scroll-view>
</view>
<view class="bottom-part">
<view :class="item.isChecked ? 'checked-content1' : 'checked-content'" v-for="(item, index) in checkList"
:key="index" @click="onChangeEvaluation(item, index)">
<image :src="item.isChecked ? item.iconChecked : item.icon" class="checked-icon"></image>
<view class="title">{{ item.name }}</view>
<view class="english">{{ item.englishName }}</view>
</view>
</view>
</view>
</template>
@ -131,12 +186,159 @@
export default {
data() {
return {
contentText:""
contentText: "",
illnessList: [],//疾病评估列表
checkList: [
{
id: 1,
name: "生活方式评估",
englishName: 'lifestyle',
icon: "https://shayu5qny.yhy.ren/life_icon.png",
iconChecked: 'https://shayu5qny.yhy.ren/life_icon.png',
isChecked: false
},
{
id: 2,
name: "疾病风险评估",
englishName: 'Disease risk',
icon: "https://shayu5qny.yhy.ren/illness_icon.png",
iconChecked: 'https://shayu5qny.yhy.ren/illness_icon_checked.png',
isChecked: false
},
{
id: 1,
name: "心理健康评估",
englishName: 'Mental health',
icon: "https://shayu5qny.yhy.ren/mind_icon.png",
iconChecked: 'https://shayu5qny.yhy.ren/mind_icon_checked.png',
isChecked: false
}
],
sortList: [
{
id: 1,
name: '热门评估',
isChecked: false,
},
{
id: 2,
name: '心理健康',
isChecked: false,
},
{
id: 3,
name: '情感关系',
isChecked: false,
},
{
id: 4,
name: '工作状态',
isChecked: false,
},
{
id: 5,
name: '人格测评',
isChecked: false,
},
{
id: 6,
name: '育儿亲子',
isChecked: false,
},
{
id: 7,
name: '学生专区',
isChecked: false,
},
],
groupShow: "1", //1疾病风险 2心理健康
}
},
methods: {
searchChange(){
// 搜索
searchChange() {
},
//选择评估
onChangeEvaluation(item, index) {
this.groupShow = index
this.checkList = this.checkList.map((item, index1) => {
if (index == index1 && index > 0) {
item.isChecked = true;
} else {
item.isChecked = false;
}
return item;
});
if (index == 0) {
} else if (index == 1) {
this.newselectDictList()
} else {
this.newTypeList()
}
},
//选择心理评估类型
onChangeSort(item, index) {
this.sortList = this.sortList.map((item, index1) => {
if (index == index1) {
item.isChecked = true;
} else {
item.isChecked = false;
}
return item;
});
},
/**********************接口请求************************/
//疾病风险评估列表
newselectDictList() {
this.$API.newselectDictList({
data: {
diseaseType: 0,
diseaseName: '',
familyId: 0,
openId: 'ot5qo4g199gwfsI1wnpoi-xP_1cA',
token: 'ot5qo4g199gwfsI1wnpoi-xP_1cA',
userId: 7792,
deptId: 1,
agentMerId: 5,
agentMerCode: 5,
customerCode: 11,
customerId: 11,
customerLoginId: 11,
}
}).then(res => {
if (res.code == 200) {
this.illnessList = res.data
}
})
},
//newTypeList
newTypeList() {
this.$API.newTypeList({
data: {
openId: 'ot5qo4g199gwfsI1wnpoi-xP_1cA',
token: 'ot5qo4g199gwfsI1wnpoi-xP_1cA',
userId: 7792,
deptId: 1,
agentMerId: 5,
agentMerCode: 5,
customerCode: 11,
customerId: 11,
customerLoginId: 11,
}
}).then(res=>{
if(res.code == 200){
let list = res.data.map(item=>{
return{
...item,
isChecked:false
}
})
this.sortList = list
this.sortList[0].isChecked = true
}
})
}
}
}
@ -176,142 +378,142 @@ export default {
text-transform: none;
}
}
}
.list-content {
height: calc(100% - 160px);
.list-content {
height: calc(100% - 160px);
width: 100%;
.scroll-Y {
width: 100%;
height: 100%;
.scroll-Y {
.content {
width: 100%;
height: 100%;
height: 326px;
background: rgba(233, 246, 248, 0.6);
border-radius: 12px 12px 12px 12px;
margin-bottom: 32px;
padding: 32px;
position: relative;
.content {
.status {
position: absolute;
right: 32px;
top: 32px;
font-weight: 500;
font-size: 32px;
color: #FF3B30;
line-height: 38px;
font-style: normal;
text-transform: none;
}
.status1 {
color: #ED7D2B;
}
.status2 {
color: #10AB4A;
}
.content-info {
width: 100%;
height: 326px;
background: rgba(233, 246, 248, 0.6);
border-radius: 12px 12px 12px 12px;
margin-bottom: 32px;
padding: 32px;
position: relative;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
.status {
position: absolute;
right: 32px;
top: 32px;
font-weight: 500;
font-size: 32px;
color: #FF3B30;
line-height: 38px;
font-style: normal;
text-transform: none;
.thumb {
width: 174px;
height: 174px;
margin-right: 28px;
}
.status1 {
color: #ED7D2B;
}
.status2 {
color: #10AB4A;
}
.content-info {
width: 100%;
.descri-group {
display: flex;
flex-direction: row;
align-items: center;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
.thumb {
width: 174px;
height: 174px;
margin-right: 28px;
background: red;
.name {
font-weight: 500;
font-size: 42px;
color: #333333;
line-height: 49px;
font-style: normal;
text-transform: none;
margin-bottom: 20px;
}
.descri-group {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
.name {
font-weight: 500;
font-size: 42px;
color: #333333;
line-height: 49px;
font-style: normal;
text-transform: none;
margin-bottom: 20px;
}
.descri {
font-weight: 400;
font-size: 32px;
color: #666666;
line-height: 38px;
font-style: normal;
text-transform: none;
overflow: hidden;
/* 隐藏超出容器的内容 */
white-space: nowrap;
/* 保持文本在一行内显示 */
text-overflow: ellipsis;
/* 超出内容用省略号表示 */
}
}
}
.bottom-info {
margin-top: 32px;
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
.detail-info {
.descri {
width: 654px;
font-weight: 400;
font-size: 32px;
color: #666666;
line-height: 38px;
font-style: normal;
text-transform: none;
overflow: hidden;
/* 隐藏超出容器的内容 */
white-space: nowrap;
/* 保持文本在一行内显示 */
text-overflow: ellipsis;
/* 超出内容用省略号表示 */
}
}
}
.btn {
width: 182px;
height: 70px;
background: linear-gradient(#3AAFB8 0%, #6ACBD1 100%);
border-radius: 35px 35px 35px 35px;
.bottom-info {
margin-top: 32px;
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
.detail-info {
font-weight: 400;
font-size: 32px;
color: #666666;
line-height: 38px;
font-style: normal;
text-transform: none;
}
.btn {
width: 182px;
height: 70px;
background: linear-gradient(#3AAFB8 0%, #6ACBD1 100%);
border-radius: 35px 35px 35px 35px;
font-weight: 400;
font-size: 34px;
color: #FFFFFF;
line-height: 60px;
text-align: center;
font-style: normal;
text-transform: none;
}
.btn-group {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
.btn1 {
font-weight: 400;
font-size: 34px;
color: #FFFFFF;
line-height: 60px;
text-align: center;
font-size: 32px;
color: #3AAFB8;
line-height: 38px;
text-align: left;
font-style: normal;
text-decoration-line: underline;
text-transform: none;
}
.btn-group {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
.btn1 {
font-weight: 400;
font-size: 32px;
color: #3AAFB8;
line-height: 38px;
text-align: left;
font-style: normal;
text-decoration-line: underline;
text-transform: none;
}
.btn2 {
margin-left: 32px;
}
.btn2 {
margin-left: 32px;
}
}
}
@ -319,6 +521,34 @@ export default {
}
}
.mind-list-content {
width: 100%;
height: 1418px;
border-radius: 12px 12px 12px 12px;
padding: 0 40px;
background: #FFFFFF;
.title-group {
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
.title {
margin-top: 48px;
margin-bottom: 40px;
font-weight: bold;
font-size: 48px;
color: #17191A;
line-height: 56px;
font-style: normal;
text-transform: none;
}
}
}
.search {
width: 100%;
height: 112px;
@ -351,5 +581,131 @@ export default {
color: #FFFFFF;
}
}
.sort-part {
width: 100%;
height: 120px;
background: rgba(233, 246, 248, 0.6);
.scroll-X {
height: 100%;
min-width: 100%;
display: flex;
white-space: nowrap;
.sort {
display: inline-block;
width: 272px;
height: 120px;
font-weight: 400;
font-size: 36px;
color: #333333;
line-height: 120px;
text-align: center;
font-style: normal;
text-transform: none;
background: rgba(233, 246, 248, 0.6);
}
.sort1 {
display: inline-block;
width: 272px;
height: 120px;
font-weight: 500;
font-size: 40px;
color: #3AAFB8;
line-height: 120px;
text-align: center;
font-style: normal;
text-transform: none;
background: #fff;
border: 1px solid #FFFFFF;
}
}
}
.bottom-part {
margin-top: 44px;
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
.checked-content {
width: 312px;
height: 262px;
background: rgba(255, 255, 255, 0.4);
border-radius: 12px 12px 12px 12px;
border: 1px solid #FFFFFF;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.checked-icon {
width: 88px;
height: 88px;
}
.title {
margin-top: 16px;
font-weight: 500;
font-size: 28px;
color: #42444F;
line-height: 33px;
font-style: normal;
text-transform: none;
}
.english {
margin-top: 6px;
font-weight: 400;
font-size: 18px;
color: #6E7477;
line-height: 21px;
font-style: normal;
text-transform: none;
}
}
.checked-content1 {
width: 312px;
height: 262px;
border-radius: 12px 12px 12px 12px;
background: url(https://shayu5qny.yhy.ren/checked_bg.png) no-repeat;
background-size: cover;
border: 1px solid #FFFFFF;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.checked-icon {
width: 88px;
height: 88px;
}
.title {
margin-top: 16px;
font-weight: 500;
font-size: 28px;
color: #fff;
line-height: 33px;
font-style: normal;
text-transform: none;
}
.english {
margin-top: 6px;
font-weight: 400;
font-size: 18px;
color: #fff;
line-height: 21px;
font-style: normal;
text-transform: none;
}
}
}
}
</style>