828 lines
33 KiB
Vue
828 lines
33 KiB
Vue
|
|
||
|
|
<script lang="ts">
|
||
|
|
export default {
|
||
|
|
name: 'dataanalysiss' // 抽检-数据分析
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { onMounted, ref } from "vue";
|
||
|
|
import { ElMessage, ElMessageBox, FormRules,ElTable,TabsPaneContext} from "element-plus";
|
||
|
|
import { queryExamineSchoolTree,queryMyopiaStatistics,queryAbnormalStatistics,queryFarSightednessStatistics,
|
||
|
|
querySamplingComparison,queryRulesSchoolList,exportStatistics } from "@/api/planscreening";
|
||
|
|
import Page from '@/components/Pagination/page.vue';
|
||
|
|
import { publicTree } from '@/utils/validate';
|
||
|
|
import { getDict } from '@/api/dict'
|
||
|
|
import { downloadFile } from '@/utils/index'
|
||
|
|
const props:any = defineProps({
|
||
|
|
planInfo: {
|
||
|
|
required: false,
|
||
|
|
type: Object,
|
||
|
|
default: {}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
const treeLoading = ref(false)
|
||
|
|
const treeData:any = ref([])
|
||
|
|
function getTree(){
|
||
|
|
if(props.planInfo.exam_type == '01'){
|
||
|
|
let params = {
|
||
|
|
planId: props.planInfo.id,
|
||
|
|
orgId: props.planInfo.org_id,
|
||
|
|
orgType: props.planInfo.org_type,
|
||
|
|
};
|
||
|
|
treeLoading.value = true
|
||
|
|
queryExamineSchoolTree(params).then((res) => {
|
||
|
|
treeData.value = publicTree(res.data,"")
|
||
|
|
treeLoading.value = false
|
||
|
|
}).catch(()=>{
|
||
|
|
treeLoading.value = false
|
||
|
|
});
|
||
|
|
}else{
|
||
|
|
//获取表格类型
|
||
|
|
let params = {
|
||
|
|
planId:props.planInfo.id
|
||
|
|
}
|
||
|
|
treeLoading.value = true
|
||
|
|
queryRulesSchoolList(params).then((res) => {
|
||
|
|
treeData.value = res.data;
|
||
|
|
treeLoading.value = false
|
||
|
|
}).catch(()=>{
|
||
|
|
treeLoading.value = false
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
const tableData = ref([])
|
||
|
|
const tableData2 = ref([])
|
||
|
|
const tableData3 = ref([])
|
||
|
|
const tableData4 = ref([])
|
||
|
|
const genderoptions:any = ref([{label:'男',value:0},{label:'女',value:1}])
|
||
|
|
const loading = ref(false)
|
||
|
|
const sortstatus = ref(0)
|
||
|
|
const queryInfo :any = ref({
|
||
|
|
current:1,
|
||
|
|
size:10,
|
||
|
|
total:0
|
||
|
|
})
|
||
|
|
|
||
|
|
// 左侧树
|
||
|
|
const treedata: any = ref([]);
|
||
|
|
const treeloading = ref(false)
|
||
|
|
const defaultProps = { label: "name" }
|
||
|
|
//树形控件类型定义
|
||
|
|
interface Tree {
|
||
|
|
[x: string]: any;
|
||
|
|
label: string;
|
||
|
|
children?: Tree[];
|
||
|
|
}
|
||
|
|
const activeName = ref('近视统计')
|
||
|
|
|
||
|
|
const vMove = {
|
||
|
|
mounted(el: any) {
|
||
|
|
el.onmousedown = function (e: any) {
|
||
|
|
var init = e.clientX;
|
||
|
|
var parent: any = document.getElementById("silderLeft");
|
||
|
|
const initWidth: any = parent.offsetWidth;
|
||
|
|
document.onmousemove = function (e) {
|
||
|
|
var end = e.clientX;
|
||
|
|
var newWidth = end - init + initWidth;
|
||
|
|
parent.style.width = newWidth + "px";
|
||
|
|
};
|
||
|
|
document.onmouseup = function () {
|
||
|
|
document.onmousemove = document.onmouseup = null;
|
||
|
|
};
|
||
|
|
};
|
||
|
|
}
|
||
|
|
}
|
||
|
|
// 初始化
|
||
|
|
function init(){
|
||
|
|
// let params:any = {
|
||
|
|
// gender: queryInfo.value.gender,
|
||
|
|
// planId:props.planInfo.id,
|
||
|
|
// range: queryInfo.value.range,
|
||
|
|
// schoolType: queryInfo.value.schoolType,
|
||
|
|
// };
|
||
|
|
// if(nodeData.value.org_type =='5'){
|
||
|
|
// params.schoolId = nodeData.value.id
|
||
|
|
// params.regionId = ""
|
||
|
|
// }else{
|
||
|
|
// params.regionId = nodeData.value.id
|
||
|
|
// params.schoolId = ""
|
||
|
|
// }
|
||
|
|
let params:any = {
|
||
|
|
gender: queryInfo.value.gender,
|
||
|
|
planId:props.planInfo.id,
|
||
|
|
range: queryInfo.value.range,
|
||
|
|
schoolType: queryInfo.value.schoolType,
|
||
|
|
examType:props.planInfo.exam_type,
|
||
|
|
orgId:nodeData.value.id,
|
||
|
|
orgType:nodeData.value.org_type,
|
||
|
|
sort: queryInfo.value.sort,
|
||
|
|
current:queryInfo.value.current,
|
||
|
|
size:queryInfo.value.size,
|
||
|
|
};
|
||
|
|
loading.value = true
|
||
|
|
if(activeName.value == '近视统计'){
|
||
|
|
queryMyopiaStatistics(params).then((res) => {
|
||
|
|
for(let i=0;i<res.data.records.length;i++){
|
||
|
|
if(res.data.records[i].inspect>0){
|
||
|
|
res.data.records[i].myopiaRate = ((res.data.records[i].myopia / res.data.records[i].inspect)* 100).toFixed(2)
|
||
|
|
res.data.records[i].premyopiaRate = ((res.data.records[i].premyopia / res.data.records[i].inspect)* 100).toFixed(2)
|
||
|
|
res.data.records[i].moderateRate = ((res.data.records[i].moderate / res.data.records[i].inspect)* 100).toFixed(2)
|
||
|
|
res.data.records[i].severeRate = ((res.data.records[i].severe / res.data.records[i].inspect)* 100).toFixed(2)
|
||
|
|
res.data.records[i].new = res.data.records[i].is_new_nearsighted
|
||
|
|
res.data.records[i].good = res.data.records[i].is_tobe_good
|
||
|
|
res.data.records[i].newRate = ((res.data.records[i].new / res.data.records[i].inspect)* 100).toFixed(2)
|
||
|
|
res.data.records[i].goodRate = ((res.data.records[i].good / res.data.records[i].inspect)* 100).toFixed(2)
|
||
|
|
}else{
|
||
|
|
res.data.records[i].myopiaRate = 0
|
||
|
|
res.data.records[i].premyopiaRate = 0
|
||
|
|
res.data.records[i].moderateRate = 0
|
||
|
|
res.data.records[i].severeRate =0
|
||
|
|
res.data.records[i].new = 0
|
||
|
|
res.data.records[i].good = 0
|
||
|
|
res.data.records[i].newRate = 0
|
||
|
|
res.data.records[i].goodRate = 0
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
tableData.value = res.data.records;
|
||
|
|
queryInfo.value.total = res.data.total
|
||
|
|
loading.value = false
|
||
|
|
}).catch(()=>{
|
||
|
|
loading.value = false
|
||
|
|
});
|
||
|
|
}else if(activeName.value == '视力不良统计'){
|
||
|
|
queryAbnormalStatistics(params).then((res) => {
|
||
|
|
for(let i=0;i<res.data.records.length;i++){
|
||
|
|
if(res.data.records[i].inspect>0){
|
||
|
|
res.data.records[i].myopiaRate = ((res.data.records[i].myopia / res.data.records[i].inspect)* 100).toFixed(2)
|
||
|
|
res.data.records[i].premyopiaRate = ((res.data.records[i].premyopia / res.data.records[i].inspect)* 100).toFixed(2)
|
||
|
|
res.data.records[i].moderateRate = ((res.data.records[i].moderate / res.data.records[i].inspect)* 100).toFixed(2)
|
||
|
|
res.data.records[i].severeRate = ((res.data.records[i].severe / res.data.records[i].inspect)* 100).toFixed(2)
|
||
|
|
res.data.records[i].newRate = ((res.data.records[i].new / res.data.records[i].inspect)* 100).toFixed(2)
|
||
|
|
res.data.records[i].goodRate = ((res.data.records[i].good / res.data.records[i].inspect)* 100).toFixed(2)
|
||
|
|
}else{
|
||
|
|
res.data.records[i].myopiaRate = 0
|
||
|
|
res.data.records[i].premyopiaRate = 0
|
||
|
|
res.data.records[i].moderateRate = 0
|
||
|
|
res.data.records[i].severeRate =0
|
||
|
|
res.data.records[i].newRate = 0
|
||
|
|
res.data.records[i].goodRate = 0
|
||
|
|
}
|
||
|
|
}
|
||
|
|
tableData2.value = res.data.records;
|
||
|
|
queryInfo.value.total = res.data.total
|
||
|
|
loading.value = false
|
||
|
|
}).catch(()=>{
|
||
|
|
loading.value = false
|
||
|
|
});
|
||
|
|
}else if(activeName.value == '远视储备率统计'){
|
||
|
|
queryFarSightednessStatistics(params).then((res) => {
|
||
|
|
for(let i=0;i<res.data.records.length;i++){
|
||
|
|
if(res.data.records[i].inspect>0){
|
||
|
|
res.data.records[i].sufficientRate = ((res.data.records[i].sufficient / res.data.records[i].inspect)* 100).toFixed(2)
|
||
|
|
res.data.records[i].insufficientRate = ((res.data.records[i].insufficient / res.data.records[i].inspect)* 100).toFixed(2)
|
||
|
|
}else{
|
||
|
|
res.data.records[i].sufficientRate = 0
|
||
|
|
res.data.records[i].insufficientRate = 0
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
tableData3.value = res.data.records;
|
||
|
|
queryInfo.value.total = res.data.total
|
||
|
|
loading.value = false
|
||
|
|
}).catch(()=>{
|
||
|
|
loading.value = false
|
||
|
|
});
|
||
|
|
}else if(activeName.value == '抽检对比分析'){
|
||
|
|
querySamplingComparison(params).then((res) => {
|
||
|
|
for(let i=0;i<res.data.records.length;i++){
|
||
|
|
if(res.data.records[i].inspect>0){
|
||
|
|
res.data.records[i].spotCheckRate = ((res.data.records[i].spotCheck / res.data.records[i].inspect)* 100).toFixed(2)
|
||
|
|
|
||
|
|
}else{
|
||
|
|
res.data.records[i].spotCheckRate = '0.00'
|
||
|
|
}
|
||
|
|
if(res.data.records[i].inspect ==0){
|
||
|
|
res.data.records[i].inspectMyopiaRate = '0.00'
|
||
|
|
}else{
|
||
|
|
res.data.records[i].inspectMyopiaRate = ((res.data.records[i].inspectMyopia / res.data.records[i].inspect)* 100).toFixed(2)
|
||
|
|
}
|
||
|
|
if(res.data.records[i].spotCheck ==0){
|
||
|
|
res.data.records[i].spotCheckMyopiaRate = '0.00'
|
||
|
|
}else{
|
||
|
|
res.data.records[i].spotCheckMyopiaRate = ((res.data.records[i].spotCheckMyopia / res.data.records[i].spotCheck)* 100).toFixed(2)
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
tableData4.value = res.data.records;
|
||
|
|
queryInfo.value.total = res.data.total
|
||
|
|
loading.value = false
|
||
|
|
}).catch(()=>{
|
||
|
|
loading.value = false
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
const handleClick = (tab: TabsPaneContext, event: Event) => {
|
||
|
|
sortstatus.value = 0
|
||
|
|
queryInfo.value = {
|
||
|
|
current:1,
|
||
|
|
size:10,
|
||
|
|
total:0
|
||
|
|
}
|
||
|
|
setTimeout(()=>{
|
||
|
|
init()
|
||
|
|
},200)
|
||
|
|
|
||
|
|
}
|
||
|
|
const nodeData:any = ref({})
|
||
|
|
const handleNodeClick = (data: Tree) => {
|
||
|
|
nodeData.value = data
|
||
|
|
queryInfo.value = {
|
||
|
|
current:1,
|
||
|
|
size:10,
|
||
|
|
total:0
|
||
|
|
}
|
||
|
|
init()
|
||
|
|
};
|
||
|
|
//重置
|
||
|
|
function resetdata(type:any){
|
||
|
|
queryInfo.value = {
|
||
|
|
current:1,
|
||
|
|
size:10,
|
||
|
|
total:0
|
||
|
|
}
|
||
|
|
init()
|
||
|
|
}
|
||
|
|
// 导出
|
||
|
|
function exportinfo(type:any){
|
||
|
|
let params:any = {
|
||
|
|
gender: queryInfo.value.gender,
|
||
|
|
planId:props.planInfo.id,
|
||
|
|
range: queryInfo.value.range,
|
||
|
|
schoolType: queryInfo.value.schoolType,
|
||
|
|
examType:props.planInfo.exam_type,
|
||
|
|
orgId:nodeData.value.id,
|
||
|
|
orgType:nodeData.value.org_type,
|
||
|
|
sort: queryInfo.value.sort,
|
||
|
|
current:1,
|
||
|
|
size:999,
|
||
|
|
};
|
||
|
|
|
||
|
|
loading.value = true
|
||
|
|
if(activeName.value == '近视统计'){
|
||
|
|
params.type = "1"
|
||
|
|
exportStatistics(params).then((response) => {
|
||
|
|
downloadFile(response,'近视统计', 'xlsx')
|
||
|
|
loading.value = false
|
||
|
|
}).catch(()=>{
|
||
|
|
loading.value = false
|
||
|
|
});
|
||
|
|
}else if(activeName.value == '视力不良统计'){
|
||
|
|
params.type = "2"
|
||
|
|
exportStatistics(params).then((response) => {
|
||
|
|
downloadFile(response,'视力不良统计', 'xlsx')
|
||
|
|
loading.value = false
|
||
|
|
}).catch(()=>{
|
||
|
|
loading.value = false
|
||
|
|
});
|
||
|
|
}else if(activeName.value == '远视储备率统计'){
|
||
|
|
params.type = "3"
|
||
|
|
exportStatistics(params).then((response) => {
|
||
|
|
downloadFile(response,'远视储备率统计', 'xlsx')
|
||
|
|
loading.value = false
|
||
|
|
}).catch(()=>{
|
||
|
|
loading.value = false
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
// 排序
|
||
|
|
function sortinfo(type:any){
|
||
|
|
// 排序
|
||
|
|
if(sortstatus.value === 0) {
|
||
|
|
sortstatus.value = 1
|
||
|
|
queryInfo.value.sort = 'up'
|
||
|
|
} else if(sortstatus.value === 1) {
|
||
|
|
sortstatus.value = 2
|
||
|
|
queryInfo.value.sort = 'down'
|
||
|
|
} else {
|
||
|
|
sortstatus.value = 0
|
||
|
|
queryInfo.value.sort = null
|
||
|
|
}
|
||
|
|
init()
|
||
|
|
}
|
||
|
|
onMounted(() => {
|
||
|
|
getTree()
|
||
|
|
init()
|
||
|
|
getDict({ dictcode: 'schoolType' }).then((res) => {
|
||
|
|
schoolTypeData.value = res.data
|
||
|
|
})
|
||
|
|
});
|
||
|
|
const rangeData:any = ref([{name:'按地区统计',code:'1'},{name:'按年级统计',code:'2'}])
|
||
|
|
const schoolTypeData:any = ref([])
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div class="contents-box">
|
||
|
|
<aside id="silderLeft">
|
||
|
|
<div class="lefttitle">
|
||
|
|
<div class="line"></div>
|
||
|
|
<div class="treetitle">数据列表</div>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<el-tree v-loading="treeloading" ref="treeRef" node-key="id" :data="treeData"
|
||
|
|
default-expand-all
|
||
|
|
:highlight-current="true" :props="defaultProps" :expand-on-click-node="false"
|
||
|
|
@node-click="handleNodeClick" style="height: calc(100vh - 340px); overflow: auto">
|
||
|
|
</el-tree>
|
||
|
|
</div>
|
||
|
|
<div class="moveBtn" v-move>
|
||
|
|
<div class="moveBtn-line" v-move></div>
|
||
|
|
</div>
|
||
|
|
</aside>
|
||
|
|
<div class="silderRights">
|
||
|
|
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick" style="height:calc(100vh - 325px);">
|
||
|
|
<el-tab-pane label="近视统计" name="近视统计">
|
||
|
|
<div class="tabcontent">
|
||
|
|
<div class="searchinfo">
|
||
|
|
<div>
|
||
|
|
<!-- <el-select v-model="queryInfo.range" clearable placeholder="请选择统计范围" size="large" style="width: 200px">
|
||
|
|
<el-option v-for="item in rangeData" :key="item.code" :label="item.name" :value="item.code"/>
|
||
|
|
</el-select>
|
||
|
|
<el-select v-model="queryInfo.schoolType" clearable class="ml-4" placeholder="请选择学校类型" size="large" style="width: 200px">
|
||
|
|
<el-option v-for="item in schoolTypeData" :key="item.itemcode" :label="item.dictname" :value="item.itemcode"/>
|
||
|
|
</el-select> -->
|
||
|
|
<el-select v-model="queryInfo.gender" clearable class="ml-4" placeholder="请选择性别" size="large" style="width: 200px" @change="init">
|
||
|
|
<el-option v-for="item in genderoptions" :key="item.value" :label="item.label" :value="item.value"/>
|
||
|
|
</el-select>
|
||
|
|
<el-button type="primary" @click="init">统计</el-button>
|
||
|
|
<el-button @click="resetdata('1')">重置</el-button>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<el-button type="primary" @click="sortinfo('1')">
|
||
|
|
<img v-if="sortstatus==0" src="@/assets/visionscreening/myopiarate.png" style="padding-right: 5px;" alt="">
|
||
|
|
<img v-if="sortstatus==1" src="@/assets/visionscreening/ascsort.png" style="padding-right: 5px;" alt="">
|
||
|
|
<img v-if="sortstatus==2" src="@/assets/visionscreening/descsort.png" style="padding-right: 5px;" alt="">
|
||
|
|
近视率
|
||
|
|
</el-button>
|
||
|
|
<el-button type="primary" @click="exportinfo('1')">
|
||
|
|
<img src="@/assets/visionscreening/exports.png" style="padding-right: 5px;" alt="">导出
|
||
|
|
</el-button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<el-table ref="multipleTableRef" v-loading="loading" element-loading-text="正在加载数据，请耐心等待......" :data="tableData" border style="width: 100%; height:calc(100vh - 475px)" :header-cell-style="{background:'rgb(250 250 250)',height:'50px'}">
|
||
|
|
<el-table-column prop="name" label="统计范围" />
|
||
|
|
<el-table-column prop="total" label="总人数" align="center" width="120">
|
||
|
|
<template #default="scope">
|
||
|
|
<span>{{scope.row.total}}人</span>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="inspect" label="已检人数" align="center" width="100">
|
||
|
|
<template #default="scope">
|
||
|
|
<span>{{scope.row.inspect}}人</span>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="myopia" label="近视人数" align="center" width="100">
|
||
|
|
<template #default="scope">
|
||
|
|
<span class="text-[#4099ff] font-bold">{{scope.row.myopia}}</span>人
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="myopiaRate" label="近视率" align="center" width="80">
|
||
|
|
<template #default="scope">
|
||
|
|
<span class=" text-[#4099ff] font-bold">{{scope.row.myopiaRate}}%</span>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column label="近视前期" align="center">
|
||
|
|
<el-table-column prop="premyopia" align="center" label="人数" width="80">
|
||
|
|
<template #default="scope">
|
||
|
|
<span>{{scope.row.premyopia}}人</span>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="premyopiaRate" align="center" label="比例" width="80">
|
||
|
|
<template #default="scope">
|
||
|
|
<span>{{scope.row.premyopiaRate}}%</span>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column label="低度近视" align="center">
|
||
|
|
<el-table-column prop="moderate" align="center" label="人数" width="80">
|
||
|
|
<template #default="scope">
|
||
|
|
<span>{{scope.row.moderate}}人</span>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="moderateRate" align="center" label="比例" width="80">
|
||
|
|
<template #default="scope">
|
||
|
|
<span>{{scope.row.moderateRate}}%</span>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column label="高度近视" align="center">
|
||
|
|
<el-table-column prop="severe" align="center" label="人数" width="80">
|
||
|
|
<template #default="scope">
|
||
|
|
<span>{{scope.row.severe}}人</span>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="severeRate" align="center" label="比例" width="80">
|
||
|
|
<template #default="scope">
|
||
|
|
<span>{{scope.row.severeRate}}%</span>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column label="新发现" align="center">
|
||
|
|
<el-table-column prop="new" align="center" label="人数" width="80" >
|
||
|
|
<template #default="scope">
|
||
|
|
<span>{{scope.row.new}}人</span>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="newRate" align="center" label="比例" width="80" >
|
||
|
|
<template #default="scope">
|
||
|
|
<span>{{scope.row.newRate}}%</span>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column label="好转" align="center">
|
||
|
|
<el-table-column prop="good" align="center" label="人数" width="80" >
|
||
|
|
<template #default="scope">
|
||
|
|
<span>{{scope.row.good}}人</span>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="goodRate" align="center" label="比例" width="80" >
|
||
|
|
<template #default="scope">
|
||
|
|
<span>{{scope.row.goodRate}}%</span>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
</el-table-column>
|
||
|
|
</el-table>
|
||
|
|
<Page class="mt-[20px]" :total="queryInfo.total" v-model:size="queryInfo.size" v-model:current="queryInfo.current"
|
||
|
|
@pagination="init" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</el-tab-pane>
|
||
|
|
<el-tab-pane label="视力不良统计" name="视力不良统计">
|
||
|
|
<div class="tabcontent">
|
||
|
|
<div class="searchinfo">
|
||
|
|
<div>
|
||
|
|
<!-- <el-select v-model="queryInfo.range" clearable placeholder="请选择统计范围" size="large" style="width: 200px">
|
||
|
|
<el-option v-for="item in rangeData" :key="item.code" :label="item.name" :value="item.code"/>
|
||
|
|
</el-select>
|
||
|
|
<el-select v-model="queryInfo.schoolType" clearable class="ml-4" placeholder="请选择学校类型" size="large" style="width: 200px">
|
||
|
|
<el-option v-for="item in schoolTypeData" :key="item.itemcode" :label="item.dictname" :value="item.itemcode"/>
|
||
|
|
</el-select> -->
|
||
|
|
<el-select v-model="queryInfo.gender" clearable class="ml-4" placeholder="请选择性别" size="large" style="width: 200px" @change="init">
|
||
|
|
<el-option v-for="item in genderoptions" :key="item.value" :label="item.label" :value="item.value"/>
|
||
|
|
</el-select>
|
||
|
|
<el-button type="primary" @click="init">统计</el-button>
|
||
|
|
<el-button @click="resetdata('2')">重置</el-button>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<el-button type="primary" @click="sortinfo('2')">
|
||
|
|
<img v-if="sortstatus==0" src="@/assets/visionscreening/myopiarate.png" style="padding-right: 5px;" alt="">
|
||
|
|
<img v-if="sortstatus==1" src="@/assets/visionscreening/ascsort.png" style="padding-right: 5px;" alt="">
|
||
|
|
<img v-if="sortstatus==2" src="@/assets/visionscreening/descsort.png" style="padding-right: 5px;" alt="">
|
||
|
|
视力不良占比
|
||
|
|
</el-button>
|
||
|
|
<el-button type="primary" @click="exportinfo('2')">
|
||
|
|
<img src="@/assets/visionscreening/exports.png" style="padding-right: 5px;" alt="">导出
|
||
|
|
</el-button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<el-table ref="multipleTableRef" v-loading="loading" element-loading-text="正在加载数据，请耐心等待......" :data="tableData2" border style="width: 100%; height:calc(100vh - 475px)" :header-cell-style="{background:'rgb(250 250 250)',height:'50px'}">
|
||
|
|
<el-table-column prop="name" label="统计范围" />
|
||
|
|
<el-table-column prop="total" label="总人数" align="center" width="120">
|
||
|
|
<template #default="scope">
|
||
|
|
<span>{{scope.row.total}}人</span>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="inspect" label="已检人数" align="center" width="100">
|
||
|
|
<template #default="scope">
|
||
|
|
<span>{{scope.row.inspect}}人</span>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="myopia" label="视力不良人数" align="center" width="100">
|
||
|
|
<template #default="scope">
|
||
|
|
<span class="text-[#4099ff] font-bold">{{scope.row.myopia}}</span>人
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="myopiaRate" label="视力不良占比" align="center" width="80" >
|
||
|
|
<template #default="scope">
|
||
|
|
<span class="text-[#4099ff] font-bold">{{scope.row.myopiaRate}}</span>%
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column label="轻度视力不良" align="center">
|
||
|
|
<el-table-column prop="premyopia" align="center" label="人数" width="80">
|
||
|
|
<template #default="scope">
|
||
|
|
<span>{{scope.row.premyopia}}人</span>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="premyopiaRate" align="center" label="比例" width="80">
|
||
|
|
<template #default="scope">
|
||
|
|
<span>{{scope.row.premyopiaRate}}%</span>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column label="中度视力不良" align="center">
|
||
|
|
<el-table-column prop="moderate" align="center" label="人数" width="80">
|
||
|
|
<template #default="scope">
|
||
|
|
<span>{{scope.row.moderate}}人</span>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="moderateRate" align="center" label="比例" width="80">
|
||
|
|
<template #default="scope">
|
||
|
|
<span>{{scope.row.moderateRate}}%</span>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column label="重度视力不良" align="center">
|
||
|
|
<el-table-column prop="severe" align="center" label="人数" width="80">
|
||
|
|
<template #default="scope">
|
||
|
|
<span>{{scope.row.severe}}人</span>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="severeRate" align="center" label="比例" width="80">
|
||
|
|
<template #default="scope">
|
||
|
|
<span>{{scope.row.severeRate}}%</span>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column label="新发现" align="center">
|
||
|
|
<el-table-column prop="new" align="center" label="人数" width="80">
|
||
|
|
<template #default="scope">
|
||
|
|
<span>{{scope.row.new}}人</span>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="newRate" align="center" label="比例" width="80">
|
||
|
|
<template #default="scope">
|
||
|
|
<span>{{scope.row.newRate}}%</span>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column label="好转" align="center">
|
||
|
|
<el-table-column prop="good" align="center" label="人数" width="80">
|
||
|
|
<template #default="scope">
|
||
|
|
<span>{{scope.row.good}}人</span>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="goodRate" align="center" label="比例" width="80">
|
||
|
|
<template #default="scope">
|
||
|
|
<span>{{scope.row.goodRate}}%</span>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
</el-table-column>
|
||
|
|
</el-table>
|
||
|
|
<Page class="mt-[20px]" :total="queryInfo.total" v-model:size="queryInfo.size" v-model:current="queryInfo.current"
|
||
|
|
@pagination="init" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</el-tab-pane>
|
||
|
|
<el-tab-pane label="远视储备率统计" name="远视储备率统计">
|
||
|
|
<div class="tabcontent">
|
||
|
|
<div class="searchinfo">
|
||
|
|
<div>
|
||
|
|
<!-- <el-select v-model="queryInfo.range" clearable placeholder="请选择统计范围" size="large" style="width: 200px">
|
||
|
|
<el-option v-for="item in rangeData" :key="item.code" :label="item.name" :value="item.code"/>
|
||
|
|
</el-select>
|
||
|
|
<el-select v-model="queryInfo.schoolType" clearable class="ml-4" placeholder="请选择学校类型" size="large" style="width: 200px">
|
||
|
|
<el-option v-for="item in schoolTypeData" :key="item.itemcode" :label="item.dictname" :value="item.itemcode"/>
|
||
|
|
</el-select> -->
|
||
|
|
<el-select v-model="queryInfo.gender" clearable class="ml-4" placeholder="请选择性别" size="large" style="width: 200px" @change="init">
|
||
|
|
<el-option v-for="item in genderoptions" :key="item.value" :label="item.label" :value="item.value"/>
|
||
|
|
</el-select>
|
||
|
|
<el-button type="primary" @click="init">统计</el-button>
|
||
|
|
<el-button @click="resetdata('3')">重置</el-button>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<el-button type="primary" @click="sortinfo('3')">
|
||
|
|
<img v-if="sortstatus==0" src="@/assets/visionscreening/myopiarate.png" style="padding-right: 5px;" alt="">
|
||
|
|
<img v-if="sortstatus==1" src="@/assets/visionscreening/ascsort.png" style="padding-right: 5px;" alt="">
|
||
|
|
<img v-if="sortstatus==2" src="@/assets/visionscreening/descsort.png" style="padding-right: 5px;" alt="">
|
||
|
|
远视储备不足比例
|
||
|
|
</el-button>
|
||
|
|
<el-button type="primary" @click="exportinfo('3')">
|
||
|
|
<img src="@/assets/visionscreening/exports.png" style="padding-right: 5px;" alt="">导出
|
||
|
|
</el-button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<el-table ref="multipleTableRef" v-loading="loading" element-loading-text="正在加载数据，请耐心等待......" :data="tableData3" border style="width: 100%; height:calc(100vh - 475px)" :header-cell-style="{background:'rgb(250 250 250)',height:'50px'}">
|
||
|
|
<el-table-column prop="name" label="统计范围" />
|
||
|
|
<el-table-column prop="total" label="总人数" align="center">
|
||
|
|
<template #default="scope">
|
||
|
|
<span>{{scope.row.total}}人</span>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="inspect" label="已检人数" align="center">
|
||
|
|
<template #default="scope">
|
||
|
|
<span>{{scope.row.inspect}}人</span>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="sufficient" label="远视储备充足人数" align="center">
|
||
|
|
<template #default="scope">
|
||
|
|
<span class="text-[#4099ff] font-bold">{{scope.row.sufficient}}</span>人
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="sufficientRate" label="远视储备充足比例" align="center">
|
||
|
|
<template #default="scope">
|
||
|
|
<span class="text-[#4099ff] font-bold">{{scope.row.sufficientRate}}</span>%
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="insufficient" label="远视储备不足人数" align="center">
|
||
|
|
<template #default="scope">
|
||
|
|
<span class="text-[#4099ff] font-bold">{{scope.row.insufficient}}</span>%
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="insufficientRate" label="远视储备不足比例" align="center">
|
||
|
|
<template #default="scope">
|
||
|
|
<span class="text-[#4099ff] font-bold">{{scope.row.insufficientRate}}</span>%
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
</el-table>
|
||
|
|
<Page class="mt-[20px]" :total="queryInfo.total" v-model:size="queryInfo.size" v-model:current="queryInfo.current"
|
||
|
|
@pagination="init" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</el-tab-pane>
|
||
|
|
</el-tabs>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.contents-box{
|
||
|
|
:deep(.el-tree-node.is-current > .el-tree-node__content) {
|
||
|
|
background-color: #409eff !important;
|
||
|
|
color: #fff !important;
|
||
|
|
}
|
||
|
|
margin-top: 15px;
|
||
|
|
height: 100%;
|
||
|
|
display: -webkit-flex;
|
||
|
|
display: flex;
|
||
|
|
.box-search{
|
||
|
|
display: flex;
|
||
|
|
display: -webkit-flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
:deep(){
|
||
|
|
.el-input{
|
||
|
|
width: 240px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
#silderLeft {
|
||
|
|
width: 242px;
|
||
|
|
box-sizing: border-box;
|
||
|
|
background: #fff;
|
||
|
|
border-radius: 3px;
|
||
|
|
position: relative;
|
||
|
|
&:hover {
|
||
|
|
.moveBtn {
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
/* 拖动条 */
|
||
|
|
.moveBtn {
|
||
|
|
height: 100%;
|
||
|
|
width: 15px;
|
||
|
|
padding: 0 6px;
|
||
|
|
opacity: 0;
|
||
|
|
position: absolute;
|
||
|
|
right: -15px;
|
||
|
|
top: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.moveBtn-line {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
cursor: col-resize;
|
||
|
|
user-select: none;
|
||
|
|
background-color: #60bfff;
|
||
|
|
}
|
||
|
|
.silderRights {
|
||
|
|
flex: 1;
|
||
|
|
position: relative;
|
||
|
|
width: 100%;
|
||
|
|
// overflow: auto;
|
||
|
|
border-radius: 3px;
|
||
|
|
padding-bottom: 0px;
|
||
|
|
margin-left: 15px;
|
||
|
|
box-sizing: border-box;
|
||
|
|
background: transparent;
|
||
|
|
}
|
||
|
|
.lefttitle {
|
||
|
|
min-width: 130px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
padding: 10px 20px;
|
||
|
|
font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
|
||
|
|
font-weight: 700;
|
||
|
|
font-style: normal;
|
||
|
|
font-size: 16px;
|
||
|
|
color: #1B1B1B;
|
||
|
|
border-bottom: 1px var(--el-border-color) var(--el-border-style);
|
||
|
|
margin-bottom: 10px;
|
||
|
|
.line{
|
||
|
|
border-width: 0px;
|
||
|
|
width: 5px;
|
||
|
|
height: 14px;
|
||
|
|
margin-right: 7px;
|
||
|
|
background: inherit;
|
||
|
|
background-color: rgba(64, 158, 255, 1);
|
||
|
|
border: none;
|
||
|
|
border-radius: 0px;
|
||
|
|
-moz-box-shadow: none;
|
||
|
|
-webkit-box-shadow: none;
|
||
|
|
box-shadow: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
:deep(){
|
||
|
|
.el-button{
|
||
|
|
margin-left: 10px;
|
||
|
|
}
|
||
|
|
// .el-tree-node__content{
|
||
|
|
// height: 40px;
|
||
|
|
// padding-left: 12px !important;
|
||
|
|
// color: #505050;
|
||
|
|
// }
|
||
|
|
// .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{
|
||
|
|
// color: #409eff;
|
||
|
|
// }
|
||
|
|
// .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content:hover{
|
||
|
|
// color: #409eff;
|
||
|
|
// background-color: #ecf5ff;
|
||
|
|
// }
|
||
|
|
// .el-tree-node__content:hover{
|
||
|
|
// color: #409eff;
|
||
|
|
// background-color: transparent;
|
||
|
|
// // #ecf5ff
|
||
|
|
// }
|
||
|
|
// .el-tree-node__expand-icon{
|
||
|
|
// color: #333333;
|
||
|
|
// }
|
||
|
|
.el-tabs__item{
|
||
|
|
margin-right: 10px;
|
||
|
|
border: 1px solid #dfe4ee;
|
||
|
|
padding: 0px 20px !important;
|
||
|
|
width: 130px;
|
||
|
|
height: 44px;
|
||
|
|
border-radius: 10px;
|
||
|
|
border-bottom-right-radius: 0px;
|
||
|
|
border-bottom-left-radius: 0px;
|
||
|
|
background-color: #e9ecf3;
|
||
|
|
font-size: 14px;
|
||
|
|
color: #606060;
|
||
|
|
}
|
||
|
|
.el-tabs__nav{
|
||
|
|
padding-left: 20px;
|
||
|
|
}
|
||
|
|
.el-tabs__active-bar{
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
.el-tabs__item:hover{
|
||
|
|
color: #409eff;
|
||
|
|
}
|
||
|
|
.el-tabs__item.is-active{
|
||
|
|
color: #fff;
|
||
|
|
border: 1px solid #409eff;
|
||
|
|
background-color: #409eff;
|
||
|
|
}
|
||
|
|
.el-tabs__nav-wrap::after{
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
.el-tabs__header{
|
||
|
|
margin: 0px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.searchinfo{
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
justify-content: space-between;
|
||
|
|
}
|
||
|
|
.my-header{
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
.icontext{
|
||
|
|
font-size: 12px;
|
||
|
|
color: #787878;
|
||
|
|
width: 25px;
|
||
|
|
text-align: center;
|
||
|
|
cursor: pointer;
|
||
|
|
img{
|
||
|
|
padding-left: 4px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
.tabcontent{
|
||
|
|
background-color: #fff;
|
||
|
|
height: calc(100vh - 329px);
|
||
|
|
border-radius: 5px;
|
||
|
|
padding: 20px;
|
||
|
|
}
|
||
|
|
</style>
|