
<script lang="ts">
// 组件引用
export default {
  name: 'Dashboard' // 现状分析
}
</script>
<script setup lang="ts">
import { Refresh } from '@element-plus/icons-vue'
import * as echarts from 'echarts'
import { onMounted, ref, nextTick,markRaw,onUnmounted,watch } from "vue";
import { useDark } from '@vueuse/core'
import { useUserStore } from '@/store/modules/user';
const userStore = useUserStore();
const title = userStore.title;

const option = ref({
  tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999',
        },
      },
    },
  grid: {
      left: '1%',
      right: '1%',
      bottom: '0%',
      top:'7%',
      containLabel: true,
    },
  xAxis: {
    type: 'category',
    data: ['2021-1', '2021-4', '2022-1', '2022-4', '2022-8', '2023-1'],
    axisLabel:{
      color:'#787878'
    },
  },
  yAxis: {
    type: 'value',
    axisLabel:{
      color:'#787878'
    },
    splitLine:{
      lineStyle: {
        color: '#E0E6F1'  
      }
    }
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110],
      type: 'bar',
      barWidth: 18,
      name:'近视人数',
      itemStyle: {
        normal: {
          color: '#49a2fe',
        }
      },
    }
  ]
})
const option2 = ref({
  tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999',
        },
      },
    },
  grid: {
      left: '1%',
      right: '1%',
      bottom: '0%',
      top:'7%',
      containLabel: true,
    },
  xAxis: {
    type: 'category',
    data: ['2021-1', '2021-4', '2022-1', '2022-4', '2022-8', '2023-1'],
    axisLabel:{
      color:'#787878'
    }
  },
  yAxis: {
    type: 'value',
    axisLabel:{
      color:'#787878'
    },
    splitLine:{
      lineStyle: {
        color: '#E0E6F1'  
      }
    }
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line',
      name:'近视人数',
      symbol:'circle',
      symbolSize:6,
      itemStyle: {
        normal: {
          color: '#49a2fe',
        }
      },
    }
  ]
})
const option3 = ref({
  tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999',
        },
      },
    },
  grid: {
      left: '1%',
      right: '4%',
      bottom: '0%',
      top:'7%',
      containLabel: true,
    },
  xAxis: {
    type: 'value',
    data: ['2021-1', '2021-4', '2022-1', '2022-4', '2022-8', '2023-1'],
    axisLabel:{
      color:'#787878'
    },
    splitLine:{
      lineStyle: {
        color: '#E0E6F1'  
      }
    }
  },
  yAxis: {
    type: 'category',
    axisLabel:{
      color:'#787878'
    }
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'bar',
      name:'近视人数',
      barWidth: 18,
      itemStyle: {
        normal: {
          color: '#49a2fe',
        }
      },
    }
  ]
})
const option4 = ref({
  // tooltip: {
  //   trigger: "axis",
  // },
  grid: {
    top: "2%",
    bottom: "2%",
    containLabel: true,
  },
  xAxis: {
    data: ["男生", "女生"],
    axisTick: {
      show: false,
    },
    axisLine: {
      show: false,
    },
    axisLabel: {
      show: false,
    },
  },
  yAxis: {
    max: 100,
    splitLine: {
      show: false,
    },
    axisTick: {
      // 刻度线
      show: false,
    },
    axisLine: {
      // 轴线
      show: false,
    },
    axisLabel: {
      // 轴坐标文字
      show: false,
    },
  },
  series: [
    {
      name: "比例",
      type: "pictorialBar",
      symbolClip: true,
      symbolBoundingData: 100,
      label: '',
      data: [
        {
          value: 42,
          symbol: 'path://M18.2629891,11.7131596 L6.8091608,11.7131596 C1.6685112,11.7131596 0,13.032145 0,18.6237673 L0,34.9928467 C0,38.1719847 4.28388932,38.1719847 4.28388932,34.9928467 L4.65591984,20.0216948 L5.74941883,20.0216948 L5.74941883,61.000787 C5.74941883,65.2508314 11.5891201,65.1268798 11.5891201,61.000787 L11.9611506,37.2137775 L13.1110872,37.2137775 L13.4831177,61.000787 C13.4831177,65.1268798 19.3114787,65.2508314 19.3114787,61.000787 L19.3114787,20.0216948 L20.4162301,20.0216948 L20.7882606,34.9928467 C20.7882606,38.1719847 25.0721499,38.1719847 25.0721499,34.9928467 L25.0721499,18.6237673 C25.0721499,13.032145 23.4038145,11.7131596 18.2629891,11.7131596 M12.5361629,1.11022302e-13 C15.4784742,1.11022302e-13 17.8684539,2.38997966 17.8684539,5.33237894 C17.8684539,8.27469031 15.4784742,10.66467 12.5361629,10.66467 C9.59376358,10.66467 7.20378392,8.27469031 7.20378392,5.33237894 C7.20378392,2.38997966 9.59376358,1.11022302e-13 12.5361629,1.11022302e-13',
          itemStyle: {
            normal: {
              color: "rgba(64,158,255)", //单独控制颜色
            },
          },
        },
        {
          value: 58,
          symbol: 'path://M28.9624207,31.5315864 L24.4142575,16.4793596 C23.5227152,13.8063773 20.8817445,11.7111088 17.0107398,11.7111088 L12.112691,11.7111088 C8.24168636,11.7111088 5.60080331,13.8064652 4.70917331,16.4793596 L0.149791395,31.5315864 C-0.786976655,34.7595013 2.9373074,35.9147532 3.9192135,32.890727 L8.72689855,19.1296485 L9.2799493,19.1296485 C9.2799493,19.1296485 2.95992025,43.7750224 2.70031069,44.6924335 C2.56498417,45.1567684 2.74553639,45.4852068 3.24205501,45.4852068 L8.704461,45.4852068 L8.704461,61.6700801 C8.704461,64.9659872 13.625035,64.9659872 13.625035,61.6700801 L13.625035,45.360657 L15.5097899,45.360657 L15.4984835,61.6700801 C15.4984835,64.9659872 20.4191451,64.9659872 20.4191451,61.6700801 L20.4191451,45.4852068 L25.8814635,45.4852068 C26.3667633,45.4852068 26.5586219,45.1567684 26.4345142,44.6924335 C26.1636859,43.7750224 19.8436568,19.1296485 19.8436568,19.1296485 L20.3966199,19.1296485 L25.2043926,32.890727 C26.1862111,35.9147532 29.9105828,34.7595013 28.9625083,31.5315864 L28.9624207,31.5315864 Z M14.5617154,0 C17.4960397,0 19.8773132,2.3898427 19.8773132,5.33453001 C19.8773132,8.27930527 17.4960397,10.66906 14.5617154,10.66906 C11.6274788,10.66906 9.24611767,8.27930527 9.24611767,5.33453001 C9.24611767,2.3898427 11.6274788,0 14.5617154,0 L14.5617154,0 Z',
          itemStyle: {
            normal: {
              color: "rgba(255,153,0)", //单独控制颜色
            },
          },
        },
      ],
      // z: 10,
    },
    {
      name: "",
      type: "pictorialBar",
      symbolClip: true,
      symbolBoundingData: 100,
      label: '',
      data: [],
      z: 10,
    },
    {
      // 设置背景底色，不同的情况用这个
      name: "人数",
      type: "pictorialBar", //异型柱状图 图片、SVG PathData
      symbolBoundingData: 100,
      animationDuration: 0,
      itemStyle: {
        normal: {
          color: "#ccc", //设置全部颜色，统一设置
        },
      },
      z: 10,
      data: [
        {
          itemStyle: {
            normal: {
              color: "rgba(64,158,255,0.40)", //单独控制颜色
            },
          },
          value: 100,
          symbol: 'path://M18.2629891,11.7131596 L6.8091608,11.7131596 C1.6685112,11.7131596 0,13.032145 0,18.6237673 L0,34.9928467 C0,38.1719847 4.28388932,38.1719847 4.28388932,34.9928467 L4.65591984,20.0216948 L5.74941883,20.0216948 L5.74941883,61.000787 C5.74941883,65.2508314 11.5891201,65.1268798 11.5891201,61.000787 L11.9611506,37.2137775 L13.1110872,37.2137775 L13.4831177,61.000787 C13.4831177,65.1268798 19.3114787,65.2508314 19.3114787,61.000787 L19.3114787,20.0216948 L20.4162301,20.0216948 L20.7882606,34.9928467 C20.7882606,38.1719847 25.0721499,38.1719847 25.0721499,34.9928467 L25.0721499,18.6237673 C25.0721499,13.032145 23.4038145,11.7131596 18.2629891,11.7131596 M12.5361629,1.11022302e-13 C15.4784742,1.11022302e-13 17.8684539,2.38997966 17.8684539,5.33237894 C17.8684539,8.27469031 15.4784742,10.66467 12.5361629,10.66467 C9.59376358,10.66467 7.20378392,8.27469031 7.20378392,5.33237894 C7.20378392,2.38997966 9.59376358,1.11022302e-13 12.5361629,1.11022302e-13',
        },
        {
          itemStyle: {
            normal: {
              color: "rgba(255,153,0,0.40)", //单独控制颜色
            },
          },
          value: 100,
          symbol: 'path://M28.9624207,31.5315864 L24.4142575,16.4793596 C23.5227152,13.8063773 20.8817445,11.7111088 17.0107398,11.7111088 L12.112691,11.7111088 C8.24168636,11.7111088 5.60080331,13.8064652 4.70917331,16.4793596 L0.149791395,31.5315864 C-0.786976655,34.7595013 2.9373074,35.9147532 3.9192135,32.890727 L8.72689855,19.1296485 L9.2799493,19.1296485 C9.2799493,19.1296485 2.95992025,43.7750224 2.70031069,44.6924335 C2.56498417,45.1567684 2.74553639,45.4852068 3.24205501,45.4852068 L8.704461,45.4852068 L8.704461,61.6700801 C8.704461,64.9659872 13.625035,64.9659872 13.625035,61.6700801 L13.625035,45.360657 L15.5097899,45.360657 L15.4984835,61.6700801 C15.4984835,64.9659872 20.4191451,64.9659872 20.4191451,61.6700801 L20.4191451,45.4852068 L25.8814635,45.4852068 C26.3667633,45.4852068 26.5586219,45.1567684 26.4345142,44.6924335 C26.1636859,43.7750224 19.8436568,19.1296485 19.8436568,19.1296485 L20.3966199,19.1296485 L25.2043926,32.890727 C26.1862111,35.9147532 29.9105828,34.7595013 28.9625083,31.5315864 L28.9624207,31.5315864 Z M14.5617154,0 C17.4960397,0 19.8773132,2.3898427 19.8773132,5.33453001 C19.8773132,8.27930527 17.4960397,10.66906 14.5617154,10.66906 C11.6274788,10.66906 9.24611767,8.27930527 9.24611767,5.33453001 C9.24611767,2.3898427 11.6274788,0 14.5617154,0 L14.5617154,0 Z',
        },
      ],
    },
  ],
})
const option5 = ref({
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    right: 'right',
    icon: 'circle',
    itemWidth: 10,
    itemHeight: 10,
    itemGap: 10,
    textStyle:{
      color:'#787878'
    },
    data: [
      '小学一年级',
      '小学二年级',
      '小学三年级',
      '小学四年级',
      '小学五年级',
      '小学六年级',
      '初中一年级',
      '初中二年级',
      '初中三年级',
      '初中四年级',
      '高中一年级',
      '高中二年级',
      '高中三年级'
    ]
  },
  color:['#6395fa','#63daab','#8babd8','#f7c122','#7666fa','#75cbed','rgb(155,107,188)','rgb(255,157,79)','rgb(42,154,153)','rgb(255,158,198)','#6395fa','#63daab','#8babd8'],
  series: [
    {
      name: '',
      type: 'pie',
      radius: '95%',
      center: ['34%', '50%'],
      avoidLabelOverlap: true,
      data: [
        { value: 1048, name: '小学一年级' },
        { value: 735, name: '小学二年级' },
        { value: 580, name: '小学三年级' },
        { value: 484, name: '小学四年级' },
        { value: 300, name: '小学五年级' },
        { value: 300, name: '小学六年级' },
        { value: 300, name: '初中一年级' },
        { value: 300, name: '初中二年级' },
        { value: 300, name: '初中三年级' },
        { value: 300, name: '初中四年级' },
        { value: 300, name: '高中一年级' },
        { value: 300, name: '高中二年级' },
        { value: 300, name: '高中三年级' }
      ],
      label: {
			  normal: {
				show: true,
        color:'#000000',
				formatter: '{c}', // 格式化数值百分比输出
			},
		},
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
          borderColor:'#000',
          borderWidth:0.5
        }
      }
    }
  ]
})
const tableData:any = ref([{name:'某某某某某某某某学校',checknum:'10000',num:'2871'},{name:'某某某某某某某某学校',checknum:'10000',num:'2872'},{name:'某某某某某某某某学校',checknum:'10000',num:'2873'},{name:'某某某某某某某某学校',checknum:'10000',num:'2874'},{name:'某某某某某某某某学校',checknum:'10000',num:'2875'},{name:'某某某某某某某某学校',checknum:'10000',num:'2876'},{name:'某某某某某某某某学校',checknum:'10000',num:'2877'}])
const dialogVisible = ref(false)
const planData:any = ref([{planid:'1',plan_name:'某某某某某某计划名称',plan_year:'2033-1',plan_start_date:'2023-04-06',org_name:'11'},{panid:'2',plan_name:'某某某某某某计划名称',plan_year:'2033-1',plan_start_date:'2023-04-06',org_name:'11'}])
const planyear = ref('')
const planname = ref('')
const planyearoptions = ref([{value:'2023-1'}])
const currentplanid = ref('1')
let timer:any = ref(null)
let myTable:any = ref(null)
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')
  }
})
const clearScroll = () => {
	clearInterval(timer.value)
	timer.value = null
}
const createScroll = () => {
	clearScroll()
	// 拿到 table
	const table = myTable.value.layout.table.refs
	// 拿到可以滚动的元素
	const tableWrapper = table.bodyWrapper.firstElementChild.firstElementChild

	timer.value = setInterval(() => {
		tableWrapper.scrollTop += 1
		// 判断是否滚动到底部，如果到底部了置为0（可视高度+距离顶部=整个高度）
		if (tableWrapper.clientHeight + tableWrapper.scrollTop == tableWrapper.scrollHeight) {
			tableWrapper.scrollTop = 0
		}
	}, 100)
}
onMounted(() => {
  // echartsinit()
  // createScroll()
  // console.log(useDark().value,99)
})
onUnmounted(() => {
// 	clearScroll()
//   if (myChart1.value) {  
//     myChart1.value.dispose()
//   }
//   if (myChart2.value) {  
//     myChart2.value.dispose()
//   }
//   if (myChart3.value) {  
//     myChart3.value.dispose()
//   }
//   if (myChart4.value) {  
//     myChart4.value.dispose()
//   }
//   if (myChart5.value) {  
//     myChart5.value.dispose()
//   }
// })
// let myChart1:any = ref()
// let myChart2:any = ref()
// let myChart3:any = ref()
// let myChart4:any = ref()
// let myChart5:any = ref()
// const labelSetting:any = ref(
//   {normal: {
//     show: true,
//     position: "bottom",
//     offset: [0, 10],
//     formatter: function (param:any) {
//       return param.value + "%";
//     },
//     textStyle: {
//       fontSize: 18,
//       fontFamily: "Arial",
//        color: "#ffffff",
//       },
//   }
})
  //初始化echarts
function echartsinit(){
  // if (isDark === '1') {
  //   facechange('1')
  // }else{
  //   facechange('2')
  // }
  // const chartEle: HTMLElement = document.getElementById('echarts1') as HTMLElement;
  // myChart1.value = markRaw(echarts.init(chartEle));
  // const chartEle2: HTMLElement = document.getElementById('echarts2') as HTMLElement;
  // myChart2.value = markRaw(echarts.init(chartEle2));
  // const chartEle3: HTMLElement = document.getElementById('echarts3') as HTMLElement;
  // myChart3.value = markRaw(echarts.init(chartEle3));
  // const chartEle4: HTMLElement = document.getElementById('echarts4') as HTMLElement;
  // myChart4.value = markRaw(echarts.init(chartEle4));
  // const chartEle5: HTMLElement = document.getElementById('echarts5') as HTMLElement;
  // myChart5.value = markRaw(echarts.init(chartEle5));
  // myChart1.value.setOption(option.value);
  // myChart2.value.setOption(option2.value);
  // myChart3.value.setOption(option3.value);
  // option4.value.series[0].label = labelSetting.value
  // option4.value.series[1].label = labelSetting.value
  // myChart4.value.setOption(option4.value);
  // myChart5.value.setOption(option5.value);

  // window.onresize = function () {
  //   myChart1.value.resize()
  //   myChart2.value.resize()
  //   myChart3.value.resize()
  //   myChart4.value.resize()
  //   myChart5.value.resize()
  // }
}
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'

    option2.value.xAxis.axisLabel.color = '#ffffff'
    option2.value.yAxis.axisLabel.color = '#ffffff'
    option2.value.yAxis.splitLine.lineStyle.color = '#4c4d4f'

    option3.value.xAxis.axisLabel.color = '#ffffff'
    option3.value.yAxis.axisLabel.color = '#ffffff'
    option3.value.xAxis.splitLine.lineStyle.color = '#4c4d4f' 

    option5.value.legend.textStyle.color = '#ffffff'
    option5.value.series[0].label.normal.color = '#ffffff'
  } else {
    option.value.xAxis.axisLabel.color = '#787878'
    option.value.yAxis.axisLabel.color = '#787878'
    option.value.yAxis.splitLine.lineStyle.color = '#E0E6F1'

    option2.value.xAxis.axisLabel.color = '#787878'
    option2.value.yAxis.axisLabel.color = '#787878'
    option2.value.yAxis.splitLine.lineStyle.color = '#E0E6F1'

    option3.value.xAxis.axisLabel.color = '#787878'
    option3.value.yAxis.axisLabel.color = '#787878'
    option3.value.xAxis.splitLine.lineStyle.color = '#E0E6F1'

    option5.value.legend.textStyle.color = '#000000'
    option5.value.series[0].label.normal.color = '#000000'
  }
  // if (myChart1.value) {  
  //   myChart1.value.clear()
  //   myChart1.value.setOption(option.value);
  //   myChart1.value.resize()
  // }
  // if (myChart2.value) {  
  //   myChart2.value.clear()
  //   myChart2.value.setOption(option2.value);
  //   myChart2.value.resize()
  // }
  // if (myChart3.value) {  
  //   myChart3.value.clear()
  //   myChart3.value.setOption(option3.value);
  //   myChart3.value.resize()
  // }
  // if (myChart5.value) {  
  //   myChart5.value.clear()
  //   myChart5.value.setOption(option5.value);
  //   myChart5.value.resize()
  // }
}
//刷新
function refreshdata(type:any){
  // if(type === '1'){
  //   myChart1.value.clear()
  //   myChart1.value.setOption(option.value);
  //   myChart1.value.resize()
  // } else if(type === '2'){
  //   myChart2.value.clear()
  //   myChart2.value.setOption(option2.value);
  //   myChart2.value.resize()
  // } else if(type === '3'){
  //   myChart3.value.clear()
  //   myChart3.value.setOption(option3.value);
  //   myChart3.value.resize()
  // } else if(type === '4'){
  //   // 表格数据
  //   tableData.value = []
  // }else if(type === '5'){
  //   myChart4.value.clear()
  //   myChart4.value.setOption(option4.value);
  //   myChart4.value.resize()
  // }else{
  //   myChart5.value.clear()
  //   myChart5.value.setOption(option5.value);
  //   myChart5.value.resize()
  // }
  
}
function handleClose(){
  dialogVisible.value = false
}
//选择普检按计划
function chooseplan(){
  for(let i = 0;i<planData.value.length;i++) {
    planData.value[i].checked = false
    if (planData.value[i].planid === currentplanid.value) {
      planData.value[i].checked = true
      currentplanid.value = '1'
    }
 }
  dialogVisible.value = true
}
//搜索
function searchinfo(){

}
//勾选普检按计划
function checkchange(index:any,e:any){
  if(e === false){
    planData.value[index].checked = true
  }else{
    for(let i = 0;i<planData.value.length;i++) {
    planData.value[i].checked = false
   }
   planData.value[index].checked = true
   currentplanid.value = planData.value[index].planid
  }
}
//确定普检按计划
function plansubmit(){
  dialogVisible.value = false
}
// 鼠标移入
function tablemouseenter(){
  clearScroll()
}
// 鼠标移出
function tableMouseLeave(){
  createScroll()
}

</script>
<template>
  <div class="dashboard-container" 
  style="display: flex;align-items: center;justify-content: center;flex-wrap: wrap;align-content:center;">
   <!-- <div class="dashboard-container-title">
    <div>北京市最新筛查数据统计</div>
   </div>
   <div class="dashboard-container-top">
    <div class="top-box">
      <div>
        <div class="top-box-title">参检学校数量</div>
        <div class="top-box-num">34</div>
      </div>
      <div class="top-box-right">
        <img src="@/assets/dashboard/top1.png" alt="">
      </div>
    </div>
    <div class="top-box">
      <div>
        <div class="top-box-title">参检学生数量</div>
        <div class="top-box-num">2354</div>
      </div>
      <div class="top-box-right" style="background-color: #A99EF3;">
        <img src="@/assets/dashboard/top2.png" style="top:14px;" alt="">
      </div>
    </div>
    <div class="top-box">
      <div>
        <div class="top-box-title">检查人数</div>
        <div class="top-box-num">20000</div>
      </div>
      <div class="top-box-right" style="background-color: #409EFF;">
        <img src="@/assets/dashboard/top3.png" style="top:14px;left: 14px;" alt="">
      </div>
    </div>
    <div class="top-box">
      <div>
        <div class="top-box-title">近视人数</div>
        <div class="top-box-num">12586</div>
      </div>
      <div class="top-box-right" style="background-color: #CC99FF;">
        <img src="@/assets/dashboard/top4.png" style="top:14px;left: 10px;" alt="">
      </div>
    </div>
    <div class="top-box">
      <div>
        <div class="top-box-title">视力异常人数</div>
        <div class="top-box-num">20000</div>
      </div>
      <div class="top-box-right" style="background-color: #F46868;">
        <img src="@/assets/dashboard/top5.png" style="top:15px;left: 11px;" alt="">
      </div>
    </div>
    <div class="top-box">
      <div>
        <div class="top-box-title">远视储备不足人数</div>
        <div class="top-box-num">12586</div>
      </div>
      <div class="top-box-right" style="background-color: #51CE8C;">
        <img src="@/assets/dashboard/top6.png" style="top:16px;left: 11px;" alt="">
      </div>
    </div>
   </div>
   <div class="dashboard-container-bottom">
      <div class="container-bottom-top">
        <div class="bottom-top-box">
          <div class="box-content-title">
            <div class="flex items-center">
              <div class="titleicon"></div>
              <div class="titletext">近三年近视变化请何况</div>
            </div>
            <div>
              <el-button :icon="Refresh" style="height: 25px;width:60px;border-radius:2px;" @click="refreshdata('1')">刷新</el-button>
            </div>
          </div>
          <div class="box-content-charts">
            <div id="echarts1" style="width: 100%; height:100%;"></div>
          </div>
        </div>
        <div class="bottom-top-box">
          <div class="box-content-title">
            <div class="flex items-center">
              <div class="titleicon"></div>
              <div class="titletext">近三年近视发展趋势</div>
            </div>
            <div>
              <el-button :icon="Refresh" style="height: 25px;width:60px;border-radius:2px;" @click="refreshdata('2')">刷新</el-button>
            </div>
          </div>
          <div class="box-content-charts">
            <div id="echarts2" style="width: 100%; height:100%;"></div>
          </div>
        </div>
        <div class="bottom-top-box">
          <div class="box-content-title">
            <div class="flex items-center">
              <div class="titleicon"></div>
              <div class="titletext">各地区近视人数统计</div>
            </div>
            <div>
              <el-button :icon="Refresh" style="height: 25px;width:60px;border-radius:2px;" @click="refreshdata('3')">刷新</el-button>
            </div>
          </div>
          <div class="box-content-charts">
            <div id="echarts3" style="width: 100%; height:100%;"></div>
          </div>
        </div>
      </div>
      <div class="container-bottom-top">
        <div class="bottom-top-box">
          <div class="box-content-title">
            <div class="flex items-center">
              <div class="titleicon"></div>
              <div class="titletext">各学校近视人数统计</div>
            </div>
            <div>
              <el-button :icon="Refresh" style="height: 25px;width:60px;border-radius:2px;" @click="refreshdata('4')">刷新</el-button>
            </div>
          </div>
          <div class="box-content-charts">
            <el-table ref="myTable" :data="tableData" stripe style="height: calc(100% - 10px);" @mouseenter="tablemouseenter" @mouseleave="tableMouseLeave">
              <el-table-column prop="name" label="学校名称" align="center" min-width="100" />
              <el-table-column prop="checknum" label="检查人数" align="center">
                <template #default="scope">
                <div v-if="scope.row.checknum !== '' &&scope.row.checknum !== undefined">
                  {{scope.row.checknum}}人
                </div>
                <div v-else></div>
              </template>
            </el-table-column>
              <el-table-column prop="num" label="近视人数" align="center">
                <template #default="scope">
                <div v-if="scope.row.num !== '' &&scope.row.num !== undefined">
                  {{scope.row.num}}人
                </div>
                <div v-else></div>
              </template>
            </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="bottom-top-box">
          <div class="box-content-title">
            <div class="flex items-center">
              <div class="titleicon"></div>
              <div class="titletext">男女近视对比</div>
            </div>
            <div>
              <el-button :icon="Refresh" style="height: 25px;width:60px;border-radius:2px;" @click="refreshdata('5')">刷新</el-button>
            </div>
          </div>
          <div class="box-content-charts flex justify-between items-center" style="padding:10px 40px">
            <div>
              <div class="tschartstext">男生</div>
              <div class="boytext">42%</div>
            </div>
            <div id="echarts4" style="width: 60%; height:100%;"></div>
            <div style="font-weight: 400;color: #787878;font-size: 16px;">
              <div class="tschartstext">女生</div>
              <div class="girltext">58%</div>
            </div>
          </div>
        </div>
        <div class="bottom-top-box">
          <div class="box-content-title">
            <div class="flex items-center">
              <div class="titleicon"></div>
              <div class="titletext">各年级近视人数分布</div>
            </div>
            <div>
              <el-button :icon="Refresh" style="height: 25px;width:60px;border-radius:2px;" @click="refreshdata('6')">刷新</el-button>
            </div>
          </div>
          <div class="box-content-charts">
            <div id="echarts5" style="width: 100%; height:100%;"></div>
          </div>
        </div>
      </div>
   </div> -->
   <div>
    <img src="@/assets/images/home.png" alt="">
   </div>
   <div style="width: 100%;    text-align: center;
    font-size: 50px;
    padding-top: 40px;
    color: #303030;">欢迎使用{{ title }}</div>
 </div>
  <el-dialog v-model="dialogVisible" :close-on-click-modal="false" title="选择普查计划" :before-close="handleClose" width="35%" draggable append-to-body>
    <div class="flex mb-[20px]">
      <el-input v-model="planname" placeholder="请输入活动名称" style="width:240px" clearable />
      <el-select v-model="planyear" class="ml-4" placeholder="请选择活动类型" style="width: 240px">
        <el-option v-for="item in planyearoptions" :key="item.value" :label="item.value" :value="item.value"/>
      </el-select>
      <el-button type="primary" class="ml-[10px]" @click="searchinfo">搜索</el-button>
    </div>
    <el-table :data="planData" border style="width: 100%; height:400px" :header-cell-style="{background:'rgb(250 250 250)',height:'50px'}">
      <el-table-column prop="plan_name" label="计划名称" align="center" min-width="100">
        <template #default="scope">
          <div v-if="scope.row.plan_name !== '' &&scope.row.plan_name !== undefined">
            <el-checkbox v-model="scope.row.checked" :label="scope.row.plan_name" size="large" @change="checkchange(scope.$index,$event)"/>
          </div>
          <div v-else></div>
        </template>
        </el-table-column>
      <el-table-column prop="plan_year" label="年度" align="center"  />
      <el-table-column prop="plan_start_date" label="计划时间" align="center"  />
      <el-table-column prop="org_name" label="组织机构" align="center" />
    </el-table>
    <span class="dialog-footer flex justify-end mt-[20px]" >
      <el-button type="primary" @click="plansubmit">确定</el-button>
    </span>
  </el-dialog>
</template>

<style lang="scss" scoped>
.dashboard-container{
  height: calc(100vh - 130px);
  .dashboard-container-title{
    width: 100%;
    display: flex;
    font-weight: 700;
    font-style: normal;
    font-size: 20px;
    color: #1B1B1B;
    align-items: center;
    margin-bottom: 15px;
    img{
      width: 16px;
      height: 16px;
      margin-left:15px;
    }
  }
  .dashboard-container-top{
    height: 130px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    .top-box{
      width: 16%;
      height:130px;
      padding: 0 20px;
      background-color: rgba(255, 255, 255, 1);
      border: none;
      border-radius: 5px;
      box-shadow: 0px 0px 10px rgba(219, 225, 236, 1);
      display: flex;
      justify-content: space-between;
      align-items: center;
      .top-box-title{
        font-family: '微软雅黑';
        font-weight: 400;
        font-style: normal;
        font-size: 16px;
        color: #787878;
      }
      .top-box-num{
        font-family: '微软雅黑 Bold', '微软雅黑';
        font-weight: 700;
        font-style: normal;
        font-size: 28px;
        color: #363636;
        margin-top: 5px;
      }
      .top-box-right{
        width: 60px;
        height: 60px;
        background-color: #F7B900;
        border-radius: 60px;
        position: relative;
        img{
          position: absolute; 
          top: 9px;
          left: 12px;
        }
      }
    }
  }
  .dashboard-container-bottom{
    height: calc(100vh - 335px);
    width: 100%;
    margin-top: 15px;
    .container-bottom-top{
      height: 50%;
      width: 100%;
      display: flex;
      justify-content: space-between;
      margin-bottom: 15px;
      .bottom-top-box{
        width: 33%;
        height: 100%;
        // padding: 0 20px;
        background-color: rgba(255, 255, 255, 1);
        border: none;
        border-radius: 5px;
        margin-right: 15px;
        box-shadow: 0px 0px 10px rgba(219, 225, 236, 1);
      }
      .bottom-top-box:nth-child(3){
        margin-right: 0px;
      }
      .box-content-title{
        height: 50px;
        width: 100%;
        padding: 0px 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom:1px solid #F6F6F6;
        .titleicon{
          width: 6px;
          height: 14px;
          background-color: #409EFF;
          margin-right: 9px;
        }
        .titletext{
          font-weight: 700;
          font-style: normal;
          font-size: 14px;
          color: #000000;
        }
      }
    }
    .container-bottom-top:nth-child(2){
      margin-bottom: 0px;
    }
    .box-content-charts{
      padding: 10px 20px;
      width: 100%;
      height:calc(100% - 50px);
    }
  }
}
.tschartstext{
  font-weight: 400;
  color: #787878;
  font-size: 16px;
}
.boytext{
  color: #409EFF;
  font-size: 20px;
  font-weight: 700;
}
.girltext{
  color: #FF9900;
  font-size: 20px;
  font-weight: 700;
}
</style>
