|
|
|
@@ -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("数据加载完成"); |
|
|
|
|
