@@ -914,4 +914,10 @@ update | |||||
## v1.0.117 | ## v1.0.117 | ||||
`2024.3.21` | `2024.3.21` | ||||
update | update | ||||
- ‘抑郁’文字 通过页面传过来的参数 改成‘焦虑’,否则不变 | |||||
- ‘抑郁’文字 通过页面传过来的参数 改成‘焦虑’,否则不变 | |||||
## v1.0.118 | |||||
`2024.3.25` | |||||
fix | |||||
- 修复 心理监测详情中间组件颜色与接口返回的等级颜色不一致的问题 |
@@ -8,7 +8,7 @@ | |||||
import store from "@/store"; | import store from "@/store"; | ||||
// 情绪模型 | // 情绪模型 | ||||
const appTypeList = ['1']; | const appTypeList = ['1']; | ||||
export const VERSION_MODEL = '1.0.117F'; //版本号 | |||||
export const VERSION_MODEL = '1.0.118F'; //版本号 | |||||
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/', | ||||
@@ -76,6 +76,7 @@ const routes = [ | |||||
{ path: '/deviceSetting', name: 'deviceSetting', component: resolve => require(['@/views/gps-card-frontend/device-setting'], resolve) }, | { path: '/deviceSetting', name: 'deviceSetting', component: resolve => require(['@/views/gps-card-frontend/device-setting'], resolve) }, | ||||
// c1(4g管理后台)涉水区域白名单 | // c1(4g管理后台)涉水区域白名单 | ||||
{ path: '/drownWhiteList', name: 'drownWhiteList', component: resolve => require(['@/views/gps-card-frontend/drown-white-list'], resolve) }, | { 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({ | const router = new VueRouter({ | ||||
@@ -13,7 +13,7 @@ | |||||
<div class="main"> | <div class="main"> | ||||
<div class="list"> | <div class="list"> | ||||
<div v-for="(item, index) in healhtList" :key="index" :class="['item', item.class]" @click="onClick(item)"> | <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 || "--" }} | {{ item.value || "--" }} | ||||
</p> | </p> | ||||
<p class="health-name"> | <p class="health-name"> | ||||
@@ -236,6 +236,30 @@ export default { | |||||
} | } | ||||
return color; | 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> | </script> | ||||
@@ -102,7 +102,7 @@ | |||||
</div> | </div> | ||||
<div class="middle"> | <div class="middle"> | ||||
<span :style="{ color: calcColor(item.value) }">{{ | |||||
<span :style="{ color: calcResultColor(item.level) }">{{ | |||||
item.value || "--" | item.value || "--" | ||||
}}</span> | }}</span> | ||||
</div> | </div> | ||||
@@ -926,6 +926,7 @@ export default { | |||||
? this.$dayjs(data.MaxDesc).format("HH:mm") | ? this.$dayjs(data.MaxDesc).format("HH:mm") | ||||
: this.$dayjs(data.MaxDesc).format("MM/DD HH:mm") | : this.$dayjs(data.MaxDesc).format("MM/DD HH:mm") | ||||
: "", | : "", | ||||
level: data.MaxLevel | |||||
}; | }; | ||||
let Min = { | let Min = { | ||||
label: "最小值", | label: "最小值", | ||||
@@ -935,6 +936,7 @@ export default { | |||||
? this.$dayjs(data.MinDesc).format("HH:mm") | ? this.$dayjs(data.MinDesc).format("HH:mm") | ||||
: this.$dayjs(data.MinDesc).format("MM/DD HH:mm") | : this.$dayjs(data.MinDesc).format("MM/DD HH:mm") | ||||
: "", | : "", | ||||
level: data.MinLevel | |||||
}; | }; | ||||
let Avg = { | let Avg = { | ||||
label: "平均值", | label: "平均值", | ||||
@@ -944,6 +946,7 @@ export default { | |||||
? this.$dayjs(data.AvgDesc).format("HH:mm") | ? this.$dayjs(data.AvgDesc).format("HH:mm") | ||||
: this.$dayjs(data.AvgDesc).format("MM/DD HH:mm") | : this.$dayjs(data.AvgDesc).format("MM/DD HH:mm") | ||||
: "", | : "", | ||||
level: data.AvgLevel | |||||
}; | }; | ||||
let Current = { | let Current = { | ||||
label: "最近值", | label: "最近值", | ||||
@@ -953,6 +956,7 @@ export default { | |||||
? this.$dayjs(data.CurrentDesc).format("HH:mm") | ? this.$dayjs(data.CurrentDesc).format("HH:mm") | ||||
: this.$dayjs(data.CurrentDesc).format("MM/DD HH:mm") | : this.$dayjs(data.CurrentDesc).format("MM/DD HH:mm") | ||||
: "", | : "", | ||||
level: data.CurrentLevel | |||||
}; | }; | ||||
this.statisticsList.push(Max); | this.statisticsList.push(Max); | ||||
this.statisticsList.push(Min); | this.statisticsList.push(Min); | ||||
@@ -90,7 +90,7 @@ | |||||
</div> | </div> | ||||
<div class="middle"> | <div class="middle"> | ||||
<span :style="{ color: calcColor(item.value) }">{{ | |||||
<span :style="{ color: calcResultColor(item.level) }">{{ | |||||
item.value || "--" | item.value || "--" | ||||
}}</span> | }}</span> | ||||
</div> | </div> | ||||
@@ -681,6 +681,7 @@ export default { | |||||
return item.Key; | return item.Key; | ||||
}) | }) | ||||
: []; | : []; | ||||
console.log("chartData", chartData); | |||||
if (data) { | if (data) { | ||||
this.monitoringCount = data.Total; | this.monitoringCount = data.Total; | ||||
this.pieRightList = []; | this.pieRightList = []; | ||||
@@ -750,6 +751,7 @@ export default { | |||||
? this.$dayjs(data.MaxDesc).format("HH:mm") | ? this.$dayjs(data.MaxDesc).format("HH:mm") | ||||
: this.$dayjs(data.MaxDesc).format("MM/DD HH:mm") | : this.$dayjs(data.MaxDesc).format("MM/DD HH:mm") | ||||
: "", | : "", | ||||
level: data.MaxLevel | |||||
}; | }; | ||||
let Min = { | let Min = { | ||||
label: "最小值", | label: "最小值", | ||||
@@ -759,6 +761,7 @@ export default { | |||||
? this.$dayjs(data.MinDesc).format("HH:mm") | ? this.$dayjs(data.MinDesc).format("HH:mm") | ||||
: this.$dayjs(data.MinDesc).format("MM/DD HH:mm") | : this.$dayjs(data.MinDesc).format("MM/DD HH:mm") | ||||
: "", | : "", | ||||
level: data.MinLevel | |||||
}; | }; | ||||
let Avg = { | let Avg = { | ||||
label: "平均值", | label: "平均值", | ||||
@@ -768,6 +771,7 @@ export default { | |||||
? this.$dayjs(data.AvgDesc).format("HH:mm") | ? this.$dayjs(data.AvgDesc).format("HH:mm") | ||||
: this.$dayjs(data.AvgDesc).format("MM/DD HH:mm") | : this.$dayjs(data.AvgDesc).format("MM/DD HH:mm") | ||||
: "", | : "", | ||||
level: data.AvgLevel | |||||
}; | }; | ||||
this.statisticsList.push(Max); | this.statisticsList.push(Max); | ||||
this.statisticsList.push(Min); | this.statisticsList.push(Min); | ||||
@@ -805,7 +809,7 @@ export default { | |||||
this.emotionList.push(ModerateDay); | this.emotionList.push(ModerateDay); | ||||
this.emotionList.push(SevereDay); | this.emotionList.push(SevereDay); | ||||
// 图表数据 | // 图表数据 | ||||
this.emotionData = chartData.map((item) => { | |||||
this.emotionData = chartData.map(item => { | |||||
return { | return { | ||||
value: item.Value, | value: item.Value, | ||||
itemStyle: { | itemStyle: { | ||||
@@ -813,6 +817,7 @@ export default { | |||||
}, | }, | ||||
}; | }; | ||||
}); | }); | ||||
console.log("emotionData", this.emotionData); | |||||
this.weekAndMonData = chartData.map((item, index) => { | this.weekAndMonData = chartData.map((item, index) => { | ||||
return { | return { | ||||
value: [index, item.MinValue, item.MaxValue], | value: [index, item.MinValue, item.MaxValue], | ||||
@@ -1001,20 +1006,20 @@ export default { | |||||
calcResultColor(value, isCallBackClass) { | calcResultColor(value, isCallBackClass) { | ||||
let color = ""; | let color = ""; | ||||
let className = ""; | let className = ""; | ||||
switch (value) { | |||||
case ("0", 0): | |||||
switch (Number(value)) { | |||||
case 0: | |||||
color = "#62BD48"; | color = "#62BD48"; | ||||
className = "none"; | className = "none"; | ||||
break; | break; | ||||
case ("1", 1): | |||||
case 1: | |||||
color = "#ffde00"; | color = "#ffde00"; | ||||
className = "mild"; | className = "mild"; | ||||
break; | break; | ||||
case ("2", 2): | |||||
case 2: | |||||
color = "#ff8a00"; | color = "#ff8a00"; | ||||
className = "moderate"; | className = "moderate"; | ||||
break; | break; | ||||
case ("3", 3): | |||||
case 3: | |||||
color = "#d70d0d"; | color = "#d70d0d"; | ||||
className = "severe"; | className = "severe"; | ||||
break; | 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> |