
<script lang="ts">
export default {
  name: 'dataanalysis' //数据分析
};
</script>
<script setup lang="ts">
import { onMounted, ref,nextTick } from "vue";
import { ElMessage, ElMessageBox, FormRules,ElTree,ElTable,TabsPaneContext} from "element-plus";
import { queryExamineSchoolGradeTree,queryMyopiaStatistics,queryAbnormalStatistics,queryFarSightednessStatistics,
  querySamplingComparison,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([])
const treeRef = ref<InstanceType<typeof ElTree>>()
function getTree(){
  let params = {
    planId: props.planInfo.id,
    orgId: props.planInfo.org_id,
    orgType: props.planInfo.org_type,
  };
  treeLoading.value = true
  queryExamineSchoolGradeTree(params).then((res) => {
    treeData.value = publicTree(res.data,"")
    if( treeData.value.length != 0){
      nodeData.value = treeData.value[0]
      nextTick(() => {
        treeRef.value?.setCurrentKey(nodeData.value.id);
        init()
      });
    
    }
    

    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:1},{label:'女',value:2}])
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,
    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].newRate = ((res.data.records[i].is_new_nearsighted / res.data.records[i].inspect)* 100).toFixed(2)
          res.data.records[i].goodRate = ((res.data.records[i].is_tobe_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
        }
        
      }
      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;
      loading.value = false
      queryInfo.value.total = res.data.total
    }).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;
      loading.value = false
      queryInfo.value.total = res.data.total
    }).catch(()=>{
      loading.value = false
    });
  }
  
}
const handleClick = (tab: TabsPaneContext, event: Event) => {
  queryInfo.value.current = 1
  queryInfo.value.total = 0
  setTimeout(()=>{
    init()
  },200)

}
const nodeData:any = ref({})
const handleNodeClick = (data: Tree) => {
  nodeData.value = data
  queryInfo.value.current = 1
  queryInfo.value.total = 0
  queryInfo.value.gender = ""
  queryInfo.value.range = ""
  queryInfo.value.schoolType = ""
  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
    });
  }else if(activeName.value == '抽检对比分析'){
    params.type = "4"
    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()
   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 v-loading="loading" element-loading-text="正在加载数据，请耐心等待......" ref="multipleTableRef" :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="is_new_nearsighted" align="center" label="人数" width="80" >
                      <template #default="scope">
                      <span>{{scope.row.is_new_nearsighted}}人</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="is_tobe_good" align="center" label="人数" width="80" >
                      <template #default="scope">
                      <span>{{scope.row.is_tobe_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-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('4')">重置</el-button>
                  </div>
                  <div>
                    <el-button type="primary" @click="sortinfo('4')">
                      <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('4')">
                      <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="tableData4" 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="inspect" label="普检人数" align="center">
                    <template #default="scope">
                        <span>{{scope.row.inspect}}人</span>
                      </template>
                  </el-table-column>
                  <el-table-column prop="spotCheck" label="抽检人数" align="center">
                    <template #default="scope">
                        <span>{{scope.row.spotCheck}}人</span>
                      </template>
                  </el-table-column>
                  <el-table-column prop="spotCheckRate" label="抽检比例" align="center">
                    <template #default="scope">
                        <span>{{scope.row.spotCheckRate}}%</span>
                      </template>
                  </el-table-column>
                  <el-table-column prop="inspectMyopia" label="普检近视人数" align="center">
                    <template #default="scope">
                        <span class="text-[#4099ff] font-bold">{{scope.row.inspectMyopia}}</span>人
                      </template>
                  </el-table-column>
                  <el-table-column prop="inspectMyopiaRate" label="普检近视率" align="center">
                    <template #default="scope">
                        <span class="text-[#4099ff] font-bold">{{scope.row.inspectMyopiaRate}}</span>%
                      </template>
                  </el-table-column>
                  <el-table-column prop="spotCheckMyopia" label="抽检近视人数" align="center">
                    <template #default="scope">
                        <span class="text-[#FF9900] font-bold">{{scope.row.spotCheckMyopia}}</span>人
                      </template>
                  </el-table-column>
                  <el-table-column prop="spotCheckMyopiaRate" label="抽检近视率" align="center">
                    <template #default="scope">
                        <span class="text-[#FF9900] font-bold">{{scope.row.spotCheckMyopiaRate}}</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{
    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 !important;
}
.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>
