|
|
<script setup>
|
|
|
/**
|
|
|
* name：
|
|
|
* user：sa0ChunLuyu
|
|
|
* date：2023年3月19日 14:25:22
|
|
|
*/
|
|
|
import AnalysisChart1 from "@/pages/components/analysis/chart1.vue";
|
|
|
import AnalysisChart2 from "@/pages/components/analysis/chart2.vue";
|
|
|
import { onMounted, ref } from "vue";
|
|
|
import { $image, $response, $api } from "@/api";
|
|
|
import { onShow } from "@dcloudio/uni-app";
|
|
|
import { useStore } from "@/store";
|
|
|
const $store = useStore();
|
|
|
|
|
|
const $props = defineProps({
|
|
|
id: {
|
|
|
type: String,
|
|
|
default: "",
|
|
|
},
|
|
|
});
|
|
|
|
|
|
let type = ref(1);
|
|
|
|
|
|
const analysis_content = ref({
|
|
|
title: "",
|
|
|
result: "",
|
|
|
name: "",
|
|
|
value: "",
|
|
|
date: "",
|
|
|
content: "",
|
|
|
table: {
|
|
|
name: "",
|
|
|
list: [],
|
|
|
},
|
|
|
});
|
|
|
const chart1_option = ref({
|
|
|
show: false,
|
|
|
range: [],
|
|
|
min: 0,
|
|
|
max: 0,
|
|
|
});
|
|
|
const chart2_option = ref({
|
|
|
show: false,
|
|
|
data: [],
|
|
|
min: 0,
|
|
|
max: 0,
|
|
|
unit: "",
|
|
|
});
|
|
|
onMounted(() => {
|
|
|
GetGreySet();
|
|
|
ReportAnalysis();
|
|
|
});
|
|
|
const date_active = ref(0);
|
|
|
const data_show = ref(false);
|
|
|
const ReportAnalysis = async () => {
|
|
|
uni.showLoading({
|
|
|
title: "加载中...",
|
|
|
});
|
|
|
const response = await $api("ReportAnalysis", {
|
|
|
id_number: $store.getUser().id_number,
|
|
|
id: $props.id,
|
|
|
});
|
|
|
$response(response, () => {
|
|
|
uni.hideLoading();
|
|
|
analysis_content.value = response.data.info;
|
|
|
console.log(analysis_content.value);
|
|
|
response.data.chart1_option.min = Number(response.data.chart1_option.min);
|
|
|
response.data.chart1_option.max = Number(response.data.chart1_option.max);
|
|
|
chart1_option.value = response.data.chart1_option;
|
|
|
chart2_option.value = response.data.chart2_option;
|
|
|
data_show.value = !response.data.show;
|
|
|
date_arr.value = response.data.date_list.map((item, key) => {
|
|
|
if (response.data.date === item) {
|
|
|
date_active.value = key;
|
|
|
}
|
|
|
return {
|
|
|
label: item,
|
|
|
value: item,
|
|
|
};
|
|
|
});
|
|
|
uni.setNavigationBarTitle({
|
|
|
title: analysis_content.value.title,
|
|
|
});
|
|
|
});
|
|
|
};
|
|
|
|
|
|
const chooseTypeClick = (status) => {
|
|
|
if (type.value == status) return;
|
|
|
type.value = status;
|
|
|
// let date = $props.date || analysis_content.value.date;
|
|
|
// uni.redirectTo({
|
|
|
// url: `/pages/main/analysis_content/analysis_content?hospital=${$props.hospital}&type=${type}&id=${$props.id}&id_number=${$props.id_number}&date=${date}`,
|
|
|
// });
|
|
|
};
|
|
|
|
|
|
const date_arr = ref([]);
|
|
|
// const dateChange = (e) => {
|
|
|
// let index = Number(e.detail.value);
|
|
|
// let date = date_arr.value[index].value;
|
|
|
// uni.redirectTo({
|
|
|
// url: `/pages/main/analysis_content/analysis_content?hospital=${$props.hospital}&type=${$props.type}&id=${$props.id}&id_number=${$props.id_number}&date=${date}`,
|
|
|
// });
|
|
|
// };
|
|
|
//设置灰度
|
|
|
const SysGreyType = ref(0);
|
|
|
const GetGreySet = () => {
|
|
|
uni.getStorage({
|
|
|
key: "SysGreytype",
|
|
|
success: function (res) {
|
|
|
console.log(res.data);
|
|
|
if (res.data == 1) {
|
|
|
SysGreyType.value = 1;
|
|
|
}
|
|
|
},
|
|
|
});
|
|
|
};
|
|
|
</script>
|
|
|
<template>
|
|
|
<view>
|
|
|
<view
|
|
|
v-if="data_show"
|
|
|
class="info_wrapper"
|
|
|
:class="SysGreyType == 1 ? 'grey' : ''"
|
|
|
>
|
|
|
<view v-if="!chart1_option.show" class="info_chart_wrapper">
|
|
|
<AnalysisChart1 :option="chart1_option"></AnalysisChart1>
|
|
|
</view>
|
|
|
<view class="info_content_wrapper">
|
|
|
<view class="info_content_result_wrapper"
|
|
|
>本次体检：{{ analysis_content.result }}</view
|
|
|
>
|
|
|
<view class="info_content_line_wrapper"></view>
|
|
|
<view class="info_content_content_wrapper">
|
|
|
<view>{{ analysis_content.name }}：{{ analysis_content.value }}</view>
|
|
|
<view class="info_content_date_wrapper">
|
|
|
<view>日期：</view>
|
|
|
<!-- <picker
|
|
|
v-if="date_arr.length"
|
|
|
@change="dateChange"
|
|
|
:value="date_active"
|
|
|
:range="date_arr"
|
|
|
range-key="label"
|
|
|
>
|
|
|
</picker> -->
|
|
|
<view>{{ analysis_content.date }}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view v-if="data_show" class="table_wrapper">
|
|
|
<view
|
|
|
class="table_type_group_wrapper"
|
|
|
:class="SysGreyType == 1 ? 'grey' : ''"
|
|
|
>
|
|
|
<view
|
|
|
@click="chooseTypeClick(1)"
|
|
|
class="table_type_group_item_wrapper"
|
|
|
:class="type == 1 ? 'table_type_group_item_active_wrapper' : ''"
|
|
|
>趋势图表</view
|
|
|
>
|
|
|
<view
|
|
|
@click="chooseTypeClick(2)"
|
|
|
class="table_type_group_item_wrapper"
|
|
|
:class="type == 2 ? 'table_type_group_item_active_wrapper' : ''"
|
|
|
>详细数据</view
|
|
|
>
|
|
|
</view>
|
|
|
<view
|
|
|
class="table_content_wrapper"
|
|
|
:class="SysGreyType == 1 ? 'grey' : ''"
|
|
|
>
|
|
|
<AnalysisChart2
|
|
|
:option="chart2_option"
|
|
|
v-if="chart2_option.show && type === 1"
|
|
|
></AnalysisChart2>
|
|
|
<view class="table_content_table_wrapper" v-if="type === 2">
|
|
|
<view class="table_content_table_line_wrapper">
|
|
|
<view
|
|
|
class="table_content_table_line_item_wrapper table_content_table_title_wrapper"
|
|
|
>临床意义
|
|
|
</view>
|
|
|
<view
|
|
|
class="table_content_table_line_item_wrapper table_content_table_line_center_wrapper table_content_table_title_wrapper"
|
|
|
>
|
|
|
{{ analysis_content.table?.name }}
|
|
|
</view>
|
|
|
<view
|
|
|
class="table_content_table_line_item_wrapper table_content_table_title_wrapper"
|
|
|
>评估</view
|
|
|
>
|
|
|
</view>
|
|
|
<view
|
|
|
class="table_content_table_line_wrapper"
|
|
|
v-for="(i, k) in analysis_content?.table?.list"
|
|
|
:key="k"
|
|
|
>
|
|
|
<view
|
|
|
class="table_content_table_line_item_wrapper"
|
|
|
:class="[
|
|
|
!!(k % 2) ? '' : 'table_content_table_line_item_active_wrapper',
|
|
|
]"
|
|
|
>{{ i.date }}
|
|
|
</view>
|
|
|
<view
|
|
|
class="table_content_table_line_item_wrapper table_content_table_line_center_wrapper"
|
|
|
:class="[
|
|
|
!!(k % 2) ? '' : 'table_content_table_line_item_active_wrapper',
|
|
|
]"
|
|
|
>{{ i.value }}</view
|
|
|
>
|
|
|
<view
|
|
|
class="table_content_table_line_item_wrapper"
|
|
|
:class="[
|
|
|
!!(k % 2) ? '' : 'table_content_table_line_item_active_wrapper',
|
|
|
]"
|
|
|
>{{ i.assess }}</view
|
|
|
>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view
|
|
|
v-if="data_show"
|
|
|
class="content_wrapper"
|
|
|
:class="SysGreyType == 1 ? 'grey' : ''"
|
|
|
>
|
|
|
<view class="analysis_title_wrapper">
|
|
|
<view class="analysis_title_icon_wrapper">
|
|
|
<image
|
|
|
:src="$image('/storage/assets/report/report/竖线@2x.png')"
|
|
|
></image>
|
|
|
</view>
|
|
|
<view class="analysis_title_text_wrapper">临床意义</view>
|
|
|
</view>
|
|
|
<view class="content_text_wrapper">
|
|
|
<text v-html="analysis_content.content"></text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
<style scoped>
|
|
|
.info_content_date_wrapper {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
}
|
|
|
|
|
|
.table_content_table_line_item_wrapper {
|
|
|
width: 210rpx;
|
|
|
text-align: center;
|
|
|
height: 60rpx;
|
|
|
font-size: 26rpx;
|
|
|
font-weight: 500;
|
|
|
color: #333333;
|
|
|
line-height: 60rpx;
|
|
|
margin-top: 10rpx;
|
|
|
}
|
|
|
|
|
|
.table_content_table_line_item_active_wrapper {
|
|
|
background: #f1f5f8;
|
|
|
}
|
|
|
|
|
|
.table_content_table_title_wrapper {
|
|
|
background: #efefef;
|
|
|
}
|
|
|
|
|
|
.table_content_table_line_center_wrapper {
|
|
|
margin-left: 3rpx;
|
|
|
margin-right: 3rpx;
|
|
|
}
|
|
|
|
|
|
.table_content_table_wrapper {
|
|
|
margin-top: 45rpx;
|
|
|
}
|
|
|
|
|
|
.table_content_table_line_wrapper {
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
}
|
|
|
|
|
|
.table_type_group_item_wrapper {
|
|
|
font-size: 28rpx;
|
|
|
font-weight: normal;
|
|
|
color: #757575;
|
|
|
line-height: 68rpx;
|
|
|
text-align: center;
|
|
|
width: 212rpx;
|
|
|
}
|
|
|
|
|
|
.table_type_group_wrapper {
|
|
|
width: 430rpx;
|
|
|
height: 62rpx;
|
|
|
background: #d0f3ee;
|
|
|
border-radius: 8rpx;
|
|
|
margin: 30rpx auto 0;
|
|
|
border: #16c5a9 solid 3rpx;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
|
|
|
.table_type_group_item_active_wrapper {
|
|
|
background: #16c5a9;
|
|
|
color: #ffffff;
|
|
|
}
|
|
|
|
|
|
.content_text_wrapper {
|
|
|
font-size: 24rpx;
|
|
|
font-weight: 500;
|
|
|
color: #343434;
|
|
|
line-height: 48rpx;
|
|
|
padding: 15rpx 35rpx;
|
|
|
}
|
|
|
|
|
|
.info_content_content_wrapper {
|
|
|
width: 318rpx;
|
|
|
padding-bottom: 10rpx;
|
|
|
background: #fff8ed;
|
|
|
border-radius: 1rpx;
|
|
|
margin-top: 9rpx;
|
|
|
font-size: 26rpx;
|
|
|
font-weight: 500;
|
|
|
color: #444444;
|
|
|
line-height: 50rpx;
|
|
|
padding-top: 20rpx;
|
|
|
padding-left: 12rpx;
|
|
|
}
|
|
|
|
|
|
.info_content_line_wrapper {
|
|
|
width: 330rpx;
|
|
|
height: 1rpx;
|
|
|
background: #bfbfbf;
|
|
|
border-radius: 1rpx;
|
|
|
margin-top: 21rpx;
|
|
|
}
|
|
|
|
|
|
.info_content_result_wrapper {
|
|
|
font-size: 30rpx;
|
|
|
font-weight: 500;
|
|
|
color: #d38014;
|
|
|
line-height: 1;
|
|
|
margin-left: 12rpx;
|
|
|
}
|
|
|
|
|
|
.info_content_wrapper {
|
|
|
width: 330rpx;
|
|
|
margin-left: 39rpx;
|
|
|
}
|
|
|
|
|
|
.info_chart_wrapper {
|
|
|
width: 294rpx;
|
|
|
height: 338rpx;
|
|
|
}
|
|
|
|
|
|
.content_wrapper {
|
|
|
width: 750rpx;
|
|
|
padding-bottom: 100rpx;
|
|
|
background: #ffffff;
|
|
|
box-shadow: 0px 1rpx 1rpx 0px rgba(2, 2, 4, 0.05);
|
|
|
border-radius: 10rpx;
|
|
|
margin-top: 15rpx;
|
|
|
}
|
|
|
|
|
|
.table_wrapper {
|
|
|
width: 750rpx;
|
|
|
background: #ffffff;
|
|
|
box-shadow: 0px 1rpx 1rpx 0px rgba(2, 2, 4, 0.05);
|
|
|
border-radius: 10rpx;
|
|
|
margin-top: 15rpx;
|
|
|
overflow: hidden;
|
|
|
padding-bottom: 34rpx;
|
|
|
}
|
|
|
|
|
|
.info_wrapper {
|
|
|
width: 750rpx;
|
|
|
height: 375rpx;
|
|
|
background: #ffffff;
|
|
|
box-shadow: 0px 1rpx 1rpx 0px rgba(2, 2, 4, 0.05);
|
|
|
border-radius: 10rpx;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
}
|
|
|
|
|
|
.analysis_title_text_wrapper {
|
|
|
color: #57c1b0;
|
|
|
font-size: 28rpx;
|
|
|
font-weight: bold;
|
|
|
line-height: 1;
|
|
|
margin-left: 18rpx;
|
|
|
}
|
|
|
|
|
|
.analysis_title_icon_wrapper image {
|
|
|
width: 10rpx;
|
|
|
height: 32rpx;
|
|
|
display: block;
|
|
|
}
|
|
|
|
|
|
.analysis_title_icon_wrapper {
|
|
|
width: 10rpx;
|
|
|
height: 32rpx;
|
|
|
margin-left: 31rpx;
|
|
|
}
|
|
|
|
|
|
.analysis_title_wrapper {
|
|
|
height: 80rpx;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
}
|
|
|
.grey {
|
|
|
filter: grayscale(100%);
|
|
|
}
|
|
|
</style>
|