<template>
  <div class="container-wrap">
    <el-card class="box-card">
      <el-form :inline="true" :model="formQuery" class="demo-form-inline" label-width="80px">
        <el-form-item label="选择年月">
          <el-date-picker v-model="formQuery.month" type="month" value-format="yyyy-mm" placeholder="选择年月">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="申请单位">
          <el-select v-model="formQuery.Applicant" clearable placeholder="请选择申请单位">
            <el-option v-for="item in optionsApplicant" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="二级单位">
          <el-select v-model="formQuery.secondaryUnit" clearable placeholder="请选择二级单位">
            <el-option v-for="item in secondaryUnitList" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="时间" class="flex-box">
          <el-date-picker class="date-picker" v-model="formQuery.starTime" type="daterange" range-separator="至"
            value-format="yyyy-MM-dd" start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-button icon="el-icon-refresh-right" size="small" @click="chongzhi">重置</el-button>
        <el-button type="primary" icon="el-icon-search" size="small" @click="handleSearch">查询</el-button>
        <el-button type="primary" icon="el-icon-upload2" size="small" @click="handleExport">导出</el-button>
      </el-form>
    </el-card>
    <div class="card-box">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-card >
            <div class="title-box">
              CPU机时使用量TOP10
            </div>
            <div class="ecaharts-info" ref="chart" >
              <chartTemp :option="cpuOption"></chartTemp>
            </div>
          </el-card>
        </el-col>
        <el-col :span="12"  >
          <el-card>
            <div class="title-box">
              DCU卡时使用量TOP10
            </div>
            <div class="ecaharts-info"  ref="chart1">
              <chartTemp :option="dcuOption"></chartTemp>
            </div>
          </el-card>
        </el-col>
      </el-row>

    </div>
      <!-- 存储使用量TOP10 -->
    <div class="card-box">
      <el-row>
        <el-col :span="24">
          <el-card  >
            <div class="title-box">
              存储使用量TOP10
            </div>
            <div class="ecaharts-info" ref="chart2">
               <chartTemp  :option="storageOption"></chartTemp>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div class="card-box">
      <el-row :gutter="20">
        <el-col :span="12" >
          <el-card >
            <div class="title-box">
              郑州大学·CPU机时使用量TOP10
            </div>
            <div class="ecaharts-info" ref="chart3">
                <chartTemp  :option="zhengZhouCpuOption"></chartTemp>
            </div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card >
            <div class="title-box">
              郑州大学·DCU卡时使用量TOP10
            </div>
            <div class="ecaharts-info" ref="chart4">
               <chartTemp   :option="zhengZhouDcuOption"></chartTemp>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div class="card-box">
      <el-row>
        <el-col :span="24">
          <el-card  >
            <div class="title-box flex-info">
              <div>存储统计分析</div>
              <!-- <div> <el-button type="primary">导出</el-button></div> -->
            </div>
            <div class="ecaharts-info" ref="chart5">
               <chartTemp :option="storageStatisticsOption"></chartTemp>
            </div>
          </el-card>

        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import * as XLSX from "xlsx"; 
import html2canvas from "html2canvas";
  import chartTemp from '@/components/chartTemp'
  export default {
    components: {
      chartTemp
    },
    data() {
      return {
        formQuery: {},
        optionsApplicant: [{
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }],
        secondaryUnitList: [{
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }],
        cpuOption: {},
        cupXData: ['单位名称', '单位名称', '单位名称', '单位名称', '单位名称'],
        cupData: [24, 30, 45, 50, 80],
        dcuOption:{},
        dcuXData: ['单位名称', '单位名称', '单位名称', '单位名称', '单位名称'],
        dcuData: [49, 50, 65, 70, 100],
        storageOption:{},//存储使用量
        storageUsageXdata:['单位名称', '单位名称', '单位名称', '单位名称', '单位名称'],
        storageUsageData:[20, 35, 45, 50, 55],
        zhengZhouCpuOption:{},// 郑州大学·CPU机时使用量TOP10
        zhengZhouCpuXdata:['单位名称', '单位名称', '单位名称', '单位名称', '单位名称'],
        zhengZhouCpuData:[30,40,45,55,60],
        zhengZhouDcuOption:{},// 郑州大学·DCU卡时使用量TOP10
        zhengZhouDcuXdata:['单位名称', '单位名称', '单位名称', '单位名称', '单位名称'],
        zhengZhouDcuData:[30,46,57,60,70],
        storageStatisticsOption:{},//存储统计分析
         storageXData:['南区存储1','南区存储2','南区存储3','南区存储4','南区存储5'],
         usedData:[34,50,60,70,90],
         availableData:[23,45,49,56,75]
      }
    },
    mounted() {
      this.init()
    },
    methods: {
      init() {
        this.getCpuOption()
        this.getDcuOption()
        this.getStorageOption()
        this.zhengZhouCpuOptionData()
        this.zhengZhouDcuOptionData()
        this.storageStatisticsOptionData()
      },
      // CPU机时使用量TOP10
      getCpuOption() {
        this.cpuOption = {
          tooltip: {
                      trigger: 'axis',
                  },
          xAxis: {
            type: 'category',
            axisTick: {
              show: false, //是否现实x轴刻度线
            },
            axisLine: {
              show: false, //是否现实x轴刻度线
            },
            data: this.cupXData
          },
          yAxis: {
            type: 'value',
            name: '机时', //单位
            nameLocation: 'end', // (单位个也就是在在Y轴的最顶部)
              //单位的样式设置
              nameTextStyle: {
                  color: "#333333", //颜色
                  padding: [15, 20, 15, 0], //间距分别是 上 右 下 左
                  fontSize: 14
              },
            axisTick: {
              show: false, //是否现实x轴刻度线
            },
            axisLine: {
              show: false, //是否现实x轴刻度线
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#333',
                fontSize: 14
              }
            },
          },
          series: [{
            data: this.cupData,
            type: 'bar',
            barWidth:20, //柱图宽度
            itemStyle: {
              normal: {
                //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
                barBorderRadius: [5, 5, 0, 0],
                color: '#216FE9', // 设置柱形颜色为蓝色
              },
            }
          }]
        }
      },
      //DCU卡时使用量TOP10
      getDcuOption(){
        this.dcuOption = {
          tooltip: {
                      trigger: 'axis',
                  },
          xAxis: {
            type: 'category',
            axisTick: {
              show: false, //是否现实x轴刻度线
            },
            axisLine: {
              show: false, //是否现实x轴刻度线
            },
            data: this.dcuXData
          },
          yAxis: {
            type: 'value',
            name: '机时', //单位
            nameLocation: 'end', // (单位个也就是在在Y轴的最顶部)
              //单位的样式设置
              nameTextStyle: {
                  color: "#333333", //颜色
                  padding: [15, 20, 15, 0], //间距分别是 上 右 下 左
                  fontSize: 14
              },
            axisTick: {
              show: false, //是否现实x轴刻度线
            },
            axisLine: {
              show: false, //是否现实x轴刻度线
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#333',
                fontSize: 14
              }
            },

          },
          series: [{
            data: this.dcuData,
            type: 'bar',
            barWidth: 20, //柱图宽度
            itemStyle: {

              normal: {
                //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
                barBorderRadius: [5, 5, 0, 0],
                color: '#9570E5', // 设置柱形颜色为蓝色
              },
            }
          }]
        }
      },
    // 存储使用量TOP10
    getStorageOption(){
      this.storageOption = {
        tooltip: {
                    trigger: 'axis',
                },
        xAxis: {
          type: 'category',
          axisTick: {
            show: false, //是否现实x轴刻度线
          },
          axisLine: {
            show: false, //是否现实x轴刻度线
          },
          data: this.storageUsageXdata
        },
        yAxis: {
          type: 'value',
          name: '机时', //单位
          nameLocation: 'end', // (单位个也就是在在Y轴的最顶部)
            //单位的样式设置
            nameTextStyle: {
                color: "#333333", //颜色
                padding: [15, 20, 15, 0], //间距分别是 上 右 下 左
                fontSize: 14
            },
          axisTick: {
            show: false, //是否现实x轴刻度线
          },
          axisLine: {
            show: false, //是否现实x轴刻度线
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#333',
              fontSize: 14
            }
          },

        },
        series: [{
          data: this.storageUsageData,
          type: 'bar',
          barWidth: 20, //柱图宽度
          itemStyle: {

            normal: {
              //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
              barBorderRadius: [5, 5, 0, 0],
              color: '#216FE9', // 设置柱形颜色为蓝色
            },
          }
        }]
      }
    },
    // 郑州大学·CPU机时使用量TOP10
    zhengZhouCpuOptionData(){
      this.zhengZhouCpuOption={
        tooltip: {
                    trigger: 'axis',
                },
        xAxis: {
          type: 'category',
          axisTick: {
            show: false, //是否现实x轴刻度线
          },
          axisLine: {
            show: false, //是否现实x轴刻度线
          },
          data: this.zhengZhouCpuXdata
        },
        yAxis: {
          type: 'value',
          name: '机时', //单位
          nameLocation: 'end', // (单位个也就是在在Y轴的最顶部)
            //单位的样式设置
            nameTextStyle: {
                color: "#333333", //颜色
                padding: [15, 20, 15, 0], //间距分别是 上 右 下 左
                fontSize: 14
            },
          axisTick: {
            show: false, //是否现实x轴刻度线
          },
          axisLine: {
            show: false, //是否现实x轴刻度线
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#333',
              fontSize: 14
            }
          },

        },
        series: [{
          data: this.zhengZhouCpuData,
          type: 'bar',
          barWidth: 20, //柱图宽度
          itemStyle: {

            normal: {
              //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
              barBorderRadius: [5, 5, 0, 0],
              color: '#FFA107', // 设置柱形颜色为蓝色
            },
          }
        }]
      }
    },
    // 郑州大学·DCU卡时使用量TOP10
    zhengZhouDcuOptionData(){
      this.zhengZhouDcuOption={
        tooltip: {
                    trigger: 'axis',
                },
        xAxis: {
          type: 'category',
          axisTick: {
            show: false, //是否现实x轴刻度线
          },
          axisLine: {
            show: false, //是否现实x轴刻度线
          },
          data: this.zhengZhouDcuXdata
        },
        yAxis: {
          type: 'value',
          name: '机时', //单位
          nameLocation: 'end', // (单位个也就是在在Y轴的最顶部)
            //单位的样式设置
            nameTextStyle: {
                color: "#333333", //颜色
                padding: [15, 20, 15, 0], //间距分别是 上 右 下 左
                fontSize: 14
            },
          axisTick: {
            show: false, //是否现实x轴刻度线
          },
          axisLine: {
            show: false, //是否现实x轴刻度线
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#333',
              fontSize: 14
            }
          },

        },
        series: [{
          data: this.zhengZhouDcuData,
          type: 'bar',
          barWidth: 20, //柱图宽度
          itemStyle: {

            normal: {
              //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
              barBorderRadius: [5, 5, 0, 0],
              color: '#00BD7D', // 设置柱形颜色为蓝色
            },
          }
        }]
      }
    },
    // 存储统计分析
    storageStatisticsOptionData(){
     this.storageStatisticsOption = {
        tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
        legend: {
           data:['已用','可用'],
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          axisTick: {
            show: false, //是否现实x轴刻度线
          },
          axisLine: {
            show: false, //是否现实x轴刻度线
          },
        },
        yAxis: {
          type: 'category',
          data:this.storageXData,
          axisTick: {
            show: false, //是否现实x轴刻度线
          },
          axisLine: {
            show: false, //是否现实x轴刻度线
          },
        },
        series: [
          {
            name: '已用',
            type: 'bar',
               barWidth: 15, //柱图宽度
            itemStyle: {
               color: '#216FE9', // 设置柱形颜色为蓝色
            },
             stack: '已用',
            data: this.usedData

          },
          {
            name: '可用',
            type: 'bar',
               barWidth: 15, //柱图宽度
            stack: '已用',
            itemStyle: {
               color: '#EBEBEB', // 设置柱形颜色为蓝色
            },
            data:this.availableData

          }
        ]
      };
    },

      // 查询
      handleSearch() {

      },
      //重置
      chongzhi() {

      },
      // 导出
      handleExport() { 
         const table = this.cpuOption.series[0].data; 
      // 定义表头
      const header = [this.cpuOption.xAxis.data];
      // 将表头和数据合并
      const dataWithHeader = [...header, table];
      // 将数据转换为工作表
      const worksheet = XLSX.utils.aoa_to_sheet(dataWithHeader); 


      const table1 = this.dcuOption.series[0].data; 
      // 定义表头
      const header1 = [this.dcuOption.xAxis.data];
      // 将表头和数据合并
      const dataWithHeader1 = [...header1, table1];
      // 将数据转换为工作表
      const worksheet1 = XLSX.utils.aoa_to_sheet(dataWithHeader1);


           const table2 = this.storageOption.series[0].data; 
      // 定义表头
      const header2 = [this.storageOption.xAxis.data];
      // 将表头和数据合并
      const dataWithHeader2 = [...header2, table2];
      // 将数据转换为工作表
      const worksheet2 = XLSX.utils.aoa_to_sheet(dataWithHeader2);


           const table3 = this.zhengZhouCpuOption.series[0].data; 
      // 定义表头
      const header3 = [this.zhengZhouCpuOption.xAxis.data];
      // 将表头和数据合并
      const dataWithHeader3 = [...header3, table3];
      // 将数据转换为工作表
      const worksheet3 = XLSX.utils.aoa_to_sheet(dataWithHeader3);


           const table4 = this.zhengZhouDcuOption.series[0].data; 
      // 定义表头
      const header4 = [this.zhengZhouDcuOption.xAxis.data];
      // 将表头和数据合并
      const dataWithHeader4 = [...header4, table4];
      // 将数据转换为工作表
      const worksheet4 = XLSX.utils.aoa_to_sheet(dataWithHeader4);


           const table5 = this.storageStatisticsOption.series[0].data; 
      // 定义表头
      const header5 = [this.storageStatisticsOption.yAxis.data];
      // 将表头和数据合并
      const dataWithHeader5 = [...header5, table5];
      // 将数据转换为工作表
      const worksheet5 = XLSX.utils.aoa_to_sheet(dataWithHeader5);



      // 创建工作簿并追加工作表
      const workbook = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(workbook, worksheet, "CPU机时使用量TOP10");
      XLSX.utils.book_append_sheet(workbook, worksheet1, "DCU卡时使用量TOP10");
      XLSX.utils.book_append_sheet(workbook, worksheet2, "存储使用量TOP10");
      XLSX.utils.book_append_sheet(workbook, worksheet3, "郑州大学·CPU机时使用量TOP10");
      XLSX.utils.book_append_sheet(workbook, worksheet4, "郑州大学·DCU卡时使用量TOP10");
      XLSX.utils.book_append_sheet(workbook, worksheet5, "存储统计分析");

      // 导出Excel文件
      XLSX.writeFile(workbook, "重点用户分析.xlsx");
         
        
         const element =[this.$refs.chart,this.$refs.chart1,this.$refs.chart2,this.$refs.chart3,this.$refs.chart4,this.$refs.chart5];
  
   
         try { 
        element.forEach(async item=>{
 const canvas = await html2canvas(item, {
          backgroundColor: "#ffffff", // 背景色
          scale: 2, // 提高分辨率
          useCORS: true, // 允许跨域图片
        });
          // 转换为图片并下载
        const link = document.createElement("a");
        link.download = ".png";
        link.href = canvas.toDataURL("image/png");
        link.click();
        }) 
      } catch (err) {
        console.error("导出失败:", err);
      }
      },
    }
  }
</script>
<style scoped>
  .container-wrap {
    padding: 20px;
  }

  .flex-box {
    display: flex;
  }

  .date-picker {
    width: 230px;
  }

  .card-box {
    padding-right: 0 !important;
    padding-left: 0 !important;
    margin-top: 20px;
  }

  .title-box {
    font-weight: 700;
    font-size: 18px;
  }

  .ecaharts-info {
    height: 300px;
  }
  .flex-info{
    display: flex;
    justify-content:space-between;
    align-items:center;
  }
</style>
