@@ -920,3 +920,9 @@ update | |||
`2024.3.21` | |||
update | |||
- ‘抑郁’文字 通过页面传过来的参数 改成‘焦虑’,否则不变 | |||
## v1.0.118 | |||
`2024.3.25` | |||
fix | |||
- 修复 心理监测详情中间组件颜色与接口返回的等级颜色不一致的问题 |
@@ -5,7 +5,10 @@ | |||
* @FilePath: \TelpoH5FrontendWeb\src\config\models.js | |||
* @description: | |||
*/ | |||
export const VERSION_MODEL = '1.0.117F'; //版本号 | |||
import store from "@/store"; | |||
// 情绪模型 | |||
const appTypeList = ['1']; | |||
export const VERSION_MODEL = '1.0.118F'; //版本号 | |||
export const IMAGE_URL = { | |||
production: 'http://zfb.ssjlai.com/web/', | |||
test: 'http://zfb.ssjlai.com/web/', | |||
@@ -76,6 +76,7 @@ const routes = [ | |||
{ path: '/deviceSetting', name: 'deviceSetting', component: resolve => require(['@/views/gps-card-frontend/device-setting'], resolve) }, | |||
// c1(4g管理后台)涉水区域白名单 | |||
{ path: '/drownWhiteList', name: 'drownWhiteList', component: resolve => require(['@/views/gps-card-frontend/drown-white-list'], resolve) }, | |||
{ path: '/smartCard', name: 'smartCard', component: resolve => require(['@/views/smart-card/index'], resolve) }, | |||
]; | |||
const router = new VueRouter({ | |||
@@ -13,7 +13,7 @@ | |||
<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) }"> | |||
<p class="health-value" :style="{ color: calcResultColor(item.level) }"> | |||
{{ item.value || "--" }} | |||
</p> | |||
<p class="health-name"> | |||
@@ -236,6 +236,30 @@ export default { | |||
} | |||
return color; | |||
}, | |||
// 计算结果采用哪种颜色 | |||
calcResultColor(value, isCallBackClass) { | |||
let color = ""; | |||
let className = ""; | |||
switch (Number(value)) { | |||
case 0: | |||
color = "#62BD48"; | |||
className = "none"; | |||
break; | |||
case 1: | |||
color = "#ffde00"; | |||
className = "mild"; | |||
break; | |||
case 2: | |||
color = "#ff8a00"; | |||
className = "moderate"; | |||
break; | |||
case 3: | |||
color = "#d70d0d"; | |||
className = "severe"; | |||
break; | |||
} | |||
return isCallBackClass ? className : color; | |||
}, | |||
}, | |||
}; | |||
</script> | |||
@@ -102,7 +102,7 @@ | |||
</div> | |||
<div class="middle"> | |||
<span :style="{ color: calcColor(item.value) }">{{ | |||
<span :style="{ color: calcResultColor(item.level) }">{{ | |||
item.value || "--" | |||
}}</span> | |||
</div> | |||
@@ -926,6 +926,7 @@ export default { | |||
? this.$dayjs(data.MaxDesc).format("HH:mm") | |||
: this.$dayjs(data.MaxDesc).format("MM/DD HH:mm") | |||
: "", | |||
level: data.MaxLevel | |||
}; | |||
let Min = { | |||
label: "最小值", | |||
@@ -935,6 +936,7 @@ export default { | |||
? this.$dayjs(data.MinDesc).format("HH:mm") | |||
: this.$dayjs(data.MinDesc).format("MM/DD HH:mm") | |||
: "", | |||
level: data.MinLevel | |||
}; | |||
let Avg = { | |||
label: "平均值", | |||
@@ -944,6 +946,7 @@ export default { | |||
? this.$dayjs(data.AvgDesc).format("HH:mm") | |||
: this.$dayjs(data.AvgDesc).format("MM/DD HH:mm") | |||
: "", | |||
level: data.AvgLevel | |||
}; | |||
let Current = { | |||
label: "最近值", | |||
@@ -953,6 +956,7 @@ export default { | |||
? this.$dayjs(data.CurrentDesc).format("HH:mm") | |||
: this.$dayjs(data.CurrentDesc).format("MM/DD HH:mm") | |||
: "", | |||
level: data.CurrentLevel | |||
}; | |||
this.statisticsList.push(Max); | |||
this.statisticsList.push(Min); | |||
@@ -90,7 +90,7 @@ | |||
</div> | |||
<div class="middle"> | |||
<span :style="{ color: calcColor(item.value) }">{{ | |||
<span :style="{ color: calcResultColor(item.level) }">{{ | |||
item.value || "--" | |||
}}</span> | |||
</div> | |||
@@ -680,6 +680,7 @@ export default { | |||
return item.Key; | |||
}) | |||
: []; | |||
console.log("chartData", chartData); | |||
if (data) { | |||
this.monitoringCount = data.Total; | |||
this.pieRightList = []; | |||
@@ -749,6 +750,7 @@ export default { | |||
? this.$dayjs(data.MaxDesc).format("HH:mm") | |||
: this.$dayjs(data.MaxDesc).format("MM/DD HH:mm") | |||
: "", | |||
level: data.MaxLevel | |||
}; | |||
let Min = { | |||
label: "最小值", | |||
@@ -758,6 +760,7 @@ export default { | |||
? this.$dayjs(data.MinDesc).format("HH:mm") | |||
: this.$dayjs(data.MinDesc).format("MM/DD HH:mm") | |||
: "", | |||
level: data.MinLevel | |||
}; | |||
let Avg = { | |||
label: "平均值", | |||
@@ -767,6 +770,7 @@ export default { | |||
? this.$dayjs(data.AvgDesc).format("HH:mm") | |||
: this.$dayjs(data.AvgDesc).format("MM/DD HH:mm") | |||
: "", | |||
level: data.AvgLevel | |||
}; | |||
this.statisticsList.push(Max); | |||
this.statisticsList.push(Min); | |||
@@ -804,7 +808,7 @@ export default { | |||
this.emotionList.push(ModerateDay); | |||
this.emotionList.push(SevereDay); | |||
// 图表数据 | |||
this.emotionData = chartData.map((item) => { | |||
this.emotionData = chartData.map(item => { | |||
return { | |||
value: item.Value, | |||
itemStyle: { | |||
@@ -812,6 +816,7 @@ export default { | |||
}, | |||
}; | |||
}); | |||
console.log("emotionData", this.emotionData); | |||
this.weekAndMonData = chartData.map((item, index) => { | |||
return { | |||
value: [index, item.MinValue, item.MaxValue], | |||
@@ -1000,20 +1005,20 @@ export default { | |||
calcResultColor(value, isCallBackClass) { | |||
let color = ""; | |||
let className = ""; | |||
switch (value) { | |||
case ("0", 0): | |||
switch (Number(value)) { | |||
case 0: | |||
color = "#62BD48"; | |||
className = "none"; | |||
break; | |||
case ("1", 1): | |||
case 1: | |||
color = "#ffde00"; | |||
className = "mild"; | |||
break; | |||
case ("2", 2): | |||
case 2: | |||
color = "#ff8a00"; | |||
className = "moderate"; | |||
break; | |||
case ("3", 3): | |||
case 3: | |||
color = "#d70d0d"; | |||
className = "severe"; | |||
break; | |||
@@ -0,0 +1,136 @@ | |||
<!-- --> | |||
<template> | |||
<div class="video-containe"> | |||
<video ref="myVideo" playsinline muted loop @loadedmetadata="handleMetadata"> | |||
<source src="../../assets/img/card_bind.mp4" type="video/mp4"> | |||
</video> | |||
<!-- 播放/暂停按钮 --> | |||
<div class="btn-con"> | |||
<van-button @click="togglePlay" :color="btnColor"> | |||
{{ btnText }} | |||
</van-button> | |||
<van-button @click="goToWebApp" color="#ee3399"> | |||
智能名片 | |||
</van-button> | |||
</div> | |||
</div> | |||
</template> | |||
<script> | |||
export default { | |||
data() { | |||
return { | |||
isPlaying: null | |||
} | |||
}, | |||
computed: { | |||
btnText() { | |||
let text = '讲解模式'; | |||
if (this.isPlaying == null) { | |||
return text; | |||
} else if (this.isPlaying == false) { | |||
text = '继续讲解' | |||
} else { | |||
text = '暂停讲解' | |||
} | |||
return text | |||
}, | |||
btnColor() { | |||
let color = ''; | |||
if (this.isPlaying == null) { | |||
// 默认 | |||
color = '#ee3399' | |||
} else if (this.isPlaying == false) { | |||
color = 'green' | |||
} else { | |||
color = 'orange' | |||
} | |||
return color | |||
} | |||
}, | |||
created() { | |||
}, | |||
mounted() { | |||
window.document.title = '人工智能月子中心介绍'; | |||
}, | |||
methods: { | |||
handleMetadata(event) { | |||
const videoElement = event.target; | |||
this.aspectRatio = videoElement.videoWidth / videoElement.videoHeight; | |||
}, | |||
togglePlay() { | |||
const videoPlayer = this.$refs.myVideo; | |||
if (videoPlayer.paused) { | |||
videoPlayer.play(); // 开始播放 | |||
this.isPlaying = true; | |||
} else { | |||
videoPlayer.pause(); // 暂停播放 | |||
this.isPlaying = false; | |||
} | |||
}, | |||
goToWebApp() { | |||
let jumpUrl = 'https://hao-yun666-5g407x0f9e513af8-1325200810.tcloudbaseapp.com/jump-mp.html?sign=02240d77ff8df94a035322d647ac7196&t=1711071109'; | |||
/* window.location.href = jumpUrl; */ | |||
// replace,表明新窗口加载的内容是否替换浏览历史中的当前条目 | |||
window.open(jumpUrl, 'replace = true'); | |||
} | |||
}, | |||
} | |||
</script> | |||
<style scoped lang="scss"> | |||
.video-containe { | |||
position: relative; | |||
width: 100%; | |||
height: 100%; | |||
/* 动态计算padding-bottom保持宽高比 */ | |||
overflow: hidden; | |||
display: flex; | |||
justify-content: center; | |||
align-content: center; | |||
video { | |||
position: absolute; | |||
top: 0; | |||
left: 0; | |||
width: 100%; | |||
height: 100%; | |||
object-fit: contain; | |||
/* 或者 object-fit: cover 根据需求选择 */ | |||
} | |||
.btn-con { | |||
position: absolute; | |||
bottom: 3%; | |||
.van-button { | |||
margin: 0 5px; | |||
} | |||
} | |||
/* 当视口宽度小于等于600px时应用以下样式 */ | |||
@media screen and (max-width: 600px) { | |||
.btn-con { | |||
left: 20%; | |||
} | |||
} | |||
/* 当视口宽度大于600px时应用另一组样式 */ | |||
@media screen and (min-width: 601px) { | |||
.btn-con { | |||
left: 45%; | |||
} | |||
} | |||
} | |||
/* @import url(); 引入css类 */ | |||
</style> |