550 lines
18 KiB
Vue
550 lines
18 KiB
Vue
|
|
<script lang="ts">
|
|
export default {
|
|
name: 'archive' // 常态化筛查-历史档案
|
|
};
|
|
</script>
|
|
<script setup lang="ts">
|
|
import { onMounted, reactive, ref, nextTick,watch } from "vue";
|
|
import { ElMessage, ElMessageBox, FormRules } from "element-plus";
|
|
import { queryStudentVisdataList,exportVisionForm,queryVisionChangeTrend } from "@/api/planscreening";
|
|
import { useDark } from '@vueuse/core'
|
|
import Viewfile from "@/views/component/Viewfile.vue";
|
|
import * as echarts from 'echarts';
|
|
import { downloadFile } from '@/utils/index'
|
|
import { useUserStore } from '@/store/modules/user';
|
|
const userStore = useUserStore();
|
|
const url = userStore.webApiBaseUrl;
|
|
const emit = defineEmits([ 'returnStudent']);
|
|
const props:any = defineProps({
|
|
studentInfo: {
|
|
required: false,
|
|
type: Object,
|
|
default: {}
|
|
}
|
|
})
|
|
let isDark:any = useDark().value == true? '1' : '2'
|
|
watch(useDark(), () => {
|
|
isDark = useDark().value == true? '1' : '2'
|
|
if (useDark().value == true) {
|
|
facechange('1')
|
|
} else {
|
|
facechange('2')
|
|
}
|
|
})
|
|
function returnClick(){
|
|
emit('returnStudent', '1');
|
|
}
|
|
function getData(){
|
|
if(props.studentInfo.id == '' || props.studentInfo.id == null){
|
|
tableData.value = []
|
|
return
|
|
}
|
|
let params = {
|
|
studentId: props.studentInfo.student_id,
|
|
};
|
|
loading.value = true
|
|
queryStudentVisdataList(params).then((res) => {
|
|
tableData.value = res.data;
|
|
loading.value = false
|
|
}).catch(()=>{
|
|
loading.value = false
|
|
});
|
|
queryVisionChangeTrend(params).then((res) => {
|
|
let date = []
|
|
for(let i=0;i<res.data.exam_time.length;i++){
|
|
date.push(dateFormat(res.data.exam_time[i]))
|
|
}
|
|
option.value.xAxis.data = date
|
|
option.value.series[0].data = res.data.vision_left
|
|
option.value.series[1].data = res.data.vision_right
|
|
option2.value.xAxis.data = date
|
|
option2.value.series[0].data = res.data.se_left
|
|
option2.value.series[1].data = res.data.se_right
|
|
|
|
}).catch(()=>{
|
|
});
|
|
|
|
|
|
}
|
|
let myCanvas1:any = null
|
|
let myCanvas2:any = null
|
|
onMounted(() => {
|
|
activeName.value = '1'
|
|
getData();
|
|
window.onresize = ()=>{
|
|
if(myCanvas1 != null){
|
|
myCanvas1.resize()
|
|
}
|
|
if(myCanvas2 != null){
|
|
myCanvas2.resize()
|
|
}
|
|
}
|
|
});
|
|
|
|
|
|
function handleClick(tab:any, event:any){
|
|
if (isDark === '1') {
|
|
facechange('1')
|
|
}else{
|
|
facechange('2')
|
|
}
|
|
if(tab.props.name == '2'){
|
|
setTimeout(()=>{
|
|
myCanvas1 = echarts.init(document.getElementById('myEchart1'))
|
|
myCanvas1.clear()
|
|
myCanvas1.setOption(option.value)
|
|
},200)
|
|
|
|
}
|
|
if(tab.props.name == '3'){
|
|
setTimeout(()=>{
|
|
myCanvas2 = echarts.init(document.getElementById('myEchart2'))
|
|
myCanvas2.clear()
|
|
myCanvas2.setOption(option2.value)
|
|
},200)
|
|
|
|
}
|
|
}
|
|
function facechange(type:any){
|
|
if (type === '1') {
|
|
option.value.xAxis.axisLabel.color = '#ffffff'
|
|
option.value.yAxis.axisLabel.color = '#ffffff'
|
|
option.value.yAxis.splitLine.lineStyle.color = '#4c4d4f'
|
|
option.value.legend.textStyle.color = '#ffffff'
|
|
option2.value.xAxis.axisLabel.color = '#ffffff'
|
|
option2.value.yAxis.axisLabel.color = '#ffffff'
|
|
option2.value.yAxis.splitLine.lineStyle.color = '#4c4d4f'
|
|
option2.value.legend.textStyle.color = '#ffffff'
|
|
}else{
|
|
option.value.xAxis.axisLabel.color = '#787878'
|
|
option.value.yAxis.axisLabel.color = '#787878'
|
|
option.value.yAxis.splitLine.lineStyle.color = '#E0E6F1'
|
|
option.value.legend.textStyle.color = '#000000'
|
|
|
|
option2.value.xAxis.axisLabel.color = '#787878'
|
|
option2.value.yAxis.axisLabel.color = '#787878'
|
|
option2.value.yAxis.splitLine.lineStyle.color = '#E0E6F1'
|
|
option2.value.legend.textStyle.color = '#000000'
|
|
}
|
|
if (myCanvas1) {
|
|
myCanvas1.clear()
|
|
myCanvas1.setOption(option.value);
|
|
myCanvas1.resize()
|
|
}
|
|
if (myCanvas2) {
|
|
myCanvas2.clear()
|
|
myCanvas2.setOption(option2.value);
|
|
myCanvas2.resize()
|
|
}
|
|
}
|
|
const loading = ref(false)
|
|
const tableData:any = ref([])
|
|
const activeName = ref("1")
|
|
function dateFormat(row: any) {
|
|
const daterc = row;
|
|
if (daterc != null) {
|
|
var date = new Date(daterc);
|
|
var year = date.getFullYear();
|
|
var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
|
|
date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
|
|
var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate()
|
|
// 拼接
|
|
return year + "-" + month + "-" + day ;
|
|
}
|
|
}
|
|
|
|
const option:any = ref({
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
legend: {
|
|
data: ['左眼视力', '右眼视力'],
|
|
textStyle:{
|
|
color:'#000'
|
|
},
|
|
left:'left',
|
|
icon: 'rect',
|
|
itemWidth: 15,
|
|
itemHeight: 2,
|
|
itemGap: 40
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: [],
|
|
axisLabel:{
|
|
color:'#787878'
|
|
}
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
axisLabel:{
|
|
color:'#787878'
|
|
},
|
|
splitLine:{
|
|
lineStyle: {
|
|
color: '#E0E6F1'
|
|
}
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
name: '左眼视力',
|
|
type: 'line',
|
|
data: []
|
|
},
|
|
{
|
|
name: '右眼视力',
|
|
type: 'line',
|
|
data: []
|
|
}
|
|
]
|
|
})
|
|
const option2:any = ref({
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
legend: {
|
|
data: ['左眼等效球镜', '右眼等效球镜'],
|
|
textStyle:{
|
|
color:'#000'
|
|
},
|
|
left:'left',
|
|
icon: 'rect',
|
|
itemWidth: 15,
|
|
itemHeight: 2,
|
|
itemGap: 40
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: [],
|
|
axisLabel:{
|
|
color:'#787878'
|
|
}
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
axisLabel:{
|
|
color:'#787878'
|
|
},
|
|
splitLine:{
|
|
lineStyle: {
|
|
color: '#E0E6F1'
|
|
}
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
name: '左眼等效球镜',
|
|
type: 'line',
|
|
data: []
|
|
},
|
|
{
|
|
name: '右眼等效球镜',
|
|
type: 'line',
|
|
data: []
|
|
}
|
|
]
|
|
})
|
|
// 文件下载
|
|
function fileDown(row:any) {
|
|
const params = {
|
|
id: row.id
|
|
}
|
|
exportVisionForm(params).then((response: any) => {
|
|
downloadFile(response, row.student_name + '筛查结果记录表', 'docx')
|
|
}).catch(() => {
|
|
});
|
|
}
|
|
const isViewfile = ref(false)
|
|
const ViewfileUrl = ref("")
|
|
function viewReport(row: any) {
|
|
ViewfileUrl.value = url + '/vision_examine/examine-result/exportVisionForm?id=' + row.id
|
|
setTimeout(()=>{
|
|
isViewfile.value = true
|
|
},200)
|
|
|
|
}
|
|
function CloseView() {
|
|
isViewfile.value = false
|
|
}
|
|
</script>
|
|
<template>
|
|
<div class="schoolStudent-box">
|
|
<div class="schoolStudent-title">
|
|
<div class="class_order">学生视力档案</div>
|
|
<div class="return" @click="returnClick">
|
|
<img src="@/assets/tableicon/u549.png" alt="">
|
|
<div style="padding-left: 2px;padding-top: 2px;">返回</div>
|
|
</div>
|
|
</div>
|
|
<div class="schoolStudent-line"></div>
|
|
<div style="display: flex;align-items: center;padding: 20px 0;">
|
|
<img v-if="(props.studentInfo.photo=='' || props.studentInfo.photo==null) && props.studentInfo.gender == '1'" src="@/assets/student/man.png" alt="" style="width:100px;height:100px;">
|
|
<img v-if="(props.studentInfo.photo=='' || props.studentInfo.photo==null) && props.studentInfo.gender == '2'" src="@/assets/student/woman.png" alt="" style="width:100px;height:100px;">
|
|
<img v-if="props.studentInfo.photo!='' && props.studentInfo.photo!=null" :src="props.studentInfo.photo" alt="" style="width:100px;height:100px;">
|
|
<div style="margin-left: 15px;">
|
|
<div class="basicname">
|
|
<span style="padding-right:20px">{{ props.studentInfo.name }}</span>
|
|
<span style="padding-right:20px">|</span>
|
|
<span v-if="props.studentInfo.gender == '1'">男</span>
|
|
<span v-if="props.studentInfo.gender == '2'">女</span>
|
|
<span style="padding-left:20px;padding-right:20px">|</span>
|
|
<span>{{ props.studentInfo.age }}岁</span>
|
|
</div>
|
|
<div class="basicinfo">
|
|
<span>所属学校：</span>
|
|
<span class="valuetext">{{ props.studentInfo.school_name }}</span>
|
|
<span>所属年级：</span>
|
|
<span class="valuetext">{{ props.studentInfo.grade_name }}</span>
|
|
<span>所属班级：</span>
|
|
<span class="valuetext">{{ props.studentInfo.class_name }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<el-tabs class="tstab" v-model="activeName" @tab-click="handleClick">
|
|
<el-tab-pane label="检查记录" name="1"></el-tab-pane>
|
|
<el-tab-pane label="视力变化趋势" name="2"></el-tab-pane>
|
|
<el-tab-pane label="屈光度变化趋势" name="3"></el-tab-pane>
|
|
</el-tabs>
|
|
<el-table v-if="activeName == '1'" v-loading="loading" :data="tableData" style="width: 100%; height:calc(100vh - 380px)" row-key="id" border
|
|
default-expand-all :header-cell-style="{background:'rgb(250 250 250)',height:'50px'}" >
|
|
<el-table-column type="index" width="60" label="序号"></el-table-column>
|
|
<el-table-column prop="exam_time" label="检查时间" min-width="140" align="center">
|
|
<template #default="scope">
|
|
{{dateFormat(scope.row.exam_time)}}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="vision_left" label="左眼视力" width="60" align="center">
|
|
<template #default="scope">
|
|
<span v-if="scope.row.vision_left !=0 && scope.row.vision_left!=null"> {{scope.row.vision_left.toFixed(1)}}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="vision_right" label="右眼视力" width="60" align="center">
|
|
<template #default="scope">
|
|
<span v-if="scope.row.vision_right !=0 && scope.row.vision_right!=null"> {{scope.row.vision_right.toFixed(1)}}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="sph_left" label="左眼球镜" width="90" align="center">
|
|
<template #default="scope">
|
|
<span v-if="scope.row.sph_left !=0 && scope.row.sph_left!=null">
|
|
<span v-if="scope.row.sph_left>0">+{{scope.row.sph_left.toFixed(2)}}D</span>
|
|
<span v-else>{{scope.row.sph_left.toFixed(2)}}D</span>
|
|
</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="sph_right" label="右眼球镜" width="90" align="center">
|
|
<template #default="scope">
|
|
<span v-if="scope.row.sph_right !=0 && scope.row.sph_right!=null">
|
|
<span v-if="scope.row.sph_right>0">+{{scope.row.sph_right.toFixed(2)}}D</span>
|
|
<span v-else>{{scope.row.sph_right.toFixed(2)}}D</span>
|
|
</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="cytdnder_left" label="左眼柱镜" width="90" align="center">
|
|
<template #default="scope">
|
|
<span v-if="scope.row.cytdnder_left !=0 && scope.row.cytdnder_left!=null">
|
|
<span v-if="scope.row.cytdnder_left>0">+{{scope.row.cytdnder_left.toFixed(2)}}D</span>
|
|
<span v-else>{{scope.row.cytdnder_left.toFixed(2)}}D</span>
|
|
</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="cytdnder_right" label="右眼柱镜" width="90" align="center">
|
|
<template #default="scope">
|
|
<span v-if="scope.row.cytdnder_right !=0 && scope.row.cytdnder_right!=null">
|
|
<span v-if="scope.row.cytdnder_right>0">+{{scope.row.cytdnder_right.toFixed(2)}}D</span>
|
|
<span v-else>{{scope.row.cytdnder_right.toFixed(2)}}D</span>
|
|
</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="axies_left" label="左眼轴位" width="60" align="center"/>
|
|
<el-table-column prop="axies_right" label="右眼轴位" width="60" align="center"/>
|
|
<el-table-column prop="se_left" label="左眼等效球镜" width="120" align="center">
|
|
<template #default="scope">
|
|
<span v-if="scope.row.se_left !=0 && scope.row.se_left!=null">
|
|
<span v-if="scope.row.se_left>0">+{{scope.row.se_left.toFixed(2)}}D</span>
|
|
<span v-else>{{scope.row.se_left.toFixed(2)}}D</span>
|
|
</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="se_right" label="右眼等效球镜" width="120" align="center">
|
|
<template #default="scope">
|
|
<span v-if="scope.row.se_right !=0 && scope.row.se_right!=null">
|
|
<span v-if="scope.row.se_right>0">+{{scope.row.se_right.toFixed(2)}}D</span>
|
|
<span v-else>{{scope.row.se_right.toFixed(2)}}D</span>
|
|
</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="rectify_vision_left" label="左眼矫正视力" width="80" align="center">
|
|
<template #default="scope">
|
|
<span v-if="scope.row.rectify_vision_left !=0 && scope.row.rectify_vision_left!=null"> {{scope.row.rectify_vision_left.toFixed(1)}}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="rectify_vision_right" label="右眼矫正视力" width="80" align="center">
|
|
<template #default="scope">
|
|
<span v-if="scope.row.rectify_vision_right !=0 && scope.row.rectify_vision_right!=null"> {{scope.row.rectify_vision_right.toFixed(1)}}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="is_sighted" label="是否近视" width="90" align="center">
|
|
<template #default="scope">
|
|
<span v-if="scope.row.is_sighted == '0'">否</span>
|
|
<span v-if="scope.row.is_sighted == '1'">是</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="is_hyperopia" label="远视储备是否充足" width="90" align="center">
|
|
<template #default="scope">
|
|
<span v-if="props.studentInfo.age >12">/</span>
|
|
<span v-else-if="scope.row.is_hyperopia == '1'">否</span>
|
|
<span v-else-if="scope.row.is_hyperopia == '0'">是</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="is_glasses" label="是否戴镜" width="100" align="center">
|
|
<template #default="scope">
|
|
<span v-if="scope.row.is_glasses == '4'">不带镜</span>
|
|
<span v-if="scope.row.is_glasses == '3'">角膜塑形镜</span>
|
|
<span v-if="scope.row.is_glasses == '2'">隐形眼镜</span>
|
|
<span v-if="scope.row.is_glasses == '1'">框架眼镜</span>
|
|
<span v-if="scope.row.is_glasses == '0'||scope.row.is_glasses == ''||scope.row.is_glasses == null">未知</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column fixed="right" label="操作" width="100" align="center">
|
|
<template #default="scope">
|
|
<span style="display: flex;display: -webkit-flex;justify-content: space-around; -webkit-justify-content: space-around; ">
|
|
<img src="@/assets/tableicon/u886.png" @click="viewReport(scope.row)" title="查看结果登记表" style="cursor: pointer;"
|
|
>
|
|
<img src="@/assets/tableicon/u889.png" @click="fileDown(scope.row)" title="导出" style="cursor: pointer;"
|
|
>
|
|
<!-- <img src="@/assets/tableicon/u884.png" title="打印" style="cursor: pointer;"> -->
|
|
</span>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<div v-if="activeName == '2'" id="myEchart1" style="width: 100%;height:calc(100vh - 380px)"></div>
|
|
<div v-if="activeName == '3'" id="myEchart2" style="width: 100%;height:calc(100vh - 380px)"></div>
|
|
<Viewfile v-if="isViewfile" :showTime="true" :title="'查看学生体检报告'" :url="ViewfileUrl" :type="'docx'" :clientHeight="600"
|
|
@update="CloseView" />
|
|
</div>
|
|
</template>
|
|
<style scoped lang="scss">
|
|
.schoolStudent-title{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
|
|
font-weight: 700;
|
|
font-style: normal;
|
|
font-size: 18px;
|
|
color: #282828;
|
|
.class_order{
|
|
padding-bottom: 5px;
|
|
border-bottom:3px solid #409eff;
|
|
}
|
|
.return{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-family: 'Arial Normal', 'Arial';
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-size: 12px;
|
|
color: #409EFF;
|
|
width: 50px;
|
|
height: 26px;
|
|
border: 1px solid #C6E2FF;
|
|
background: rgb(236, 245, 255);
|
|
border-radius:4px;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
.schoolStudent-line{
|
|
width: 100%;
|
|
height: 1px;
|
|
background: rgb(220, 223, 230);
|
|
margin-top: -1px;
|
|
}
|
|
.basicname{
|
|
font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
|
|
font-weight: 700;
|
|
font-style: normal;
|
|
font-size: 16px;
|
|
color: #333333;
|
|
text-align: left;
|
|
padding-bottom: 15px;
|
|
}
|
|
.basicinfo{
|
|
font-family: 'Arial Normal', 'Arial';
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-size: 14px;
|
|
color: #787878;
|
|
text-align: left;
|
|
}
|
|
.valuetext{
|
|
font-family: 'Arial Normal', 'Arial';
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-size: 14px;
|
|
color: #363636;
|
|
padding-right: 50px;
|
|
padding-left: 10px;
|
|
}
|
|
.schoolStudent-box{
|
|
width: 100%;
|
|
height: calc(100vh - 130px);
|
|
overflow: auto;
|
|
background-color: rgb(255, 255, 255);
|
|
border: none;
|
|
border-radius: 3px;
|
|
padding: 10px 15px 10px;
|
|
box-sizing: border-box;
|
|
.schoolStudent-title{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
|
|
font-weight: 700;
|
|
font-style: normal;
|
|
font-size: 18px;
|
|
color: #282828;
|
|
.class_order{
|
|
padding-bottom: 5px;
|
|
border-bottom:3px solid #409eff;
|
|
}
|
|
.return{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-family: 'Arial Normal', 'Arial';
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-size: 12px;
|
|
color: #409EFF;
|
|
width: 50px;
|
|
height: 26px;
|
|
border: 1px solid #C6E2FF;
|
|
background: rgb(236, 245, 255);
|
|
border-radius:4px;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
.schoolStudent-line{
|
|
width: 100%;
|
|
height: 1px;
|
|
background: rgb(220, 223, 230);
|
|
margin-top: -1px;
|
|
}
|
|
}
|
|
</style>
|