瀏覽代碼

update

- 优化 周报汇总切换
test
JinxChen 3 月之前
父節點
當前提交
47f06d5eec
共有 6 個文件被更改,包括 219 次插入41 次删除
  1. +5
    -0
      README.md
  2. +1
    -0
      src/views/health/psychological-main/index.vue
  3. +10
    -5
      src/views/health/psychological/index.scss
  4. +12
    -6
      src/views/health/psychological/index.vue
  5. +5
    -1
      src/views/health/psychological/reportDetails/index.scss
  6. +186
    -29
      src/views/health/psychological/reportDetails/index.vue

+ 5
- 0
README.md 查看文件

@@ -1174,3 +1174,8 @@ update

- 增加 app打开充值h5跳转到话费查询页面
- 增加 app点击订购套餐提示


`2024.8.21`
update
- 优化 周报汇总切换

+ 1
- 0
src/views/health/psychological-main/index.vue 查看文件

@@ -89,6 +89,7 @@ export default {
},
// 加载路由参数
async loadParams() {
this.$toast.loading("数据加载中");
let params = this.$route.query;
if (params) {
this.uid = params.uid;


+ 10
- 5
src/views/health/psychological/index.scss 查看文件

@@ -69,7 +69,7 @@ $newBlue: #638EE4;
}
}
.psy-tab-bar {
height: 40px;
height: 30px;
position: relative;
margin: 5px 0;
padding: 0 10px;
@@ -84,7 +84,7 @@ $newBlue: #638EE4;
justify-content: space-around;
align-items: center;
color: #fff;
height: 40px;
height: 30px;
width: 100%;
/* background-color: red; */
.psy-tab-item {
@@ -93,12 +93,12 @@ $newBlue: #638EE4;
color: #6D6D6D;
height: 100%;
width: 100%;
font-size: 18px;
font-size: 14px;
border-radius: 20px;
@include center();
&.active {
color: #FFFFFF;
background-color: #638EE4;
background-color: #189B3BFF;
}
}
}
@@ -107,7 +107,8 @@ $newBlue: #638EE4;
.main {
position: relative;
height: calc(100vh - 150px);
overflow: scroll;
overflow-y: scroll;
overflow-x: hidden;
.top {
flex: 1;
.title {
@@ -149,6 +150,10 @@ $newBlue: #638EE4;
height: 106px;
width: 106px;
}
#pieChartDay {
height: 106px;
width: 106px;
}
}
.pie-chart-right {
height: 150px;


+ 12
- 6
src/views/health/psychological/index.vue 查看文件

@@ -766,14 +766,19 @@ export default {
// 读取路由传过来的参数,根据路由传过来的参数判断是哪种情绪
this.loadParams();
this.initEchartText();
this.getPieData();
/* this.getPieData(); */
this.getCalendarData();
this.getPsychologiclData();
this.getWeekResult();
},
mounted() {
this.initEchart();
this.current = Number(this.$store.getters.tabClick) || 0;
if(this.params.current) {
this.current = Number(this.params.current);
} else {
this.current = Number(this.$store.getters.tabClick) || 0;
}
this.currentDays = this.calcDaysByTabClick(
Number(this.$store.getters.tabClick)
);
@@ -1516,7 +1521,7 @@ export default {
});
let array = Object.entries(typeMap);
this.weekResultList = array;
this.weekResultList = array.reverse();
console.log("weekResultLists", this.weekResultList);
console.log("typeMap", typeMap);
});
@@ -1529,7 +1534,7 @@ export default {
: "https://dbmq.rzliot.com/heart";
let reqUrl = `${baseUrl}/api/Data/GetWeekResult`;
let reqParams = {
uid: /* this.uid */ '2023101521270090082',
uid: this.uid /* '1929285069986332672' */,
type: type || this.emoType,
};
return new Promise(resolve => {
@@ -1562,7 +1567,7 @@ export default {
: "https://dbmq.rzliot.com/heart";
let reqUrl = `${baseUrl}/api/Data/GetWeekResult`;
let reqParams = {
uid: /* this.uid */ '2023101521270090082',
uid: this.uid /* '1929285069986332672' */,
type: this.emoType,
};
axios
@@ -1599,7 +1604,8 @@ export default {
name: this.currentEmoName,
isShowLeft: true,
uid: this.uid,
time: item.name
time: item.name,
current: 3,

},
});


+ 5
- 1
src/views/health/psychological/reportDetails/index.scss 查看文件

@@ -6,7 +6,7 @@
font-family: Source Han Sans CN;

.report-details {
height: calc(100vh - 120px);
height: calc(100vh - 88px);
overflow: scroll;
background-color: #fff;

@@ -121,6 +121,10 @@
height: 106px;
width: 106px;
}
#pieChartDay {
height: 106px;
width: 106px;
}
}

.pie-chart-right {


+ 186
- 29
src/views/health/psychological/reportDetails/index.vue 查看文件

@@ -20,19 +20,6 @@
</div>
</div>
</div>
<!-- 情绪切换 -->
<div class="psy-tab-bar">
<div class="psy-tab-con">
<div class="psy-tab-list">
<div :class="[
'psy-tab-item',
{ active: psyCurrent === index, notClick: false },
]" @click="onPsyTabClick(item.name, index)" v-for="(item, index) in psyList" :key="index">
<span>{{ item.text }}</span>
</div>
</div>
</div>
</div>
<div class="main" v-show="current !== 3">
<div class="top">
<!-- 日期选择 -->
@@ -67,7 +54,7 @@

<div class="pie-chart-con">
<div class="pie-chart-left">
<div id="pieChart" ref="pieChart"></div>
<div id="pieChartDay" ref="pieChartDay"></div>
</div>

<div class="pie-chart-right">
@@ -117,9 +104,22 @@
<!-- 分割线 -->
<div class="line"></div>
<!-- 底部 -->
<!-- 情绪切换 -->
<div class="psy-tab-bar">
<div class="psy-tab-con">
<div class="psy-tab-list">
<div :class="[
'psy-tab-item',
{ active: psyCurrent === index, notClick: false },
]" @click="onPsyTabClick(item.name, index)" v-for="(item, index) in psyList" :key="index">
<span>{{ item.text }}</span>
</div>
</div>
</div>
</div>
<div class="bottom">
<div class="echart-container">
<div class="echart" ref="charts"></div>
<div class="echart" ref="dayCharts"></div>
</div>

<div class="line-gray"></div>
@@ -209,7 +209,20 @@
</div>

</div>
<div class="line"></div>
<!-- <div class="line"></div> -->
<!-- 情绪切换 -->
<div class="psy-tab-bar">
<div class="psy-tab-con">
<div class="psy-tab-list">
<div :class="[
'psy-tab-item',
{ active: psyCurrent === index, notClick: false },
]" @click="onPsyTabClick(item.name, index)" v-for="(item, index) in psyList" :key="index">
<span>{{ item.text }}</span>
</div>
</div>
</div>
</div>
<div class="pie-chart-top">
<p class="bold">上周趋势对比</p>
<p>{{ resetDate(weekResult.StartDate, weekResult.EndDate) || "--" }}</p>
@@ -481,6 +494,9 @@ export default {
weekResultList: [], //周报新详情周报列表
weekResult: {},
isShowCompare: null, //是否显示周对比
pieDayEcharts: null, //非周报饼状图
pieDayData: [], //非周报饼状图
dayEcharts: null
};
},
computed: {
@@ -749,6 +765,52 @@ export default {
],
};
},
pieDayOption() {
return {
tooltip: {
trigger: "item",
textStyle: {
fontSize: 14,
},
position: "right",
},
legend: {
top: "5%",
left: "center",
show: false,
},
series: [
{
type: "pie",
radius: ["40%", "80%"],
avoidLabelOverlap: false,
startAngle: 270, // 设置逆时针渲染
itemStyle: {
borderRadius: 5,
borderColor: "#fff",
borderWidth: 2,
fontSize: 16,
},
label: {
show: false,
position: "center",
fontSize: 16,
},
emphasis: {
label: {
show: false,
fontSize: 16,
fontWeight: "bold",
},
},
labelLine: {
show: false,
},
data: this.pieDayData,
},
],
};
},
titleLeft() {
let text = this.emoName === "depression" ? "趋势" : "";
let today = "";
@@ -821,27 +883,88 @@ export default {
},
deep: true,
},
pieDayData: {
handler(n, o) {
this.initPieDayEchart();
},
deep: true,
}
},
created() {
// 读取路由传过来的参数,根据路由传过来的参数判断是哪种情绪
this.loadParams();
this.initEchartText();
this.getPieData();
this.getCalendarData();
},
mounted() {
this.getPsychologiclData();
this.getWeekResultDetail();
this.getWeekResult();
},
mounted() {
this.initEchart();
this.current = Number(this.$store.getters.tabClick) || 0;
/* this.initEchart(); */
if(this.params.current) {
this.current = Number(this.params.current);
} else {
this.current = Number(this.$store.getters.tabClick) || 0;
}
this.currentDays = this.calcDaysByTabClick(
Number(this.$store.getters.tabClick)
);
this.psyCurrent = this.calcPsyTabindex(EmotionModel[this.params.name].type);
window.document.title = "心理监测";
/* window.addEventListener("resize", this.onResize, false); */
},
destroyed(){
/* window.removeEventListener("resize", this.onResize, false); */
},
methods: {
/* onResize(){
if(this.pieEcharts){
this.pieEcharts.resize();
}
if(this.echarts) {
this.echarts.resize();
}
}, */
calcWeekImg(cur, last, callBackText) {
let imgurl = "";
let text = "";
if (isNotNull(cur) && isNotNull(last) && this.weekAndMonData.length > 0) {
let curNumber = Number(cur);
let latNumber = Number(last);
if (curNumber - latNumber == 0) {
text = "持平";
} else {
imgurl = curNumber < latNumber ? this.downImg : this.upImg;
text = Math.abs(curNumber - latNumber) + "天";
}
if (callBackText) {
return text;
} else {
return imgurl;
}
}
},
// 计算显示是上升or下降的图片
/**
*
* @param { 本周情绪比例} current
* @param { 上周情绪比例 } last
* @param { 是否返回对比比例 } isCallBackCompare
*/
calcImg(current, last, isCallBackCompare) {
let imgUrl = "";
let compare = "";
if (isNotNull(current) && isNotNull(last)) {
compare = Number(current) - Number(last);
imgUrl = compare > 0 ? this.upImg : compare == 0 ? "" : this.downImg;
}
if (isCallBackCompare) {
return compare;
} else {
return imgUrl;
}
},
loadParams() {
let params = this.$route.query;
if (params) {
@@ -1011,7 +1134,7 @@ export default {
this.pieRightList.push(Mild);
this.pieRightList.push(Moderate);
this.pieRightList.push(Severe);
this.pieData = this.pieRightList.map((item) => {
this.pieDayData = this.pieRightList.map((item) => {
item.value = item.count;
item.itemStyle = {
color: item.color,
@@ -1305,6 +1428,20 @@ export default {
}
this.pieEcharts = this.$echarts.init(this.$refs.pieChart);
this.pieEcharts.setOption(this.pieOption);


},
initPieDayEchart() {
if (
this.pieDayEcharts != null &&
this.pieDayEcharts != "" &&
this.pieDayEcharts != undefined
) {
this.pieDayEcharts.dispose();
}
this.pieDayEcharts = this.$echarts.init(this.$refs.pieChartDay);
this.pieDayEcharts.setOption(this.pieDayOption);
},
// 格式化日期显示参数
formatter(day) {
@@ -1327,11 +1464,13 @@ export default {
},
// 返回
onNavBack() {
this.params.name = "";
this.$router.replace({
name: "psychologicalMain",
name: "psychological",
query: {
...this.params,
name: this.params.name,
uid: this.params.uid,
pageType: 1,
current: this.params.current
},
});
},
@@ -1373,7 +1512,8 @@ export default {
} else {
// 周报菜单
console.log("点击周报");
this.getWeekResultDetail()
this.onPsyTabClick(this.psyList[this.psyCurrent].name, this.psyCurrent);
/* this.getWeekResultDetail(); */

}
},
@@ -1464,15 +1604,31 @@ export default {
},
// 初始化折线图表
initEchart() {
if (
if(this.current === 3) {
// 周报详情
if (
this.echarts != null &&
this.echarts != "" &&
this.echarts != undefined
) {
this.echarts.resize();
this.echarts.dispose();
}
this.echarts = this.$echarts.init(this.$refs.charts);
this.echarts.setOption(this.defaultOptions);
} else {
if (
this.dayEcharts != null &&
this.dayEcharts != "" &&
this.dayEcharts != undefined
) {
this.dayEcharts.resize();
this.dayEcharts.dispose();
}
this.dayEcharts = this.$echarts.init(this.$refs.dayCharts);
this.dayEcharts.setOption(this.defaultOptions);
}
},
// 点击历史监测,打开日历
onHistory() {
@@ -1588,7 +1744,7 @@ export default {
: "https://dbmq.rzliot.com/heart";
let reqUrl = `${baseUrl}/api/Data/GetWeekResult`;
let reqParams = {
uid: /* this.uid */ '2023101521270090082',
uid: this.uid /* '2023101521270090082' */,
type: type || this.emoType,
};
@@ -1619,7 +1775,7 @@ export default {
: "https://dbmq.rzliot.com/heart";
let reqUrl = `${baseUrl}/api/Data/GetWeekResult`;
let reqParams = {
uid: /* this.uid */ '2023101521270090082',
uid: this.uid /* '2023101521270090082' */,
type: this.emoType,
};
return new Promise(resolve => {
@@ -1636,6 +1792,7 @@ export default {
.replace(/-/g, ".")
.replace(/~/g, "-") === time
});
console.log("selectData", selectData);
let recordId = selectData && selectData[0].RecordId;
console.log("根据当前日期不同emoType得到的周报列表数据", selectData);
this.$toast.success("数据加载完成");


Loading…
取消
儲存