<template>
  <div class="main">
    <div class="searchModule">
      <el-form
        inline
        class="formStyle"
        label-position="right"
        label-width="70px"
      >
        <el-col :span="6">
          <el-form-item label="关键词">
            <el-input v-model="dateValue" placeholder="输入关键词" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="申请时间">
            <el-date-picker
              v-model="dateRange"
              type="daterange"
              range-separator="-"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              @change="dateRangeChange"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="单位名称">
            <el-cascader
              v-model="value"
              :options="companyNameList"
              :props="{ value: 'dictCode', label: 'dictLabel' }"
            />
          </el-form-item>
        </el-col>
      </el-form>
      <div class="search">
        <el-button icon="el-icon-refresh-right" size="small">重置</el-button>
        <el-button type="primary" icon="el-icon-search" size="small"
          >查询</el-button
        >
        
      </div>
    </div>
    <div class="filterList marginTop14">
      <div class="filterItem" v-for="(item, index) in filterList" :key="index">
        <div class="filterItem1">
          <div class="filterItem1L"><img :src="item.img" alt="" /></div>
          <div class="filterItem1R">
            <div>{{ item.num }}</div>
            <div>{{ item.title }}</div>
            <div>{{ item.total }}</div>
          </div>
        </div>
        <div class="filterItem2">
          <img src="../../assets/images/rightArrow.png" alt="" />
        </div>
      </div>
    </div>
    <div class="content1 marginTop14">
      <div class="content1L padding16">
        <div class="chart1Title">
          <div>开户数量统计分析</div>
          <el-button type="primary" icon="el-icon-upload2" @click="hanldeExport"
            >导出</el-button
          >
        </div>
        <div ref="chart1" class="chart1Style"></div>
      </div>
      <div class="content1R padding16">
        <div class="chart1Title">
          <div>开户单位统计分析</div>
          <div style="display: flex; align-items: end">
            <div class="filterTitle2Item">
              <div>软件显示数量</div>
              <div>
                <el-select v-model="value" placeholder="请选择申请类型">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </div>
            </div>
            <el-button
              type="primary"
              icon="el-icon-upload2"
              @click="hanldeExport1"
              >导出</el-button
            >
          </div>
        </div>
        <div ref="chart2" class="chart1Style"></div>
      </div>
    </div>
    <div class="content1 marginTop14">
      <div class="content2L padding16">
        <div class="title">用户单位类型统计分析</div>
        <div ref="chart3" class="chartPieStyle"></div>
      </div>
      <div class="content2R padding16">
        <div class="chart1Title">
          <div>用户标签统计分析</div>
          <el-button
            type="primary"
            icon="el-icon-upload2"
            @click="hanldeExport2"
            >导出</el-button
          >
        </div>
        <div ref="chart4" class="chart1Style"></div>
      </div>
    </div>
    <div class="content2 marginTop14 padding16">
      <div class="chart1Title">
        <div></div>
        <el-button type="primary" icon="el-icon-upload2" @click="hanldeExport3"
          >导出</el-button
        >
      </div>
      <div class="content2Content">
        <div ref="chart5" class="chart2Style"></div>
        <div ref="chart6" class="chart2Style"></div>
        <div ref="chart7" class="chart2Style"></div>
        <div ref="chart8" class="chart2Style"></div>
      </div>
    </div>
    <div class="content1 marginTop14">
      <div class="content2R padding16">
        <div class="title">科研成果统计分析</div>
        <div ref="chart9" class="chart1Style"></div>
      </div>
      <div class="content2L padding16">
        <div class="title">项目类别统计</div>
        <div ref="chart10" class="chartPieStyle"></div>
      </div>
    </div>
    <div class="content2 marginTop14 padding16">
      <div class="chart1Title">
        <div>CPU机时/GPU卡时/DCU卡时/作业提交</div>
        <el-button type="primary" icon="el-icon-upload2" @click="hanldeExport4"
          >导出</el-button
        >
      </div>
      <div class="content2Content">
        <div ref="chart11" class="chart2Style"></div>
        <div ref="chart12" class="chart2Style"></div>
        <div ref="chart13" class="chart2Style"></div>
        <div ref="chart14" class="chart2Style"></div>
      </div>
    </div>
    <div class="content2 marginTop14 padding16">
      <div class="chart1Title">
        <div>存储统计分析</div>
        <el-button type="primary" icon="el-icon-upload2" @click="hanldeExport5"
          >导出</el-button
        >
      </div>
      <div ref="chart15" class="chart1Style"></div>
    </div>
  </div>
</template>

<script>
import * as XLSX from "xlsx";

import html2canvas from "html2canvas";
import { listDataTree } from "@/api/system/dict/data";
export default {
  data() {
    return {
      dateRange: [],
      dateValue: "",
      value: "",
      companyNameList: [],
      option1: {},
      option2: {},
      option3: {},
      option4: {},
      option5: {},
      option6: {},
      option7: {},
      option8: {},
      option9: {},
      option10: {},
      option11: {},
      option12: {},
      option13: {},
      option14: {},
      option15: {},
      options: [],
      filterList: [
        {
          img: require("../../assets/images/chartUser1.png"),
          num: "1000",
          title: "新增合作单位",
          total: "累计单位20个",
        },
        {
          img: require("../../assets/images/chartUser2.png"),
          num: "28",
          title: "新增开户用户",
          total: "累计用户220人",
        },
        {
          img: require("../../assets/images/chartUser3.png"),
          num: "123",
          title: "新增开户单位数量",
          total: "累计单位20个",
        },
        {
          img: require("../../assets/images/chartUser4.png"),
          num: "24",
          title: "开户团队数量",
          total: "累计团队150个",
        },
        {
          img: require("../../assets/images/chartUser5.png"),
          num: "18",
          title: "活跃用户数",
          total: "",
        },
        {
          img: require("../../assets/images/chartUser6.png"),
          num: "37",
          title: "新增成果数量",
          total: "累计成果20个",
        },
      ],
      color: [
        "#5470c6",
        "#91cc75",
        "#fac858",
        "#ee6666",
        "#73c0de",
        "#3ba272",
        "#fc8452",
        "#9a60b4",
        "#ea7ccc",
      ],
    };
  },
  created() {
    listDataTree({ dictType: "cs_company_name" }).then((response) => {
      this.companyNameList = response.rows;
    });
  },
  mounted() {
    //柱状图
    this.myChart1 = this.$echarts.init(this.$refs.chart1);
    this.option1 = {
      xAxis: {
        data: [
          "11月10日",
          "11月13日",
          "11月14日",
          "11月16日",
          "11月23日",
          "11月26日",
          "11月27日",
          "11月日29日",
          "12月4日",
          "12月10日",
          "12月14日",
          "12月16日",
        ],
        axisTick: {
          alignWithLabel: true,
        },
      },
      color: [
        "#5470c6",
        "#91cc75",
        "#fac858",
        "#ee6666",
        "#73c0de",
        "#3ba272",
        "#fc8452",
        "#9a60b4",
        "#ea7ccc",
      ],
      yAxis: {
        splitLine: {
          lineStyle: {
            type: "dashed", //虚线
          },
          // show: true //隐藏
        },
      },
      series: [
        {
          data: [5, 20, 36, 10, 10, 20, 5, 20, 36, 10, 10, 20],
          type: "bar",
        },
      ],
    };
    this.myChart1.setOption(this.option1);
    //柱状图
    this.myChart2 = this.$echarts.init(this.$refs.chart2);
    this.option2 = {
      xAxis: {
        data: ["郑大", "轻工业学院", "河南工业大学", "万科", "万达"],
        axisTick: {
          alignWithLabel: true,
        },
      },
      color: [
        "#5470c6",
        "#91cc75",
        "#fac858",
        "#ee6666",
        "#73c0de",
        "#3ba272",
        "#fc8452",
        "#9a60b4",
        "#ea7ccc",
      ],
      yAxis: {
        splitLine: {
          lineStyle: {
            type: "dashed", //虚线
          },
          // show: true //隐藏
        },
      },
      series: [
        {
          data: [5, 20, 36, 10, 10, 20, 5, 20, 36, 10, 10, 20],
          type: "bar",
        },
      ],
    };
    this.myChart2.setOption(this.option2);

    //饼图
    this.myChart3 = this.$echarts.init(this.$refs.chart3);
    this.option3 = {
      color: this.color,
      tooltip: {
        trigger: "item",
      },
      legend: {
        orient: "vertical",
        right: "0",
        top: "center",
      },
      series: [
        {
          name: "资源使用申请比例",
          type: "pie",
          radius: "50%",
          data: [
            { value: 1048, name: "高校" },
            { value: 735, name: "科研院所" },
            { value: 580, name: "事业单位" },
            { value: 484, name: "企业" },
            { value: 300, name: "政府部门" },
          ],
          labelLine: {
            show: false,
          },
          label: {
            show: false,
          },
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
      ],
    };
    this.myChart3.setOption(this.option3);
    //条形图
    this.myChart4 = this.$echarts.init(this.$refs.chart4);
    this.option4 = {
      xAxis: {
        // data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子', '衬衫1', '羊毛衫1', '雪纺衫1', '裤子1', '高跟鞋1', '袜子1'],
        axisTick: {
          alignWithLabel: true,
        },
      },
      color: this.color,
      yAxis: {
        data: [
          "研究生",
          "教授",
          "互联网企业",
          "生产型企业",
          "讲师",
          "学生",
          "科研企业",
        ],
        inverse: true,
        splitLine: {
          lineStyle: {
            // type: 'dashed'//虚线
          },
          // show: true //隐藏
        },
      },
      legend: {
        show: false,
      },
      series: [
        {
          name: "2023",
          type: "bar",
          emphasis: {
            focus: "series",
          },
          itemStyle: {
            // barBorderRadius: [6, 6, 0, 0],
          },
          data: [5, 40, 36, 10, 10, 20, 5],
        },
      ],
    };
    this.myChart4.setOption(this.option4);
    //饼图
    this.myChart5 = this.$echarts.init(this.$refs.chart5);
    this.option5 = {
      title: {
        text: "活跃用户单位类型分析",
        left: "center",
        bottom: "10",
      },
      color: this.color,
      tooltip: {
        trigger: "item",
      },
      legend: {
        orient: "horizontal",
        // bottom: '0',
        itemWidth: 14,
      },
      series: [
        {
          name: "活跃用户单位",
          type: "pie",
          radius: "50%",
          data: [
            { value: 1048, name: "高校" },
            { value: 735, name: "科研院所" },
            { value: 580, name: "事业单位" },
            { value: 484, name: "企业" },
            { value: 300, name: "政府部门" },
            { value: 100, name: "其他" },
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
      ],
    };
    this.myChart5.setOption(this.option5);

    //饼图
    this.myChart6 = this.$echarts.init(this.$refs.chart6);
    this.option6 = {
      title: {
        text: "活跃用户统计分析",
        left: "center",
        bottom: "10",
      },
      color: this.color,
      tooltip: {
        trigger: "item",
      },
      legend: {
        orient: "horizontal",
        // bottom: '0',
        itemWidth: 14,
      },
      series: [
        {
          name: "活跃用户",
          type: "pie",
          radius: "50%",
          data: [
            { value: 1048, name: "周活用户" },
            { value: 735, name: "月活用户" },
            { value: 580, name: "季度活用户" },
            { value: 484, name: "年活用户" },
            { value: 300, name: "非活跃用户" },
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
      ],
    };
    this.myChart6.setOption(this.option6);

    //饼图
    this.myChart7 = this.$echarts.init(this.$refs.chart7);
    this.option7 = {
      title: {
        text: "重点用户统计分析",
        left: "center",
        bottom: "10",
      },
      color: this.color,
      tooltip: {
        trigger: "item",
      },
      legend: {
        orient: "horizontal",
        // bottom: '0',
        itemWidth: 14,
      },
      series: [
        {
          name: "重点用户",
          type: "pie",
          radius: "50%",
          data: [
            { value: 1048, name: "普通用户" },
            { value: 735, name: "重点用户" },
            { value: 580, name: "日活用户" },
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
      ],
    };
    this.myChart7.setOption(this.option7);

    //饼图
    this.myChart8 = this.$echarts.init(this.$refs.chart8);
    this.option8 = {
      title: {
        text: "用户状态统计分析",
        left: "center",
        bottom: "10",
      },
      color: this.color,
      tooltip: {
        trigger: "item",
      },
      legend: {
        orient: "horizontal",
        // bottom: '0',
        itemWidth: 14,
      },
      series: [
        {
          name: "用户状态",
          type: "pie",
          radius: "50%",
          data: [
            { value: 1048, name: "正常状态" },
            { value: 735, name: "冻结状态" },
            { value: 580, name: "禁用状态" },
            { value: 484, name: "其他" },
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
      ],
    };
    this.myChart8.setOption(this.option8);

    //柱状图
    this.myChart9 = this.$echarts.init(this.$refs.chart9);
    this.option9 = {
      xAxis: {
        data: [
          "论文",
          "专利",
          "奖励",
          "其他成果",
          "论文预约成果",
          "专利预约成果",
          "奖励预约成果",
          "其他预约成果",
        ],
        axisTick: {
          alignWithLabel: true,
        },
      },
      color: [
        "#5470c6",
        "#91cc75",
        "#fac858",
        "#ee6666",
        "#73c0de",
        "#3ba272",
        "#fc8452",
        "#9a60b4",
        "#ea7ccc",
      ],
      yAxis: {
        splitLine: {
          lineStyle: {
            type: "dashed", //虚线
          },
          // show: true //隐藏
        },
      },
      series: [
        {
          data: [5, 20, 36, 10, 10, 20, 5, 20, 10, 20],
          type: "bar",
        },
      ],
    };
    this.myChart9.setOption(this.option9);

    //饼图
    this.myChart10 = this.$echarts.init(this.$refs.chart10);
    this.option10 = {
      color: this.color,
      tooltip: {
        trigger: "item",
      },
      legend: {
        orient: "vertical",
        right: "0",
        top: "center",
      },
      series: [
        {
          name: "资源使用申请比例",
          type: "pie",
          radius: "50%",
          data: [
            { value: 1048, name: "高校" },
            { value: 735, name: "科研院所" },
            { value: 580, name: "事业单位" },
            { value: 484, name: "企业" },
            { value: 300, name: "政府部门" },
          ],
          labelLine: {
            show: false,
          },
          label: {
            show: false,
          },
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
      ],
    };
    this.myChart10.setOption(this.option10);

    //折线图
    this.myChart11 = this.$echarts.init(this.$refs.chart11);
    this.option11 = {
      title: {
        text: "CPU",
        left: "center",
        bottom: "5",
        textStyle: {
          fontSize: 14,
          fontWeight: "normal",
          height: 20,
          lineHeight: 20,
          color: "#595959",
        },
        borderWidth: 1,
        padding: [5, 20, 0, 20],
      },
      xAxis: {
        type: "category",
        data: ["2023-11月", "2023-12月", "2024-1月"],
      },
      color: this.color[0],
      yAxis: {
        type: "value",
        name: "单位 %",
        position: "left",
        alignTicks: true,
        splitLine: {
          lineStyle: {
            type: "dashed", //虚线
          },
          // show: true //隐藏
        },
      },
      series: [
        {
          data: [150, 147, 260],
          type: "line",
        },
      ],
    };

    this.myChart11.setOption(this.option11);

    this.myChart12 = this.$echarts.init(this.$refs.chart12);
    this.option12 = {
      title: {
        text: "GPU",
        left: "center",
        bottom: "5",
        textStyle: {
          fontSize: 14,
          fontWeight: "normal",
          height: 20,
          lineHeight: 20,
          color: "#595959",
        },
        borderWidth: 1,
        padding: [5, 20, 0, 20],
      },
      xAxis: {
        type: "category",
        data: ["2023-11月", "2023-12月", "2024-1月"],
      },
      color: this.color[1],
      yAxis: {
        type: "value",
        name: "单位 %",
        position: "left",
        alignTicks: true,
        splitLine: {
          lineStyle: {
            type: "dashed", //虚线
          },
          // show: true //隐藏
        },
      },
      series: [
        {
          data: [135, 147, 260],
          type: "line",
        },
      ],
    };

    this.myChart12.setOption(this.option12);

    this.myChart13 = this.$echarts.init(this.$refs.chart13);
    this.option13 = {
      title: {
        text: "DCU",
        left: "center",
        bottom: "5",
        textStyle: {
          fontSize: 14,
          fontWeight: "normal",
          height: 20,
          lineHeight: 20,
          color: "#595959",
        },
        borderWidth: 1,
        padding: [5, 20, 0, 20],
      },
      xAxis: {
        type: "category",
        data: ["2023-11月", "2023-12月", "2024-1月"],
      },
      color: this.color[2],
      yAxis: {
        type: "value",
        name: "单位 %",
        position: "left",
        alignTicks: true,
        splitLine: {
          lineStyle: {
            type: "dashed", //虚线
          },
          // show: true //隐藏
        },
      },
      series: [
        {
          data: [150, 224, 260],
          type: "line",
        },
      ],
    };

    this.myChart13.setOption(this.option13);

    this.myChart14 = this.$echarts.init(this.$refs.chart14);
    this.option14 = {
      title: {
        text: "提交作业分布统计",
        left: "center",
        bottom: "5",
        textStyle: {
          fontSize: 14,
          fontWeight: "normal",
          height: 20,
          lineHeight: 20,
          color: "#595959",
        },
        borderWidth: 1,
        padding: [5, 5, 0, 5],
      },
      xAxis: {
        type: "category",
        data: ["2023-11月", "2023-12月", "2024-1月"],
      },
      color: this.color[3],
      yAxis: {
        type: "value",
        name: "单位 %",
        position: "left",
        alignTicks: true,
        splitLine: {
          lineStyle: {
            type: "dashed", //虚线
          },
          // show: true //隐藏
        },
      },
      series: [
        {
          data: [150, 147, 260],
          type: "line",
        },
      ],
    };

    this.myChart14.setOption(this.option14);

    //条形图
    this.myChart15 = this.$echarts.init(this.$refs.chart15);
    this.option15 = {
      xAxis: {
        // data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子', '衬衫1', '羊毛衫1', '雪纺衫1', '裤子1', '高跟鞋1', '袜子1'],
        axisTick: {
          alignWithLabel: true,
        },
      },
      color: this.color,
      yAxis: {
        data: ["南区存储1", "新区存储2"],
        inverse: true,
        name: "单位:存储量PB",
        position: "left",
        nameLocation: "start",
        alignTicks: true,
        splitLine: {
          lineStyle: {
            // type: 'dashed'//虚线
          },
          // show: true //隐藏
        },
      },
      legend: {
        show: false,
      },
      series: [
        {
          name: "2023",
          type: "bar",
          emphasis: {
            focus: "series",
          },
          itemStyle: {
            // barBorderRadius: [6, 6, 0, 0],
          },
          data: [36, 20],
        },
      ],
    };
    this.myChart15.setOption(this.option15);
  },
  methods: {
    dateRangeChange(value) {
      console.log(value);
    },
    // 开户数量统计分析
    async hanldeExport() {
      const table = this.option1.series[0].data; 
      // 定义表头
      const header = [this.option1.xAxis.data];
      // 将表头和数据合并
      const dataWithHeader = [...header, table];
      // 将数据转换为工作表
      const worksheet = XLSX.utils.aoa_to_sheet(dataWithHeader);
      // 创建工作簿并追加工作表
      const workbook = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(workbook, worksheet, "开户数量统计分析");

      // 导出Excel文件
      XLSX.writeFile(workbook, "开户数量统计分析.xlsx");

      const element = this.$refs.chart1;
      try {
        const canvas = await html2canvas(element, {
          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);
      }
    },
    // 开户单位统计分析
    async hanldeExport1() {
    
      const table = this.option2.series[0].data; 
      // 定义表头
      const header = [this.option2.xAxis.data];
      // 将表头和数据合并
      const dataWithHeader = [...header, table];
        
      // 将数据转换为工作表
      const worksheet = XLSX.utils.aoa_to_sheet(dataWithHeader);
      // 创建工作簿并追加工作表
      const workbook = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(workbook, worksheet, "开户单位统计分析");

      // 导出Excel文件
      XLSX.writeFile(workbook, "开户单位统计分析.xlsx");

      const element = this.$refs.chart2;
      try {
        const canvas = await html2canvas(element, {
          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);
      }
    },
    // 用户标签统计分析
    async hanldeExport2() {
      const table = this.option4.series[0].data; 
      // 定义表头
      const header = [this.option4.yAxis.data];
     
      // 将表头和数据合并
      const dataWithHeader = [...header, table]; 
      // 将数据转换为工作表
      const worksheet = XLSX.utils.aoa_to_sheet(dataWithHeader);
      // 创建工作簿并追加工作表
      const workbook = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(workbook, worksheet, "用户标签统计分析");

      // 导出Excel文件
      XLSX.writeFile(workbook, "用户标签统计分析.xlsx");

      const element = this.$refs.chart4;
      try {
        const canvas = await html2canvas(element, {
          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);
      }
    },
     hanldeExport3() { 
    
      const table =[] ;
       const header = [];
       let name=this.option5.title.text
this.option5.series[0].data.forEach(res=>{
  table.push(res.value)
  header.push(res.name)
})  
      // 将表头和数据合并
      const dataWithHeader = [...[header], table];
      // 将数据转换为工作表
      const worksheet = XLSX.utils.aoa_to_sheet(dataWithHeader); 


       const table1 =[] ;
       const header1 = [];
       let name1=this.option6.title.text
this.option6.series[0].data.forEach(res=>{
  table1.push(res.value)
  header1.push(res.name)
})  
      // 将表头和数据合并
      const dataWithHeader1 = [...[header1], table1]; 
      const worksheet1 = XLSX.utils.aoa_to_sheet(dataWithHeader1); 

      const table2 =[] ;
       const header2 = [];
       let name2=this.option7.title.text
this.option7.series[0].data.forEach(res=>{
  table2.push(res.value)
  header2.push(res.name)
})  
      // 将表头和数据合并
      const dataWithHeader2 = [...[header2], table2];
      // 将数据转换为工作表
      const worksheet2 = XLSX.utils.aoa_to_sheet(dataWithHeader2); 


       const table3 =[] ;
       const header3 = [];
       let name3=this.option8.title.text
this.option8.series[0].data.forEach(res=>{
  table3.push(res.value)
  header3.push(res.name)
})  
      // 将表头和数据合并
      const dataWithHeader3 = [...[header3], table3];
      // 将数据转换为工作表
      const worksheet3= XLSX.utils.aoa_to_sheet(dataWithHeader3); 
   const workbook = XLSX.utils.book_new(); 
      XLSX.utils.book_append_sheet(workbook, worksheet, name); 
      XLSX.utils.book_append_sheet(workbook, worksheet1, name1); 
      XLSX.utils.book_append_sheet(workbook, worksheet2, name2); 
      XLSX.utils.book_append_sheet(workbook, worksheet3, name3);  

      // 导出Excel文件
      XLSX.writeFile(workbook, "活跃用户统计.xlsx"); 
      const element =[this.$refs.chart5,this.$refs.chart6,this.$refs.chart7,this.$refs.chart8];
      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);
      }
    },
    // CPU机时/GPU卡时/DCU卡时/作业提交
    async hanldeExport4() { 
      const table = this.option11.series[0].data; 
       const header = [this.option11.xAxis.data]; 
       
      // // 将表头和数据合并
       const dataWithHeader = [...header, table];
      // // 将数据转换为工作表
      const worksheet = XLSX.utils.aoa_to_sheet(dataWithHeader);

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

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

        const table3 = this.option14.series[0].data; 
       const header3 = [this.option14.xAxis.data];
      // // 将表头和数据合并
       const dataWithHeader3 = [...header3, table3];
      // // 将数据转换为工作表
      const worksheet3 = XLSX.utils.aoa_to_sheet(dataWithHeader3);
      // // 创建工作簿并追加工作表
       const workbook = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(workbook, worksheet, "CPU");
      XLSX.utils.book_append_sheet(workbook, worksheet1, "GPU");
      XLSX.utils.book_append_sheet(workbook, worksheet2, "DUC");
      XLSX.utils.book_append_sheet(workbook, worksheet2, "作业提交分布统计");

      // // 导出Excel文件
       XLSX.writeFile(workbook, "CPU机时/GPU卡时/DCU卡时/作业提交.xlsx");

       const element =[this.$refs.chart11,this.$refs.chart12,this.$refs.chart13,this.$refs.chart14];
      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);
      }
    },
    // 存储统计分析
    async hanldeExport5() { 
      
      const table = this.option15.series[0].data;

      // 定义表头
      const header = [this.option15.yAxis.data];
      // 将表头和数据合并
      const dataWithHeader = [...header, table];
      // 将数据转换为工作表
      const worksheet = XLSX.utils.aoa_to_sheet(dataWithHeader);
      // 创建工作簿并追加工作表
      const workbook = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(workbook, worksheet, "存储统计分析");

      // 导出Excel文件
      XLSX.writeFile(workbook, "存储统计分析.xlsx");

      const element = this.$refs.chart15;
      try {
        const canvas = await html2canvas(element, {
          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>
.main {
  padding: 20px;
}

.padding16 {
  padding: 16px;
}

.marginTop14 {
  margin-top: 14px;
}

.filterTitle2Item {
  display: flex;
  align-items: center;
  margin-right: 10px;
}

.filterTitle2Item > div:nth-of-type(2) {
  width: 160px;
  margin-left: 10px;
}

.title {
  font-weight: bold;
  font-size: 22px;
  color: #333333;
}

.searchModule {
  padding: 10px;
  background: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  background: linear-gradient(180deg, #d6e7ff 0%, #bad2f9 100%);
  border-radius: 12px 12px 12px 12px;
}

.formStyle {
  width: 80%;
  display: flex;
  flex-wrap: wrap;
}

.formStyle ::v-deep .el-form-item {
  width: 100%;
  margin-bottom: 0;
}

.formStyle ::v-deep .el-form-item__label {
  font-size: 14px;
  color: #333333;
  font-weight: normal;
}

.formStyle ::v-deep .el-form-item__content {
  width: 70%;
}

.formStyle ::v-deep .el-date-editor {
  width: 100%;
}

.formStyle ::v-deep .el-select {
  width: 100%;
}

.search {
  width: 240px;
  margin-right: 20px;
  display: flex;
}

.search ::v-deep .el-button {
  flex: 1;
}

.filterList {
  height: 150px;
  padding: 20px 15px;
  background: #ffffff;
  border-radius: 12px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.filterList > div:nth-of-type(1) {
  margin-left: 0;
}

.filterList .filterItem {
  height: 130px;
  flex: 1;
  margin-left: 10px;
}

.filterItem {
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  box-shadow: 0px 2px 4px 1px rgba(0, 0, 0, 0.06);
  border-radius: 8px;
  border: 1px solid #f3f1f1;
}

.filterItem1 {
  display: flex;
  align-items: center;
}

.filterItem1L {
  width: 38px;
  height: 38px;
}

.filterItem1L > img {
  width: 100%;
  height: 100%;
}

.filterItem1R {
  margin-left: 10px;
}

.filterItem1R > div:nth-of-type(1) {
  font-weight: 400;
  font-size: 30px;
  color: #333333;
  line-height: 40px;
  text-align: left;
}

.filterItem1R > div:nth-of-type(2) {
  font-weight: 500;
  font-size: 12px;
  color: #333333;
  line-height: 24px;
  text-align: left;
}

.filterItem1R > div:nth-of-type(3) {
  font-weight: 500;
  font-size: 12px;
  color: #333333;
  line-height: 24px;
  text-align: left;
}

.filterItem2 {
  width: 22px;
  height: 22px;
  background: #dfe7f5;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.filterItem2 > img {
  width: 8px;
  height: 12px;
}

.chart1Title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chart1Title > div:nth-of-type(1) {
  height: 30px;
  font-weight: bold;
  font-size: 22px;
  line-height: 30px;
  color: #333333;
}

.content1 {
  display: flex;
  justify-content: space-between;
}

.content1L {
  width: 40%;
  height: 320px;
  background-color: #ffffff;
  border-radius: 12px;
}

.chart1Style {
  width: 100%;
  height: 90%;
}

.content1R {
  width: 59%;
  height: 320px;
  background-color: #ffffff;
  border-radius: 12px;
}

.content2L {
  width: 40%;
  height: 350px;
  background-color: #ffffff;
  border-radius: 12px;
}

.content2R {
  width: 59%;
  height: 350px;
  background-color: #ffffff;
  border-radius: 12px;
}

.chartPieStyle {
  width: 90%;
  height: 90%;
}

.content2 {
  height: 330px;
  background-color: #ffffff;
}

.content2Content {
  height: 290px;
  margin-top: 10px;
  display: flex;
  justify-content: space-around;
}

.chart2Style {
  width: 25%;
  height: 90%;
}
</style>
