kola-web
6 days ago
31 changed files with 1401 additions and 34 deletions
|
After Width: | Height: | Size: 272 KiB |
|
After Width: | Height: | Size: 444 KiB |
|
After Width: | Height: | Size: 279 KiB |
|
After Width: | Height: | Size: 64 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 32 KiB |
|
After Width: | Height: | Size: 28 KiB |
|
After Width: | Height: | Size: 30 KiB |
@ -0,0 +1,5 @@
@@ -0,0 +1,5 @@
|
||||
{ |
||||
"usingComponents": { |
||||
"navbar": "/components/navbar/index" |
||||
} |
||||
} |
||||
@ -0,0 +1,168 @@
@@ -0,0 +1,168 @@
|
||||
page { |
||||
background-color: #f6f8f9; |
||||
} |
||||
|
||||
.page { |
||||
min-height: 100vh; |
||||
padding-bottom: 240rpx; |
||||
.reference { |
||||
font-size: 24rpx; |
||||
color: #69686e; |
||||
vertical-align: text-top; |
||||
line-height: 1; |
||||
} |
||||
.module1 { |
||||
margin: 32rpx 40rpx 0; |
||||
padding: 214rpx 40rpx 0; |
||||
height: 1212rpx; |
||||
box-sizing: border-box; |
||||
.content { |
||||
font-size: 32rpx; |
||||
color: #69686e; |
||||
line-height: 56rpx; |
||||
} |
||||
.container { |
||||
margin-top: 32rpx; |
||||
background: #f6f8f9; |
||||
border-radius: 24rpx 24rpx 24rpx 24rpx; |
||||
.title { |
||||
padding-top: 32rpx; |
||||
display: flex; |
||||
align-items: center; |
||||
gap: 22rpx; |
||||
font-size: 36rpx; |
||||
color: #211d2e; |
||||
font-weight: bold; |
||||
&::before { |
||||
content: ''; |
||||
width: 8rpx; |
||||
height: 36rpx; |
||||
background: #b982ff; |
||||
border-radius: 0rpx 0rpx 0rpx 0rpx; |
||||
} |
||||
} |
||||
.progress { |
||||
margin: 30rpx 30rpx 0; |
||||
padding-bottom: 32rpx; |
||||
.row { |
||||
display: flex; |
||||
gap: 16rpx; |
||||
.aside { |
||||
flex-shrink: 0; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
.line-top { |
||||
height: 12rpx; |
||||
border-right: 1px dashed rgba(185, 130, 255, 0.29); |
||||
} |
||||
.side { |
||||
position: relative; |
||||
width: 32rpx; |
||||
height: 32rpx; |
||||
border-radius: 50%; |
||||
background-color: rgba(185, 130, 255, 0.3); |
||||
&::after { |
||||
position: absolute; |
||||
top: 50%; |
||||
left: 50%; |
||||
transform: translate(-50%, -50%); |
||||
display: block; |
||||
content: ''; |
||||
width: 18rpx; |
||||
height: 18rpx; |
||||
background-color: #b982ff; |
||||
border-radius: 50%; |
||||
} |
||||
} |
||||
.line { |
||||
flex: 1; |
||||
border-right: 1px dashed rgba(185, 130, 255, 0.29); |
||||
} |
||||
} |
||||
.r-content { |
||||
font-size: 32rpx; |
||||
color: #69686e; |
||||
line-height: 56rpx; |
||||
.name { |
||||
font-size: 32rpx; |
||||
color: #211d2e; |
||||
font-weight: bold; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.tip { |
||||
margin-top: 26rpx; |
||||
font-size: 32rpx; |
||||
color: #69686e; |
||||
text-align: center; |
||||
.num { |
||||
font-size: 44rpx; |
||||
color: #b982ff; |
||||
font-weight: bold; |
||||
} |
||||
} |
||||
} |
||||
.module2 { |
||||
margin: 32rpx 40rpx 0; |
||||
padding: 40rpx; |
||||
background: #ffffff; |
||||
border-radius: 24rpx 24rpx 24rpx 24rpx; |
||||
.title { |
||||
font-size: 32rpx; |
||||
color: #211d2e; |
||||
font-weight: bold; |
||||
} |
||||
.content { |
||||
margin-top: 20rpx; |
||||
font-size: 28rpx; |
||||
color: #adacb2; |
||||
line-height: 56rpx; |
||||
} |
||||
} |
||||
.footer { |
||||
position: fixed; |
||||
bottom: 0; |
||||
left: 0; |
||||
padding: 20rpx 40rpx calc(20rpx + env(safe-area-inset-bottom)); |
||||
width: 100%; |
||||
box-sizing: border-box; |
||||
display: flex; |
||||
align-items: center; |
||||
gap: 14rpx; |
||||
background-color: #fff; |
||||
.share { |
||||
padding: 0 38rpx; |
||||
margin: 0; |
||||
border: none; |
||||
line-height: 1; |
||||
background-color: transparent; |
||||
&::after { |
||||
border: none; |
||||
padding: 0; |
||||
} |
||||
.icon { |
||||
width: 44rpx; |
||||
height: 44rpx; |
||||
} |
||||
.name { |
||||
margin-top: 12rpx; |
||||
font-size: 28rpx; |
||||
color: #b982ff; |
||||
} |
||||
} |
||||
.btn { |
||||
flex: 1; |
||||
height: 88rpx; |
||||
font-size: 32rpx; |
||||
color: #ffffff; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
background: linear-gradient(197deg, #ffbcf9 0%, #b982ff 100%); |
||||
border-radius: 100rpx 100rpx 100rpx 100rpx; |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,13 @@
@@ -0,0 +1,13 @@
|
||||
const _app = getApp<IAppOption>() |
||||
|
||||
Page({ |
||||
data: {}, |
||||
onLoad() {}, |
||||
handleAdd() { |
||||
wx.navigateTo({ |
||||
url: '/patient/pages/qolAdd/index', |
||||
}) |
||||
}, |
||||
}) |
||||
|
||||
export {} |
||||
@ -0,0 +1,89 @@
@@ -0,0 +1,89 @@
|
||||
<navbar custom-style="background:{{background}}" fixed></navbar> |
||||
<view |
||||
class="page" |
||||
style="background: url('/images/bg15.png') no-repeat top center/100% 518rpx;padding-top:{{pageTop}}px;" |
||||
> |
||||
<view class="module1" style="background: url('/images/bg16.png') no-repeat top center/cover"> |
||||
<view class="content"> |
||||
<view> |
||||
研究表明，GO-QOL生活质量评估能敏锐反映患者的主观感受变化，是评估治疗效果的重要工具 |
||||
<text class="reference">[1]</text> |
||||
</view> |
||||
<view>它不仅能帮你看清自己“主观世界”的变化还能成为你和医生沟通的重要桥梁。</view> |
||||
</view> |
||||
<view class="container"> |
||||
<view class="title">适用场景</view> |
||||
<view class="progress"> |
||||
<view class="row"> |
||||
<view class="aside"> |
||||
<view class="line-top" style="opacity: 0;"></view> |
||||
<view class="side"></view> |
||||
<view class="line"></view> |
||||
</view> |
||||
<view class="r-content"> |
||||
<text class="name">初诊时</text> |
||||
了解疾病对你生活造成了多大影响，作为基线记录。 |
||||
<text class="reference">[3]</text> |
||||
</view> |
||||
</view> |
||||
<view class="row"> |
||||
<view class="aside"> |
||||
<view class="line-top"></view> |
||||
<view class="side"></view> |
||||
<view class="line"></view> |
||||
</view> |
||||
<view class="r-content"> |
||||
<text class="name">治疗过程中</text> |
||||
分数上升说明你的主观感受得到改善，让你不再怀疑“是不是治疗白做了?" |
||||
<text class="reference">[4]</text> |
||||
</view> |
||||
</view> |
||||
<view class="row"> |
||||
<view class="aside"> |
||||
<view class="line-top"></view> |
||||
<view class="side"></view> |
||||
<view class="line"></view> |
||||
</view> |
||||
<view class="r-content"> |
||||
<text class="name">病情稳定期</text> |
||||
判断是否还需要心理支持或功能康复训练。 |
||||
<text class="reference">[2-3]</text> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="tip"> |
||||
共 |
||||
<text class="num">26</text> |
||||
题，可能会占用您3分钟 |
||||
</view> |
||||
</view> |
||||
<view class="module2"> |
||||
<view class="title">参考文献:</view> |
||||
<view class="content"> |
||||
<view> |
||||
[1]Kahaly, George J et al.“Teprotumumab lmproves Quality of Life in Thyroid Eye Disease: Meta-analysis and |
||||
Matching adjusted Indirect Comparison." Journal of the EndocrineSociety vol.9,6 bvaf063.8 Apr.2025 |
||||
</view> |
||||
<view> |
||||
[2] Lee, T.H.B., & Sundar, G.(2020). Quality of Life in ThyroidEye Disease: A Systematic Review.Ophthalmic |
||||
plastic andreconstructive surgery,36(2),118-126. |
||||
</view> |
||||
<view> |
||||
[3] Dietrich A, Taylor P, White P, et al. Establishing theusefulness of the GO-QOL in a UK hospital-treated |
||||
populationwith thyroid eye disease in the ClRTED trial. Psychol HealthMed.2018;23(sup1):1341-1355. |
||||
</view> |
||||
<view> |
||||
[4] Smith TJ, Cockerham K, Barretto N, et al. Bridging andValidation of the Specific Graves Ophthalmopathy |
||||
Quality ofLife Questionnaire With Health State Utility Values. EndocrPract.2024;30(5):470-475. |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="footer"> |
||||
<button class="share" open-type="share"> |
||||
<image class="icon" src="/images/icon69.png"></image> |
||||
<view class="name">分享</view> |
||||
</button> |
||||
<view class="btn" bind:tap="handleAdd">开始评测</view> |
||||
</view> |
||||
</view> |
||||
@ -0,0 +1,5 @@
@@ -0,0 +1,5 @@
|
||||
{ |
||||
"usingComponents": { |
||||
"navbar": "/components/navbar/index" |
||||
} |
||||
} |
||||
@ -0,0 +1,109 @@
@@ -0,0 +1,109 @@
|
||||
page { |
||||
background-color: #f6f8f9; |
||||
} |
||||
|
||||
.page { |
||||
.page-header { |
||||
padding: 40rpx; |
||||
position: sticky; |
||||
top: 0; |
||||
left: 0; |
||||
.progress { |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
gap: 10rpx; |
||||
.p-item { |
||||
flex: 1; |
||||
.name { |
||||
font-size: 36rpx; |
||||
color: #adacb2; |
||||
line-height: 44rpx; |
||||
} |
||||
.line { |
||||
margin-top: 16rpx; |
||||
height: 16rpx; |
||||
background: #ffffff; |
||||
border-radius: 0rpx 0rpx 0rpx 0rpx; |
||||
} |
||||
&.active { |
||||
.name { |
||||
color: #b982ff; |
||||
} |
||||
.line { |
||||
background: #b982ff; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.title { |
||||
margin-top: 44rpx; |
||||
font-size: 36rpx; |
||||
color: #211d2e; |
||||
font-weight: bold; |
||||
} |
||||
.content { |
||||
margin-top: 24rpx; |
||||
font-size: 32rpx; |
||||
color: #211d2e; |
||||
line-height: 48rpx; |
||||
} |
||||
} |
||||
.module { |
||||
padding: 0 40rpx 200rpx; |
||||
.row { |
||||
margin-bottom: 52rpx; |
||||
.title { |
||||
font-size: 36rpx; |
||||
color: #211d2e; |
||||
font-weight: bold; |
||||
} |
||||
.select { |
||||
margin-top: 24rpx; |
||||
display: grid; |
||||
grid-template-columns: repeat(3, 1fr); |
||||
gap: 24rpx; |
||||
.s-item1, |
||||
.s-item2, |
||||
.s-item3 { |
||||
padding: 18rpx; |
||||
font-size: 32rpx; |
||||
color: #69686e; |
||||
line-height: 48rpx; |
||||
text-align: center; |
||||
background-color: #f6f8f9; |
||||
border-radius: 16rpx; |
||||
} |
||||
.s-item1.active { |
||||
background-color: #dafdee; |
||||
color: #1ec580; |
||||
} |
||||
.s-item2.active { |
||||
background-color: #fff4e0; |
||||
color: #ffa300; |
||||
} |
||||
.s-item3.active { |
||||
background-color: #ffe7e7; |
||||
color: #ef3939; |
||||
} |
||||
} |
||||
} |
||||
.btn { |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
height: 88rpx; |
||||
font-size: 32rpx; |
||||
color: #ffffff; |
||||
background: linear-gradient(197deg, #ffbcf9 0%, #b982ff 100%); |
||||
border-radius: 100rpx 100rpx 100rpx 100rpx; |
||||
} |
||||
.prev { |
||||
margin-top: 20rpx; |
||||
padding: 20rpx; |
||||
text-align: center; |
||||
font-size: 32rpx; |
||||
color: #69686e; |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,28 @@
@@ -0,0 +1,28 @@
|
||||
const _app = getApp<IAppOption>() |
||||
|
||||
Page({ |
||||
data: { |
||||
step: 0, |
||||
}, |
||||
onLoad() {}, |
||||
handleNext() { |
||||
this.setData({ |
||||
step: 1, |
||||
}) |
||||
wx.pageScrollTo({ |
||||
scrollTop: 0, |
||||
}) |
||||
}, |
||||
handleSubmit() { |
||||
wx.navigateTo({ |
||||
url: '/patient/pages/qolResult/index', |
||||
}) |
||||
}, |
||||
handlePrev() { |
||||
this.setData({ |
||||
step: 0, |
||||
}) |
||||
}, |
||||
}) |
||||
|
||||
export {} |
||||
@ -0,0 +1,45 @@
@@ -0,0 +1,45 @@
|
||||
<navbar custom-style="background:{{background}}" fixed></navbar> |
||||
<view class="page"> |
||||
<view |
||||
class="page-header" |
||||
style="background: #f6f8f9 url('/images/bg15.png') no-repeat top center/100% 518rpx;padding-top:{{pageTop+20}}px;" |
||||
> |
||||
<view class="progress"> |
||||
<view class="p-item active"> |
||||
<view class="name">视觉功能</view> |
||||
<view class="line"></view> |
||||
</view> |
||||
<view class="p-item {{step==1 && 'active'}}"> |
||||
<view class="name">外观</view> |
||||
<view class="line"></view> |
||||
</view> |
||||
</view> |
||||
<view class="title">请根据过去1周的情况填写</view> |
||||
<view class="content">过去一周内，甲状腺相关眼病是否影响您做以下的事情?根据您的实际情况选择。</view> |
||||
</view> |
||||
<view class="module" wx:if="{{step==0}}"> |
||||
<view class="row" wx:for="{{8}}" wx:key="index"> |
||||
<view class="title">1.骑自行车或电动车</view> |
||||
<view class="select"> |
||||
<view class="s-item1 active">没学过</view> |
||||
<view class="s-item1 active">没学过</view> |
||||
<view class="s-item2 active">没学过</view> |
||||
<view class="s-item3 active">没学过</view> |
||||
</view> |
||||
</view> |
||||
<view class="btn" bind:tap="handleNext">下一页（1/2）</view> |
||||
</view> |
||||
<view class="module" wx:if="{{step==1}}"> |
||||
<view class="row" wx:for="{{8}}" wx:key="index"> |
||||
<view class="title">1.骑自行车或电动车</view> |
||||
<view class="select"> |
||||
<view class="s-item1 active">没学过</view> |
||||
<view class="s-item1 active">没学过</view> |
||||
<view class="s-item2 active">没学过</view> |
||||
<view class="s-item3 active">没学过</view> |
||||
</view> |
||||
</view> |
||||
<view class="btn" bind:tap="handleSubmit">提交（2/2）</view> |
||||
<view class="prev" bind:tap="handlePrev">上一步</view> |
||||
</view> |
||||
</view> |
||||
@ -0,0 +1,10 @@
@@ -0,0 +1,10 @@
|
||||
{ |
||||
"navigationStyle": "default", |
||||
"navigationBarTitleText": "评估报告", |
||||
"usingComponents": { |
||||
"navbar": "/components/navbar/index", |
||||
"van-tab": "@vant/weapp/tab/index", |
||||
"van-tabs": "@vant/weapp/tabs/index", |
||||
"ec-canvas": "/components/ec-canvas/ec-canvas" |
||||
} |
||||
} |
||||
@ -0,0 +1,171 @@
@@ -0,0 +1,171 @@
|
||||
page { |
||||
background-color: #f6f8f9; |
||||
} |
||||
|
||||
.page { |
||||
.page-header { |
||||
background-color: #fff; |
||||
.form { |
||||
display: flex; |
||||
justify-content: flex-end; |
||||
.date { |
||||
padding: 18rpx; |
||||
display: flex; |
||||
align-items: center; |
||||
gap: 10rpx; |
||||
font-size: 32rpx; |
||||
color: #69686e; |
||||
.icon { |
||||
transform: rotate(90deg); |
||||
font-size: 20rpx; |
||||
color: #adacb2; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.chart-list { |
||||
padding: 32rpx 40rpx 0; |
||||
.chart-card { |
||||
margin-bottom: 24rpx; |
||||
padding: 32rpx; |
||||
background-color: #fff; |
||||
border-radius: 24rpx; |
||||
.title { |
||||
font-size: 32rpx; |
||||
color: #211d2e; |
||||
font-weight: bold; |
||||
} |
||||
.chart { |
||||
height: 420rpx; |
||||
} |
||||
} |
||||
} |
||||
.list { |
||||
margin: 28rpx 40rpx 0; |
||||
padding-bottom: 32rpx; |
||||
.list-title { |
||||
font-size: 36rpx; |
||||
color: #211d2e; |
||||
font-weight: bold; |
||||
} |
||||
.list-container { |
||||
.row { |
||||
display: flex; |
||||
gap: 16rpx; |
||||
.aside { |
||||
flex-shrink: 0; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
.line-top { |
||||
height: 58rpx; |
||||
border-right: 1px dashed rgba(185, 130, 255, 0.29); |
||||
} |
||||
.side { |
||||
position: relative; |
||||
width: 32rpx; |
||||
height: 32rpx; |
||||
border-radius: 50%; |
||||
background-color: rgba(185, 130, 255, 0.3); |
||||
&::after { |
||||
position: absolute; |
||||
top: 50%; |
||||
left: 50%; |
||||
transform: translate(-50%, -50%); |
||||
display: block; |
||||
content: ''; |
||||
width: 18rpx; |
||||
height: 18rpx; |
||||
background-color: #b982ff; |
||||
border-radius: 50%; |
||||
} |
||||
} |
||||
.line { |
||||
flex: 1; |
||||
border-right: 1px dashed rgba(185, 130, 255, 0.29); |
||||
} |
||||
} |
||||
.r-container { |
||||
padding-top: 48rpx; |
||||
flex: 1; |
||||
.date { |
||||
font-size: 32rpx; |
||||
color: #211d2e; |
||||
font-weight: bold; |
||||
} |
||||
.r-card { |
||||
margin-top: 16rpx; |
||||
padding: 24rpx 32rpx; |
||||
border-radius: 24rpx; |
||||
background-color: #fff; |
||||
.wrap { |
||||
padding-bottom: 32rpx; |
||||
display: flex; |
||||
align-items: center; |
||||
gap: 22rpx; |
||||
border-bottom: 1px dashed rgba(33, 29, 46, 0.05); |
||||
.num { |
||||
font-size: 104rpx; |
||||
color: #1ec580; |
||||
font-weight: bold; |
||||
line-height: 1; |
||||
} |
||||
.inner { |
||||
.label { |
||||
padding: 4rpx 16rpx; |
||||
border-radius: 50rpx 50rpx 50rpx 0; |
||||
display: inline-block; |
||||
font-size: 28rpx; |
||||
color: #ffffff; |
||||
line-height: 36rpx; |
||||
background: linear-gradient(330deg, #1ec580 0%, #4feaaa 100%); |
||||
} |
||||
.name { |
||||
margin-top: 12rpx; |
||||
font-size: 28rpx; |
||||
color: #adacb2; |
||||
} |
||||
} |
||||
} |
||||
.stat { |
||||
padding-top: 24rpx; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
.s-item { |
||||
font-size: 32rpx; |
||||
color: #adacb2; |
||||
display: flex; |
||||
align-items: center; |
||||
gap: 24rpx; |
||||
.score { |
||||
color: #211d2e; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.page-footer { |
||||
position: fixed; |
||||
bottom: 0; |
||||
left: 0; |
||||
width: 100%; |
||||
box-sizing: border-box; |
||||
padding: 20rpx 40rpx calc(20rpx + env(safe-area-inset-bottom)); |
||||
background-color: #fff; |
||||
box-shadow: 0 8rpx 32rpx rgba(25, 0, 57, 0.07); |
||||
.btn { |
||||
height: 88rpx; |
||||
font-size: 32rpx; |
||||
color: #ffffff; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
background: linear-gradient(197deg, #ffbcf9 0%, #b982ff 100%); |
||||
border-radius: 100rpx 100rpx 100rpx 100rpx; |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,227 @@
@@ -0,0 +1,227 @@
|
||||
import dayjs from 'dayjs' |
||||
const _app = getApp<IAppOption>() |
||||
let echarts: any = null |
||||
|
||||
Page({ |
||||
data: { |
||||
type: '1', |
||||
BeginMonth: '', |
||||
EndMonth: '', |
||||
}, |
||||
chartComponent1: null as any, |
||||
chartComponent2: null as any, |
||||
chartComponent3: null as any, |
||||
async onLoad() { |
||||
this.handleChangeType() |
||||
echarts = await require.async('../../../gift/compontnts/echart/echarts.js') |
||||
this.chartComponent1 = this.selectComponent('#chart1') |
||||
this.chartComponent2 = this.selectComponent('#chart2') |
||||
this.chartComponent3 = this.selectComponent('#chart3') |
||||
this.initChart() |
||||
}, |
||||
|
||||
handleChangeType(e?: WechatMiniprogram.CustomEvent) { |
||||
let type = '' |
||||
let callback = true |
||||
if (e) { |
||||
type = e.currentTarget.dataset.type |
||||
} else { |
||||
type = this.data.type |
||||
callback = false |
||||
} |
||||
let EndMonth = '' |
||||
let BeginMonth = '' |
||||
if (type == '1') { |
||||
EndMonth = dayjs().format('YYYY-MM-DD') |
||||
BeginMonth = dayjs().subtract(6, 'd').format('YYYY-MM-DD') |
||||
} else if (type == '2') { |
||||
EndMonth = dayjs().format('YYYY-MM') |
||||
BeginMonth = dayjs().subtract(1, 'M').format('YYYY-MM') |
||||
} else if (type == '3') { |
||||
EndMonth = dayjs().format('YYYY') |
||||
BeginMonth = dayjs().subtract(1, 'y').format('YYYY') |
||||
} else if (type == '4' && e) { |
||||
} |
||||
this.setData({ |
||||
page: 0, |
||||
Type: type, |
||||
Num: '5', |
||||
EndMonth, |
||||
BeginMonth, |
||||
}) |
||||
if (callback) { |
||||
this.handleTabCallBack() |
||||
} |
||||
}, |
||||
initChart(defaultList = []) { |
||||
const list: any = [ |
||||
{ |
||||
Date: '2025-09-04', |
||||
TotalScore: '5', |
||||
}, |
||||
{ |
||||
Date: '2025-09-05', |
||||
TotalScore: '5', |
||||
}, |
||||
{ |
||||
Date: '2025-09-06', |
||||
TotalScore: '5', |
||||
}, |
||||
] |
||||
return new Promise((reslove) => { |
||||
this.chartComponent1.init((canvas, width, height, dpr) => { |
||||
const chart = echarts.init(canvas, null, { |
||||
width, |
||||
height, |
||||
devicePixelRatio: dpr, // new
|
||||
}) |
||||
canvas.setChart(chart) |
||||
|
||||
const option: any = { |
||||
tooltip: { |
||||
show: false, |
||||
trigger: 'axis', |
||||
axisPointer: { |
||||
type: 'shadow', |
||||
}, |
||||
confine: true, |
||||
backgroundColor: 'rgba(0, 0, 0, 0.5)', |
||||
textStyle: { |
||||
color: '#fff', |
||||
fontSize: 10, |
||||
}, |
||||
order: 'seriesDesc', |
||||
}, |
||||
grid: { |
||||
top: '30', |
||||
left: '0', |
||||
right: '0', |
||||
bottom: '10', |
||||
containLabel: true, |
||||
}, |
||||
xAxis: [ |
||||
{ |
||||
type: 'category', |
||||
axisTick: { |
||||
show: false, |
||||
inside: true, |
||||
length: 1, |
||||
alignWithLabel: true, |
||||
lineStyle: { |
||||
type: 'dotted', |
||||
color: '#D8D8D8', |
||||
width: 4, |
||||
cap: 'round', |
||||
}, |
||||
}, |
||||
axisLine: { |
||||
lineStyle: { |
||||
color: '#8C8C8C', |
||||
type: 'dashed', |
||||
}, |
||||
}, |
||||
splitLine: { |
||||
show: true, |
||||
showMinLine: false, |
||||
lineStyle: { |
||||
type: 'dotted', |
||||
color: 'rgba(137, 141, 151, 0.23)', |
||||
}, |
||||
}, |
||||
data: list.map((item) => dayjs(item.Date).format('MM-DD')), |
||||
}, |
||||
], |
||||
yAxis: [ |
||||
{ |
||||
type: 'value', |
||||
minInterval: 20, |
||||
max: 100, |
||||
axisLine: { |
||||
show: false, |
||||
lineStyle: { |
||||
type: 'solid', |
||||
color: 'rgba(161, 164, 172, 1)', |
||||
}, |
||||
}, |
||||
splitLine: { |
||||
show: true, |
||||
showMinLine: false, |
||||
lineStyle: { |
||||
type: 'dotted', |
||||
color: 'rgba(137, 141, 151, 0.23)', |
||||
}, |
||||
}, |
||||
}, |
||||
], |
||||
series: [ |
||||
{ |
||||
name: '总分', |
||||
data: list.length ? list.map((item) => item.TotalScore) : [25], |
||||
barWidth: '16', |
||||
label: { |
||||
show: true, |
||||
position: 'top', |
||||
color: '#B982FF', |
||||
}, |
||||
type: 'line', |
||||
symbolSize: 4, |
||||
showSymbol: list.length >= 1, |
||||
connectNulls: true, |
||||
z: 10, |
||||
itemStyle: { |
||||
color: '#B982FF', |
||||
}, |
||||
markLine: { |
||||
symbol: ['none', 'none'], |
||||
data: [ |
||||
{ |
||||
name: '达标区', |
||||
yAxis: 80, |
||||
label: { |
||||
formatter: '{b}', |
||||
position: 'insideMiddle', |
||||
color: '#24D8C8', |
||||
fontSize: '10', |
||||
}, |
||||
lineStyle: { |
||||
cap: '', |
||||
color: '#34D7C7', |
||||
type: 'dashed', |
||||
}, |
||||
}, |
||||
], |
||||
}, |
||||
markArea: { |
||||
itemStyle: { |
||||
color: 'rgba(37,217,200,0.19)', |
||||
}, |
||||
data: [ |
||||
[ |
||||
{ |
||||
yAxis: 80, |
||||
}, |
||||
{ |
||||
yAxis: 100, |
||||
}, |
||||
], |
||||
], |
||||
}, |
||||
}, |
||||
], |
||||
dataZoom: { |
||||
type: 'inside', // 有type这个属性，滚动条在最下面，也可以不行，写y：36，这表示距离顶端36px，一般就是在图上面。
|
||||
startValue: 0, |
||||
endValue: 4, |
||||
filterMode: 'none', |
||||
}, |
||||
} |
||||
|
||||
chart.setOption(option) |
||||
reslove(chart) |
||||
return chart |
||||
}) |
||||
}) |
||||
}, |
||||
}) |
||||
|
||||
export {} |
||||
@ -0,0 +1,104 @@
@@ -0,0 +1,104 @@
|
||||
<navbar custom-style="background:{{background}}" fixed></navbar> |
||||
<view class="page"> |
||||
<view class="page-header"> |
||||
<van-tabs |
||||
active="{{ active }}" |
||||
color="#B982FF" |
||||
line-width="60rpx" |
||||
line-height="8rpx" |
||||
title-active-color="#211D2E" |
||||
title-inactive-color="#69686E" |
||||
bind:change="onChange" |
||||
> |
||||
<van-tab title="日"></van-tab> |
||||
<van-tab title="月度"></van-tab> |
||||
<van-tab title="年度"></van-tab> |
||||
</van-tabs> |
||||
<view class="form"> |
||||
<view class="date"> |
||||
<picker |
||||
bindchange="handleChange" |
||||
class="start" |
||||
end="{{EndMonth}}" |
||||
fields="day" |
||||
mode="date" |
||||
model:value="{{BeginMonth}}" |
||||
> |
||||
{{BeginMonth}} |
||||
</picker> |
||||
<view class="line">-</view> |
||||
<picker |
||||
bindchange="handleChange" |
||||
class="end" |
||||
fields="day" |
||||
mode="date" |
||||
model:value="{{EndMonth}}" |
||||
start="{{BeginMonth}}" |
||||
> |
||||
{{EndMonth}} |
||||
</picker> |
||||
<van-icon class="icon" name="play" /> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
|
||||
<view class="chart-list"> |
||||
<view class="chart-card"> |
||||
<view class="title">GO-QOL整体记录曲线</view> |
||||
<view class="chart"> |
||||
<ec-canvas id="chart1" ec="{{ ec }}"></ec-canvas> |
||||
</view> |
||||
</view> |
||||
<view class="chart-card"> |
||||
<view class="title">GO-QOL视觉功能影响记录曲线</view> |
||||
<view class="chart"> |
||||
<ec-canvas id="chart2" ec="{{ ec }}"></ec-canvas> |
||||
</view> |
||||
</view> |
||||
<view class="chart-card"> |
||||
<view class="title">GO-QOL外观影响记录曲线</view> |
||||
<view class="chart"> |
||||
<ec-canvas id="chart3" ec="{{ ec }}"></ec-canvas> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
|
||||
<view class="list"> |
||||
<view class="list-title">我的历史测评报告</view> |
||||
<view class="list-container"> |
||||
<view class="row" wx:for="{{2}}" wx:key="index"> |
||||
<view class="aside"> |
||||
<view class="line-top" style="opacity: 0"></view> |
||||
<view class="side"></view> |
||||
<view class="line"></view> |
||||
</view> |
||||
<view class="r-container"> |
||||
<view class="date">评估日期：2025-09-02</view> |
||||
<view class="r-card"> |
||||
<view class="wrap"> |
||||
<view class="num">100</view> |
||||
<view class="inner"> |
||||
<view class="label">轻度影响</view> |
||||
<view class="name">TED生活质量评分</view> |
||||
</view> |
||||
</view> |
||||
<view class="stat"> |
||||
<view class="s-item"> |
||||
视觉功能 |
||||
<view class="score">30分</view> |
||||
</view> |
||||
<view class="s-item"> |
||||
视觉功能 |
||||
<view class="score">30分</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
|
||||
<view class="page-footer"> |
||||
<view class="btn">评测</view> |
||||
</view> |
||||
</view> |
||||
@ -0,0 +1,5 @@
@@ -0,0 +1,5 @@
|
||||
{ |
||||
"usingComponents": { |
||||
"navbar": "/components/navbar/index" |
||||
} |
||||
} |
||||
@ -0,0 +1,211 @@
@@ -0,0 +1,211 @@
|
||||
page { |
||||
background-color: #f6f8f9; |
||||
} |
||||
|
||||
.page { |
||||
padding: 40rpx 40rpx 120rpx; |
||||
.container { |
||||
padding: 32rpx; |
||||
border: 2rpx solid #ffffff; |
||||
background: #fff linear-gradient(180deg, #efe3ff 0%, #ffffff 100%) no-repeat top center/100% 228rpx; |
||||
border-radius: 24rpx; |
||||
box-shadow: 0 8rpx 32rpx rgba(25, 0, 57, 0.07); |
||||
.info { |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
.wrap { |
||||
.w-header { |
||||
display: flex; |
||||
align-items: flex-end; |
||||
line-height: 1; |
||||
.num { |
||||
font-size: 128rpx; |
||||
color: var(--color); |
||||
font-weight: bold; |
||||
} |
||||
.label { |
||||
padding: 4rpx 16rpx; |
||||
margin-bottom: 14rpx; |
||||
font-size: 28rpx; |
||||
color: #ffffff; |
||||
line-height: 36rpx; |
||||
border-radius: 50rpx 50rpx 50rpx 0rpx; |
||||
background: var(--label-background); |
||||
} |
||||
} |
||||
.tip { |
||||
font-size: 28rpx; |
||||
color: #adacb2; |
||||
} |
||||
} |
||||
.status { |
||||
width: 152rpx; |
||||
height: 152rpx; |
||||
flex-shrink: 0; |
||||
} |
||||
} |
||||
.c-line { |
||||
position: relative; |
||||
margin: 32rpx -32rpx; |
||||
border-bottom: 1px dashed #f6f8f9; |
||||
&::before { |
||||
position: absolute; |
||||
top: -13rpx; |
||||
left: -13rpx; |
||||
content: ''; |
||||
background-color: #f6f8f9; |
||||
width: 28rpx; |
||||
height: 28rpx; |
||||
border-radius: 50%; |
||||
} |
||||
&::after { |
||||
position: absolute; |
||||
top: -13rpx; |
||||
right: -13rpx; |
||||
content: ''; |
||||
background-color: #f6f8f9; |
||||
width: 28rpx; |
||||
height: 28rpx; |
||||
border-radius: 50%; |
||||
} |
||||
} |
||||
.card { |
||||
margin-bottom: 24rpx; |
||||
padding: 36rpx 30rpx 80rpx; |
||||
background: #faf7ff; |
||||
border-radius: 20rpx 20rpx 20rpx 20rpx; |
||||
border: 2rpx solid #efe2fe; |
||||
.c-header { |
||||
display: flex; |
||||
align-items: center; |
||||
gap: 12rpx; |
||||
font-size: 24rpx; |
||||
color: rgba(33, 29, 46, 0.28); |
||||
.skew { |
||||
width: 10rpx; |
||||
height: 22rpx; |
||||
background: #b982ff; |
||||
transform: skew(-15deg); |
||||
} |
||||
} |
||||
.c-content { |
||||
margin-top: 16rpx; |
||||
font-size: 32rpx; |
||||
color: #211d2e; |
||||
font-weight: bold; |
||||
display: flex; |
||||
align-items: center; |
||||
gap: 10rpx; |
||||
.label { |
||||
padding: 0 12rpx; |
||||
font-size: 20rpx; |
||||
color: #ffffff; |
||||
line-height: 32rpx; |
||||
border-radius: 50rpx 50rpx 50rpx 0rpx; |
||||
background: var(--label-background); |
||||
} |
||||
} |
||||
.progress { |
||||
position: relative; |
||||
margin-top: 38rpx; |
||||
display: flex; |
||||
align-items: center; |
||||
gap: 4rpx; |
||||
.p-item { |
||||
flex: 1; |
||||
.title { |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
font-size: 24rpx; |
||||
color: #adacb2; |
||||
} |
||||
.line1 { |
||||
margin-top: 8rpx; |
||||
height: 16rpx; |
||||
background: rgba(185, 130, 255, 0.2); |
||||
} |
||||
.line2 { |
||||
margin-top: 8rpx; |
||||
height: 16rpx; |
||||
background: rgba(185, 130, 255, 0.6); |
||||
} |
||||
.line3 { |
||||
margin-top: 8rpx; |
||||
height: 16rpx; |
||||
background: #b982ff; |
||||
} |
||||
} |
||||
.slide { |
||||
position: absolute; |
||||
top: 30rpx; |
||||
.circle { |
||||
width: 28rpx; |
||||
height: 28rpx; |
||||
background: #b982ff; |
||||
border-radius: 50%; |
||||
border: 2rpx solid #ffffff; |
||||
} |
||||
.num { |
||||
position: absolute; |
||||
bottom: -12rpx; |
||||
left: 50%; |
||||
transform: translate(-50%, 100%); |
||||
width: 52rpx; |
||||
height: 32rpx; |
||||
font-size: 32rpx; |
||||
color: #b982ff; |
||||
text-align: center; |
||||
line-height: 32rpx; |
||||
background: #eae0fa; |
||||
border-radius: 8rpx 8rpx 8rpx 8rpx; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.effect { |
||||
margin-top: 24rpx; |
||||
font-size: 28rpx; |
||||
color: #adacb2; |
||||
text-align: center; |
||||
} |
||||
} |
||||
.page-effect-wrap { |
||||
margin: 64rpx 0 0; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
.page-effect { |
||||
font-size: 32rpx; |
||||
color: var(--color); |
||||
line-height: 1; |
||||
padding: 8rpx 42rpx; |
||||
background: var(--background); |
||||
border-radius: 96rpx 96rpx 96rpx 96rpx; |
||||
border: 2rpx solid #ffffff; |
||||
} |
||||
} |
||||
.report { |
||||
margin-top: 152rpx; |
||||
font-size: 32rpx; |
||||
color: #b982ff; |
||||
text-align: center; |
||||
} |
||||
} |
||||
|
||||
.status1 { |
||||
--color: #ef3939; |
||||
--background: #ffdddd; |
||||
--label-background: linear-gradient(177deg, #ff9090 0%, #ef3939 100%); |
||||
} |
||||
.status2 { |
||||
--color: #ffa300; |
||||
--background: #fff4e0; |
||||
--label-background: linear-gradient(153deg, #ffd48b 0%, #ffa300 100%); |
||||
} |
||||
.status3 { |
||||
--color: #1ec580; |
||||
--background: #dafdee; |
||||
--label-background: linear-gradient(330deg, #1ec580 0%, #4feaaa 100%); |
||||
} |
||||
@ -0,0 +1,13 @@
@@ -0,0 +1,13 @@
|
||||
const _app = getApp<IAppOption>() |
||||
|
||||
Page({ |
||||
data: {}, |
||||
onLoad() {}, |
||||
handleReport() { |
||||
wx.navigateTo({ |
||||
url: '/patient/pages/qolReport/index', |
||||
}) |
||||
}, |
||||
}) |
||||
|
||||
export {} |
||||
@ -0,0 +1,104 @@
@@ -0,0 +1,104 @@
|
||||
<navbar custom-style="background:{{background}}" fixed></navbar> |
||||
<view |
||||
class="page status3" |
||||
style="background: url('/images/bg15.png') no-repeat top center/100% 518rpx;padding-top:{{pageTop+20}}px;" |
||||
> |
||||
<view class="container"> |
||||
<view class="info"> |
||||
<view class="wrap"> |
||||
<view class="w-header"> |
||||
<view class="num">1</view> |
||||
<view class="label">重度影响</view> |
||||
</view> |
||||
<view class="tip">本次TED生活质量评分</view> |
||||
</view> |
||||
<image class="status" src="/images/icon70.png"></image> |
||||
<!-- <image class="status" src="/images/icon71.png"></image> --> |
||||
<!-- <image class="status" src="/images/icon72.png"></image> --> |
||||
</view> |
||||
<view class="c-line"></view> |
||||
<view class="card"> |
||||
<view class="c-header"> |
||||
<view class="skew"></view> |
||||
视觉功能 |
||||
</view> |
||||
<view class="c-content"> |
||||
当前分数:1 |
||||
<view class="label">重度影响</view> |
||||
</view> |
||||
<view class="progress"> |
||||
<view class="p-item"> |
||||
<view class="title"> |
||||
<view class="start">0</view> |
||||
<view class="end">39</view> |
||||
</view> |
||||
<view class="line1"></view> |
||||
</view> |
||||
<view class="p-item"> |
||||
<view class="title"> |
||||
<view class="start"></view> |
||||
<view class="end">79</view> |
||||
</view> |
||||
<view class="line2"></view> |
||||
</view> |
||||
<view class="p-item"> |
||||
<view class="title"> |
||||
<view class="start"></view> |
||||
<view class="end">100</view> |
||||
</view> |
||||
<view class="line3"></view> |
||||
</view> |
||||
<view class="slide"> |
||||
<view class="circle"></view> |
||||
<view class="num">2</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="card"> |
||||
<view class="c-header"> |
||||
<view class="skew"></view> |
||||
外观 |
||||
</view> |
||||
<view class="c-content"> |
||||
当前分数:1 |
||||
<view class="label">重度影响</view> |
||||
</view> |
||||
<view class="progress"> |
||||
<view class="p-item"> |
||||
<view class="title"> |
||||
<view class="start">0</view> |
||||
<view class="end">39</view> |
||||
</view> |
||||
<view class="line1"></view> |
||||
</view> |
||||
<view class="p-item"> |
||||
<view class="title"> |
||||
<view class="start"></view> |
||||
<view class="end">79</view> |
||||
</view> |
||||
<view class="line2"></view> |
||||
</view> |
||||
<view class="p-item"> |
||||
<view class="title"> |
||||
<view class="start"></view> |
||||
<view class="end">100</view> |
||||
</view> |
||||
<view class="line3"></view> |
||||
</view> |
||||
<view class="slide"> |
||||
<view class="circle"></view> |
||||
<view class="num">2</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="effect">分数越低， 对生活质量影响越严重</view> |
||||
</view> |
||||
<view class="page-effect-wrap"> |
||||
<view class="page-effect">建议前往眼科中心 及时就诊</view> |
||||
</view> |
||||
|
||||
<view class="report" bind:tap="handleReport"> |
||||
查看我的评估报告 |
||||
<van-icon name="arrow" /> |
||||
</view> |
||||
</view> |
||||
Loading…
Reference in new issue