<template>
  <div class="main">
    <div>
      <el-card>
        <el-form label-position="right" label-width="80px">
          <el-row>
            <el-col :span="8">
              <el-form-item label="选择时间">
                <el-date-picker clearable style="width:300px;" v-model="dataQuery.year" type="year" placeholder="请选择年"
                  value-format="yyyy">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="选择季度">
                <el-select clearable class="el-input" v-model="dataQuery.quarter" placeholder="请选择季度">
                  <el-option v-for="item in quarterArr" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="选择月份">
                <el-select clearable class="el-input"  v-model="dataQuery.month" placeholder="请选择月份">
                  <el-option v-for="item in monthArr" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>

            </el-col>
            <el-col :span="8">
              <el-form-item label="受理部门">
                <el-select @change="getOrderResponseTimeStatisti" class="el-input" v-model="dataQuery.acceptance"
                  clearable placeholder="请选择受理部门">
                  <el-option v-for="(item,index) in acceptanceDepartmentArr" :key="item.deptId" :label="item.deptName"
                    :value="item.deptName">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="单位名称" prop="companyName">
                <el-cascader @change="getOrderResponseTimeStatisti" clearable v-model="companyName"
                  :options="companyNameList" :props="{value:'dictLabel',label:'dictLabel'}" />
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <div class="search">
                <el-button icon="el-icon-refresh-right" size="small" @click="chongzhi">重置</el-button>
                <el-button type="primary" icon="el-icon-search" size="small"
                  @click="getOrderResponseTimeStatisti">查询</el-button>
              </div>
            </el-col>
          </el-row>


        </el-form>
      </el-card>
    </div>
    <div class="main-card">
      <el-row :gutter="10" class="flex-info">
        <el-col :span="6" v-for="(item, index) in filterList" :key="index">
          <div class="el-card-box">
            <div class="flex-box">
              <div class="left-box">
                <div class="filterItem1L"><img :src="item.img" alt=""></div>
              </div>
              <div class="right-box">
                <div class="main-right">
                  <div class="title-box">{{ item.num }}</div>
                  <div class="title-box-title">{{ item.title }}</div>
                </div>
                <div class="filterItem2">
                  <img src="../../assets/images/rightArrow.png" alt="">
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="chart1 marginTop14">
      <div class="chart1L padding16">
        <div class="chart1Title">
          <div>工单响应时长</div>
          <el-button type="primary" icon="el-icon-upload2" @click="handleExport">导出</el-button>
        </div>
        <div class="chart1Content" ref="exportRef">
          <div class="chart1Content1"><img src="../../assets/images/chartSet.png" alt=""></div>
          <div class="chart1Content2">
            <div><span style="font-size: 48px;color: #2B7DFF; padding-right: 6px;">{{ workOrderTime.averageResponseTime
                }}</span><span style="font-size: 18px">分钟</span></div>
            <div>平均响应时长</div>
            <div>同比下降{{ workOrderTime.comparison }}分钟</div>
          </div>
        </div>
      </div>
      <div class="chart1R padding16">
        <div class="chart1Title">
          <div>工单处理时长</div>
          <el-button type="primary" icon="el-icon-upload2" @click="hanldeExportWorkOrderTime">导出</el-button>
        </div>
        <div class="echarts-height" ref="exportRef1">
          <chartTemp :option="workOrderOption"></chartTemp>
        </div>
      </div>
    </div>
    <div class="chart2 marginTop14">
      <div class="chart2L padding16">
        <div class="title">资源申请类型统计</div>
        <div class="filterTitle">
          <el-radio-group v-model="searchType" @change="handleGroup">
            <el-radio-button label="year">与上年同时期对比</el-radio-button>
            <el-radio-button label="month">与上月同时期对比</el-radio-button>
          </el-radio-group>
        </div>
        <div class="flex-box">
          <el-form label-width="80px">
            <el-row>
              <el-col :span="24">
                <el-form-item label="单位名称" prop="companyName">
                  <el-cascader placeholder="请选择单位名称" @change="getResourceStatisticsOptionData" clearable
                    v-model="companyNameWorkType" :options="companyNameList"
                    :props="{value:'dictLabel',label:'dictLabel'}" />
                </el-form-item>

              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="echarts-height">
          <chartTemp :option="resourceStatisticsOption"></chartTemp>
        </div>
      </div>
      <div class="chart2R padding16">
        <div class="title">工单变更统计</div>
        <div class="filterTitle">
          <el-radio-group v-model="activeTabInfo">
            <el-radio-button label="0">与上年同时期对比</el-radio-button>
            <el-radio-button label="1">与上月同时期对比</el-radio-button>
          </el-radio-group>
        </div>
        <div class="flex-box">
          <el-form label-width="80px">
            <el-row>
              <el-col :span="24">
                <el-form-item label="单位名称" prop="companyName">
                  <el-cascader placeholder="请选择单位名称" @change="getOrderResponseTimeStatisti" clearable
                    v-model="companyName" :options="companyNameList" :props="{value:'dictLabel',label:'dictLabel'}" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="progress-box">
          <el-row :gutter="40">
            <el-col :span="12">
              <div style="display: flex;">
                <div class="chart7_One mr30">
                  <el-progress type="circle" stroke-width="20" :percentage="80" color="#F2911C"></el-progress>
                  <div class="flex-center">变更率</div>
                </div>
                <div class="chart7_One mr30">
                  <el-progress type="circle" stroke-width="20" :percentage="80" color="#00BD7D"></el-progress>
                  <div class="flex-center">转单率</div>
                </div>
              </div>
              <div class="justify-center-box">2024</div>
            </el-col>
            <el-col :span="12">
              <div style="display: flex;">
                <div class="chart7_One mr30">
                  <el-progress type="circle" stroke-width="20" :percentage="46" color="#F2911C"></el-progress>
                  <div class="flex-center">变更率</div>
                </div>
                <div class="chart7_One">
                  <el-progress type="circle" stroke-width="20" :percentage="80" color="#00BD7D"></el-progress>
                  <div class="flex-center">转单率</div>
                </div>
              </div>
              <div class="justify-center-box">2025</div>
            </el-col>

          </el-row>
        </div>
      </div>
    </div>
    <div class="chart4 marginTop14 padding16">
      <div class="title">工单申请类型统计</div>
      <div class="filterTitle">
        <el-radio-group v-model="work0rderType" @change="getWorkOrderTypeOption">
          <el-radio-button label="year">与上年同时期对比</el-radio-button>
          <el-radio-button label="month">与上月同时期对比</el-radio-button>
        </el-radio-group>
      </div>
      <div class="justify-center">
        <el-form label-width="80px">
          <el-row>
            <el-col :span="24">
              <el-form-item label="单位名称" prop="companyName">
                <el-cascader @change="getWorkOrderTypeOption" placeholder="请选择单位名称" clearable
                  v-model="companyNameWorkTypeInfo" :options="companyNameList"
                  :props="{value:'dictLabel',label:'dictLabel'}" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="echarts-height">
        <chartTemp :option="workOrderTypeOption"></chartTemp>
      </div>
    </div>
    <div class="chart5 marginTop14">
      <div class="chart5L padding16">
        <div class="title">资源使用情况</div>
        <div class="chart5Content">
          <div ref="chart5_One" class="chart5_One">
            <div class="title-info">申请占比</div>
            <chartTemp :option="resourceUsageOption"></chartTemp>
          </div>
          <div ref="chart5_Two" class="chart5_One">
            <div class="title-info">使用比例</div>
            <chartTemp :option="useRatioOption"></chartTemp>
          </div>
        </div>
      </div>
      <div class="chart5L padding16">
        <div style="display: flex;justify-content: space-between;">
          <div class="title">商业软件使用情况</div>
          <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>
        </div>
        <div class="chart5Content">
          <div ref="chart6_One" class="chart5_One">
            <div class="title-info">申请比例</div>
            <chartTemp :option="commercialUseOption"></chartTemp>
          </div>
          <div ref="chart6_Two" class="chart5_One">
            <div class="title-info">使用比例</div>
            <chartTemp :option="proportionCommercialUseOption"></chartTemp>
          </div>
        </div>
      </div>
    </div>
    <div class="chart5 marginTop14">
      <div class="chart6L padding16">
        <div class="title">资源/工单满意度统计</div>
        <div class="filterTitle">
          <el-radio-group v-model="workOrderSatisfaction" @change="">
            <el-radio-button label="1">与上年同时期对比</el-radio-button>
            <el-radio-button label="2">与上月同时期对比</el-radio-button>
          </el-radio-group>
        </div>
        <div ref="chart7" class="chart7_One">
          <chartTemp :option="work0rderSatisfactionOption"></chartTemp>
        </div>
      </div>
      <div class="chart6L padding16">
        <div class="title">单位工单提交统计</div>
        <div class="filterTitle">
          <el-radio-group v-model="workOrdersubmit">
            <el-radio-button label="1">与上年同时期对比</el-radio-button>
            <el-radio-button label="2">与上月同时期对比</el-radio-button>
          </el-radio-group>
        </div>
        <div ref="chart8" class="chart7_One">
          <chartTemp :option="work0rderSubmitOption"></chartTemp>
        </div>
      </div>
    </div>
    <div class="chart5 marginTop14">
      <div class="chart6L padding16">
        <div class="title">交互次数</div>
        <div class="filterTitle">
          <el-radio-group v-model="numberInteractions">
            <el-radio-button label="0">与上年同时期对比</el-radio-button>
            <el-radio-button label="1">与上月同时期对比</el-radio-button>
          </el-radio-group>
        </div>
        <div ref="chart9" class="chart9_One">
          <chartTemp :option="numberInteractionsOption"></chartTemp>
        </div>
      </div>
      <div class="chart6L padding16">
        <div class="title">工单来源统计</div>
        <div class="chart10Content">
          <div ref="chart10_One" class="chart10_One">
            <div class="year-box">2023</div>
            <chartTemp :option="workOrderSourceOption"></chartTemp>
          </div>
          <div ref="chart10_Two" class="chart10_One">
            <div class="year-box">2024</div>
            <chartTemp :option="workOrderSourceOptionInfo"></chartTemp>
          </div>
        </div>
      </div>
    </div>
    <div class="chart4 marginTop14 padding16">
      <div class="chart1Title">
        <div>用户登录来源</div>
        <el-button type="primary" icon="el-icon-upload2" @click="yonghu()">导出</el-button>
      </div>
      <div class="filterTitle">
        <el-radio-group v-model="userLoginSource">
          <el-radio-button label="0">与上年同时期对比</el-radio-button>
          <el-radio-button label="1">与上月同时期对比</el-radio-button>
        </el-radio-group>
      </div>
      <div ref="chart11" class="chart11">
        <chartTemp :option="userLoginSourceOption"></chartTemp>
      </div>
    </div>
  </div>
</template>

<script>
import * as XLSX from 'xlsx';
  import {
    getOrderHandleTimeStatistics,
  } from "@/api/cs/csStatistics";
  import { listDataTree } from "@/api/system/dict/data";
  import html2canvas from 'html2canvas';
  import chartTemp from '@/components/chartTemp/index.vue'
  import {
    searchDeptList,
    searchResourceOrderApplyStatisticsInfo,
    getOrderResponseTimeStatistics,
    exportOrderResponseTimeStatistics,
    getResourcesContrastNumStatistics,
    getOrderContrastNumStatistics,
    getSatisfactionStatistics,
    getWorOrderSubmissionStatistics
  } from '@/api/statistics/workOrderAnalysisManagement.js'
  export default {
    components: {
      chartTemp
    },
    data() {
      return {
        options: {},
        optionsData: {},
        workOrderOption: {}, //工单处理时长
        workOrderXDate: [], //工单处理时长X轴
        workOrderOptionData: [], //工单处理数据
        resourceStatisticsOption: {}, //资源申请类型统计
        resourceStatisticsXdata: [], //资源申请类型统计
        resourceStatisticsData: [100, 230, 300, 400, 600], //资源申请类型统计
        workOrderTypeOption: {}, //工单申请类型统计
        workOrderTypeOptionXdata: [],
        workOrderTypeOptionData1: [23, 45, 34, 55, 65, 75, 80, 88],
        workOrderTypeOptionData2: [40, 55, 64, 75, 65, 85, 80, 98],
        resourceUsageOption: {}, //资源使用情况
        useRatioOption: {}, //使用比例
        commercialSoftwareOption: {}, //商业软件使用情况
        commercialUseOption: {}, //商业软件使用情况
        proportionCommercialUseOption: {}, //商业软件使用情况使用比例
        work0rderSatisfactionOption: {}, //工单满意度
        workOrderSatisfactionXdata: [],
        workOrderSatisfactionData1: [],
        workOrderSatisfactionData2: [],
        workOrderSatisfactionDataText1: '',
        workOrderSatisfactionDataText2: '',
        work0rderSubmitOption: {}, //单位工单提交统计
        work0rderSubmitXData: ['2023', '2024', ],
        collegeA: [12, 34, 45, 66, 67, 89],
        collegeB: [22, 44, 48, 76, 87, 69],
        collegeC: [54, 24, 45, 36, 57, 49],
        numberInteractionsOption: {}, //交互次数
        numberInteractionsXData: ['09-10', '09-16', '09-22', '09-28', '10-04'], //交互次数X轴
        numberInteractionsData1: [13, 34, 55, 65, 75, 88],
        numberInteractionsData2: [33, 45, 55, 75, 95, 98],
        workOrderSourceOption: {}, //工单来源统计
        workOrderSourceOptionInfo: {}, //工单来源统计
        userLoginSourceOption: {}, //用户登录来源
        workOrderChangeStatisticsOption: {}, //变更率
        userLoginSourceXData: ['1月', '2月', '3月', '4月', '5月', '6月'],
        dataQuery: {
          year: '',
          quarter: '',
          month: '',
          startTime: '',
          endTime: '',
          acceptance: '',
          companyName: '',
          deptName: '',
        },
        responseData: '',
        dateRange: [],
        dateValue: '',
        value: '',
        deptNameList: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }],
        acceptanceList: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }],
        filterList: [],
        year: '',
        quarterArr: [{
          value: '1',
          label: '第一季度'
        }, {
          value: '2',
          label: '第二季度'
        }, {
          value: '3',
          label: '第三季度'
        }, {
          value: '4',
          label: '第四季度'
        }],
        monthArr: [{
          value: '1',
          label: '一月'
        }, {
          value: '2',
          label: '二月'
        }, {
          value: '3',
          label: '三月'
        }, {
          value: '4',
          label: '四月'
        }, {
          value: '5',
          label: '五月'
        }, {
          value: '6',
          label: '六月'
        }, {
          value: '7',
          label: '七月'
        }, {
          value: '8',
          label: '八月'
        }, {
          value: '9',
          label: '九月'
        }, {
          value: '10',
          label: '十月'
        }, {
          value: '11',
          label: '十一月'
        }, {
          value: '12',
          label: '十二月'
        }, ],
        acceptanceDepartmentArr: [],
        // 申请单位
        applicantList: [{
            value: '',
            label: '全部'
          },
          {
            value: '选项4',
            label: '龙须面'
          }, {
            value: '选项5',
            label: '北京烤鸭'
          }
        ],
        secondaryUnitArr: [{
          value: '',
          label: '全部'
        }],
        month: '1',
        quarter: '1',
        acceptanceDepartment: '1',
        applicant: '',
        secondaryUnit: '',
        active1: 0,
        color: ["#5470c6", "#91cc75", "#fac858", "#ee6666", "#73c0de", "#3ba272", "#fc8452", "#9a60b4", "#ea7ccc"],
        searchType: 'year',
        activeTabInfo: '0',
        work0rderType: 'year',
        workOrderSatisfaction: 'year', //资源/工单满意度统计
        workOrdersubmit: '1', //单位工单提交统计
        numberInteractions: '0', //交互次数
        userLoginSource: '0', //用户登录来源
        companyNameList: [], //单位名称
        companyName: "",
        workOrderTime: {},
        yearList: [],
        lastList: [],
        strName1: '',
        strName2: '',
        companyNameWorkType: [], //资源申请类型统计单位名称
        searchTypeInfo: 'year',
        companyNameWorkTypeInfo: [], //工单申请类型统计
        typeInfo: '1',
        typeInfoTimeList: [],
        legendList: [],
        seriesList: []

      }
    },
    mounted() {
      this.getClassList() //单位名称
      this.getSearchDeptList() //受理部门
      this.getOrderResponseTimeStatisti() //查询
      this.init()

    },
    methods: {
      init() {
        this.getOrderResponseTimeStatistics() //工单响应时长
        this.getOrderHandleTimeStatisti()
        this.getResourcesContrastNumStatisti()
        this.initData()
        this.getResourceStatisticsOptionData() //资源申请类型统计
        this.getWorkOrderTypeOption() //工单申请类型统计
        this.getResourceUsageOption() //资源使用情况
        this.getUseRatioOption() //使用比例
        this.getCommercialUseOption() //商业软件使用情况申请比例
        this.proportionCommercialUseOptionData() //商业软件使用情况商业软件使用情况使用比例
        this.work0rderSatisfactionOptionData() //资源/工单满意度统计
        this.work0rderSubmitOptionData() //单位工单提交统计
        this.numberInteractionsOptionData() //交互次数
        this.getWorkOrderSourceOptionData() //工单来源统计
        this.workOrderSourceOptionInfoData(), //工单来源统计
          this.userLoginSourceOptionData() //用户登录来源
        this.workOrderChangeStatisticsOptionData() //变更率
      },
      //单位名称
      getClassList() {
        listDataTree({ dictType: 'cs_company_name' }).then(res => {
          this.companyNameList = res.rows
        });
      },
      // 查询受理部门列表
      getSearchDeptList() {
        searchDeptList().then(res => {
          if (res.code == 200) {
            this.acceptanceDepartmentArr = res.data
          }
        })
      },
      // 查询
      getOrderResponseTimeStatisti() {
        this.dataQuery.companyName = this.companyName[0]
        searchResourceOrderApplyStatisticsInfo(this.dataQuery).then(res => {
          if (res.code == 200) {
            this.responseData = res.data
            this.filterList = [{
              img: require('../../assets/images/chartmanag1.png'),
              num: this.responseData.resourceOrderApplyCount,
              title: '全部工单'
            }, {
              img: require('../../assets/images/chartmanag2.png'),
              num: this.responseData.dspResourceOrderApplyCount,
              title: '待审批工单',
              applyStatus: '2',
            }, {
              img: require('../../assets/images/chartmanag3.png'),
              num: this.responseData.dshResourceOrderApplyCount,
              title: '待审核工单',
              applyStatus: '4',
            }, {
              img: require('../../assets/images/chartmanag4.png'),
              num: this.responseData.dfpResourceOrderApplyCount,
              title: '待分配工单',
              applyStatus: '6',
            }, {
              img: require('../../assets/images/chartmanag5.png'),
              num: this.responseData.dpjResourceOrderApplyCount,
              title: '待评价工单',
              applyStatus: '9',
            }, {
              img: require('../../assets/images/chartmanag6.png'),
              num: this.responseData.jxzResourceOrderApplyCount,
              title: '进行中工单',
              applyStatus: '7',
            }]
            this.init()
          }
        })
      },
      // 工单响应时长
      getOrderResponseTimeStatistics() {
        let params = {
          ...this.dataQuery
        }
        getOrderResponseTimeStatistics(params).then(res => {
          if (res.code == 200) {
            this.workOrderTime = res.data
          }
        })
      },
      // 导出工单响应时长
   async   handleExport() {  
    const   table=[this.workOrderTime.averageResponseTime+'分钟',this.workOrderTime.comparison+'分钟']  
  // table.push({averageResponseTime:,comparison:}) 
           // 定义表头
           const header = [["总时长", "平均响应时长同比下降" ]]; 
          // 将表头和数据合并
          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.exportRef;
      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  hanldeExportWorkOrderTime() { 
    const   table=this.workOrderOption.series[0].data  
  // table.push({averageResponseTime:,comparison:}) 
           // 定义表头
           const header = [this.workOrderOption.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.exportRef1;
      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);
      } 
      },
      //资源申请类型统计
      getResourceStatisticsOptionData() {
        let params = {
          searchType: this.searchType,
          companyName: this.companyNameWorkType[0]
        }

        getResourcesContrastNumStatistics(params).then(res => {
          if (res.code == 200) {
            this.resourceStatisticsXdata = res.data.classList
            this.yearList = res.data.timeList.map(el => el.toString())
            this.lastList = res.data.lastList
            this.resourceStatisticsData = res.data.nowList
            this.strName1 = this.yearList[0].toString()
            this.strName2 = this.yearList[1].toString()
            this.$nextTick(() => {
              this.getResourceStatisticsOptionDataEcharts()
            })
          }
        })




      },
      getResourceStatisticsOptionDataEcharts() {
        this.resourceStatisticsOption = {
          tooltip: {
            trigger: 'axis',
          },
          legend: {
            data: this.yearList,
          },
          xAxis: {
            type: 'category',
            axisTick: {
              show: false, //是否现实x轴刻度线
            },
            axisLine: {
              show: false, //是否现实x轴刻度线
            },
            data: this.resourceStatisticsXdata
          },
          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: [{
              name: this.strName1,
              data: this.lastList,
              type: 'bar',
              barWidth: 20, //柱图宽度
              itemStyle: {

                normal: {
                  //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
                  barBorderRadius: [5, 5, 0, 0],
                  color: '#408AFE', // 设置柱形颜色为蓝色
                },
              }
            },
            {
              name: this.strName2,
              data: this.resourceStatisticsData,
              type: 'bar',
              barWidth: 20, //柱图宽度
              itemStyle: {
                normal: {
                  //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
                  barBorderRadius: [5, 5, 0, 0],
                  color: '#00BD7D', // 设置柱形颜色为蓝色
                },
              }
            },
          ]
        }
      },
      //工单申请类型统计
      getWorkOrderTypeOption() {
        let params = {
          searchType: this.searchTypeInfo,
          companyName: this.companyNameWorkTypeInfo[0]
        }
        getOrderContrastNumStatistics(params).then(res => { 
          if (res.code == 200) {
            this.workOrderTypeOptionXdata = res.data.classList
            this.workOrderTypeOptionData1 = res.data.lastList
            this.workOrderTypeOptionData2 = res.data.nowList
            this.$nextTick(() => {
              this.getWorkOrderTypeOptionEcharts()
            })
          }
        })


      },
      getWorkOrderTypeOptionEcharts() {
        this.workOrderTypeOption = {
          tooltip: {
            trigger: 'axis',
          },
          xAxis: {
            type: 'category',
            axisTick: {
              show: false, //是否现实x轴刻度线
            },
            axisLine: {
              show: false, //是否现实x轴刻度线
            },
            data: this.workOrderTypeOptionXdata
          },
          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.workOrderTypeOptionData1,
              type: 'bar',
              barWidth: 20, //柱图宽度
              itemStyle: {

                normal: {
                  //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
                  barBorderRadius: [5, 5, 0, 0],
                  color: '#408AFE', // 设置柱形颜色为蓝色
                },
              }
            },
            {

              data: this.workOrderTypeOptionData2,
              type: 'bar',
              barWidth: 20, //柱图宽度
              itemStyle: {
                normal: {
                  //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
                  barBorderRadius: [5, 5, 0, 0],
                  color: '#00BD7D', // 设置柱形颜色为蓝色
                },
              }
            },
          ]
        }
      },
      //资源使用情况
      getResourceUsageOption() {
        this.resourceUsageOption = {
          legend: {
            left: 'center',
            bottom: '30'
          },
          series: [{
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 10, name: 'HPC', itemStyle: { color: '#B0A4EE' } },
              { value: 23, name: '云计算', itemStyle: { color: '#35B084' } },
              { value: 58, name: '存储', itemStyle: { color: '#31BAC2' } },
              { value: 44, name: '软件D', itemStyle: { color: '#F89C6D' } },
              { value: 30, name: '软件E', itemStyle: { color: '#0CA1EF' } }
            ],
            label: {
              show: true, // 显示标签
              formatter: '{b}: {c}' // 格式化标签内容，{b}是名称，{c}是值，{d}是百分比
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }]
        };
      },
      // 使用比例
      getUseRatioOption() {
        this.useRatioOption = {
          legend: {
            left: 'center',
            bottom: '30'
          },
          series: [{
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 20, name: 'HPC', itemStyle: { color: '#B0A4EE' } },
              { value: 23, name: '云计算', itemStyle: { color: '#35B084' } },
              { value: 48, name: '存储', itemStyle: { color: '#31BAC2' } },
              { value: 78, name: '软件D', itemStyle: { color: '#F89C6D' } },
              { value: 90, name: '软件E', itemStyle: { color: '#0CA1EF' } }
            ],
            label: {
              show: true, // 显示标签
              formatter: '{b}: {c}' // 格式化标签内容，{b}是名称，{c}是值，{d}是百分比
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }]
        };
      },
      //商业软件使用情况申请比例
      getCommercialUseOption() {
        this.commercialUseOption = {
          legend: {
            left: 'center',
            bottom: '30'
          },
          series: [{
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 20, name: 'HPC', itemStyle: { color: '#B0A4EE' } },
              { value: 23, name: '云计算', itemStyle: { color: '#35B084' } },
              { value: 48, name: '存储', itemStyle: { color: '#31BAC2' } },
              { value: 78, name: '软件D', itemStyle: { color: '#F89C6D' } },
              { value: 90, name: '软件E', itemStyle: { color: '#0CA1EF' } }
            ],
            label: {
              show: true, // 显示标签
              formatter: '{b}: {c}' // 格式化标签内容，{b}是名称，{c}是值，{d}是百分比
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }]
        };
      },
      // 商业软件使用情况商业软件使用情况使用比例
      proportionCommercialUseOptionData() {
        this.proportionCommercialUseOption = {
          legend: {
            left: 'center',
            bottom: '30'
          },
          series: [{
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 20, name: 'HPC', itemStyle: { color: '#B0A4EE' } },
              { value: 23, name: '云计算', itemStyle: { color: '#35B084' } },
              { value: 48, name: '存储', itemStyle: { color: '#31BAC2' } },
              { value: 78, name: '软件D', itemStyle: { color: '#F89C6D' } },
              { value: 90, name: '软件E', itemStyle: { color: '#0CA1EF' } }
            ],
            label: {
              show: true, // 显示标签
              formatter: '{b}: {c}' // 格式化标签内容，{b}是名称，{c}是值，{d}是百分比
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }]
        };
      },
      // /资源/工单满意度统计
      work0rderSatisfactionOptionData() {

        let params = {
          type: this.typeInfo,
        }
        getSatisfactionStatistics(params).then(res => {
          if (res.code == 200) { 
            this.typeInfoTimeList = res.data.timeList
            this.workOrderSatisfactionXdata = res.data.evaluateStarList.toString()
            this.workOrderSatisfactionData1 = res.data.nowList
            this.workOrderSatisfactionData2 = res.data.lastList
            this.workOrderSatisfactionDataText1 = this.typeInfoTimeList[0].toString()
            this.workOrderSatisfactionDataText2 = this.typeInfoTimeList[1].toString()
            this.getwork0rderSatisfactionOptionDataEcharts()
          }
        })
      },

      getwork0rderSatisfactionOptionDataEcharts() {
        this.work0rderSatisfactionOption = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            data: this.typeInfoTimeList,
          },
          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.workOrderSatisfactionXdata,
            axisTick: {
              show: false, //是否现实x轴刻度线
            },
            axisLine: {
              show: false, //是否现实x轴刻度线
            },
            axisLabel: {
              rotate: 0, // 旋转45度，可以根据实际情况调整
              interval: 0, // 显示所有标签
              margin: 10, // 增加标签之间的间距
              formatter: function(value) {
                // 这里可以对标签进行格式化处理，比如截断过长的文本
                return value.length > 10 ? value.slice(0, 10) + '...' : value;
              }
            }

          },
          series: [{
              name: this.workOrderSatisfactionDataText1,
              type: 'bar',
              barWidth: 15, //柱图宽度
              itemStyle: {
                color: '#216FE9', // 设置柱形颜色为蓝色
              },

              data: this.workOrderSatisfactionData1

            },
            {
              name: this.workOrderSatisfactionDataText2,
              type: 'bar',
              barWidth: 15, //柱图宽度

              itemStyle: {
                color: '#00BD7D', // 设置柱形颜色为蓝色
              },
              data: this.workOrderSatisfactionData2

            }
          ]
        };
      },

      // 单位工单提交统计
      work0rderSubmitOptionData() {
        let params = {
          type: this.workOrdersubmit,
        }
        this.seriesList = []
        getWorOrderSubmissionStatistics(params).then(res => {
          if (res.code == 200) {
            this.work0rderSubmitXData = res.data.timeList
            this.legendList = res.data.classList
            this.collegeA = res.data.classList
            this.collegeB = res.data.lastList
            this.collegeC = res.data.nowList
            let colorlist = ['#FFBE54', '#00BD7D', '#216FE9', '#B0A4EE', '#DDA0DD', '#FF00FF', '#7B68EE', '#4169E1',
              '#778899', '#ADD8E6', '#AFEEEE'
            ]
            for (var i = 0; i < this.legendList.length; i++) {
               for (var j = 0; j < this.work0rderSubmitXData.length; j++){
                 if(j==0){
                   this.seriesList.push({
                     name: this.legendList[i],
                     data: res.data.nowList,
                     type: 'bar',
                     // stack:this.work0rderSubmitXData[j],
                     barWidth: 20, //柱图宽度
                     itemStyle: {
                       normal: {
                         //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
                         color: colorlist[i], // 设置柱形颜色为蓝色
                       },
                     }
                   })
                 }
                 // else{
                 //   this.seriesList.push({
                 //     name: this.legendList[i],
                 //     data: res.data.lastList,
                 //     type: 'bar',
                 //     // stack:this.work0rderSubmitXData[j],
                 //     barWidth: 20, //柱图宽度
                 //     itemStyle: {
                 //       normal: {
                 //         //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
                 //         color: colorlist[i], // 设置柱形颜色为蓝色
                 //       },
                 //     }
                 //   })
                 // }
               }

            }

            this.getWork0rderSubmitEcharts()
          }
        })




      },
      getWork0rderSubmitEcharts() {
        this.work0rderSubmitOption = {
          tooltip: {
            trigger: 'axis',
          },
          legend: {
            data: this.legendList,
          },
          xAxis: {
            type: 'category',
            axisTick: {
              show: false, //是否现实x轴刻度线
            },
            axisLine: {
              show: false, //是否现实x轴刻度线
            },
            data: this.work0rderSubmitXData
          },
          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: this.seriesList,

          // {

          // }
        }
      },
      // 交互次数
      numberInteractionsOptionData() {
        this.numberInteractionsOption = {
          tooltip: {
            trigger: 'axis',
          },
          legend: {
            data: ['2023年', '2024年'],
          },
          xAxis: {
            type: 'category',
            axisTick: {
              show: false, //是否现实x轴刻度线
            },
            axisLine: {
              show: false, //是否现实x轴刻度线
            },
            data: this.numberInteractionsXData
          },
          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: [{
              name: '2023年',
              data: this.numberInteractionsData1,
              type: 'bar',
              barWidth: 20, //柱图宽度
              itemStyle: {

                normal: {
                  //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
                  barBorderRadius: [5, 5, 0, 0],
                  color: '#3382FF', // 设置柱形颜色为蓝色
                },
              }
            },
            {
              name: '2024年',
              data: this.numberInteractionsData2,
              type: 'bar',
              barWidth: 20, //柱图宽度
              itemStyle: {
                normal: {
                  //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
                  barBorderRadius: [5, 5, 0, 0],
                  color: '#FCAD45', // 设置柱形颜色为蓝色
                },
              }
            },
          ]
        }
      },
      //工单来源统计
      getWorkOrderSourceOptionData() {
        this.workOrderSourceOption = {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            data: ['资源申请', '移动平台', '服务台'],
            bottom: 30,
            align: 'left',
          },

          series: [{
            type: 'pie',
            radius: '50%',
            data: [
              { value: 1048, name: '资源申请', itemStyle: { color: '#61A5E8' } },
              { value: 735, name: '移动平台', itemStyle: { color: '#E3935D' } },
              { value: 580, name: '服务台', itemStyle: { color: '#7ECF51' } },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }]
        }
      },
      //工单来源统计
      workOrderSourceOptionInfoData() {
        this.workOrderSourceOptionInfo = {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            data: ['资源申请', '移动平台', '服务台'],
            bottom: 30,
            align: 'left',
          },

          series: [{
            type: 'pie',
            radius: '50%',
            data: [
              { value: 18, name: '资源申请', itemStyle: { color: '#61A5E8' } },
              { value: 75, name: '移动平台', itemStyle: { color: '#E3935D' } },
              { value: 58, name: '服务台', itemStyle: { color: '#7ECF51' } },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }]
        }
      },
      // 变更率
      workOrderChangeStatisticsOptionData() {

        this.workOrderChangeStatisticsOption = {
          series: [{
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            data: [
              { value: 335, name: '直接访问' },
              { value: 310, name: '邮件营销' },
              { value: 234, name: '联盟广告' },
              { value: 135, name: '视频广告' }
            ],
            label: {
              show: true,
              position: 'outside'
            }
          }]
        };
      },
      // 用户登录来源
      userLoginSourceOptionData() {
        this.userLoginSourceOption = {
          tooltip: {
            trigger: 'axis',
          },
          legend: {
            data: ['AC平台', 'VPN', '工单系统', '地质研究院'],
          },
          xAxis: {
            type: 'category',
            axisTick: {
              show: false, //是否现实x轴刻度线
            },
            axisLine: {
              show: false, //是否现实x轴刻度线
            },
            data: this.userLoginSourceXData
          },
          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: [{
              name: 'AC平台',
              data: this.collegeA,
              type: 'bar',
              barWidth: 20, //柱图宽度
              stack: 'AC平台',
              itemStyle: {

                normal: {
                  //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]

                  color: '#98BEF8', // 设置柱形颜色为蓝色
                },
              }
            },
            {
              name: 'VPN',
              data: this.collegeB,
              type: 'bar',
              stack: 'AC平台',
              barWidth: 20, //柱图宽度
              itemStyle: {

                normal: {
                  //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]

                  color: '#5698FE', // 设置柱形颜色为蓝色
                },
              }
            },
            {
              name: '工单系统',
              data: this.collegeC,
              stack: 'AC平台',
              type: 'bar',
              barWidth: 20, //柱图宽度
              itemStyle: {

                normal: {
                  //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]

                  color: '#216FE9', // 设置柱形颜色为蓝色
                },
              }
            },
            {
              name: '地质研究院',
              data: this.collegeC,
              stack: 'AC平台',
              type: 'bar',
              barWidth: 20, //柱图宽度
              itemStyle: {

                normal: {
                  //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]

                  color: '#074BB2', // 设置柱形颜色为蓝色
                },
              }
            },
          ]
        }
      },
      // 资源申请类型统计点击
      handleGroup() {
        this.getResourceStatisticsOptionData()
      },
      chongzhi() {
        this.dataQuery = {
          year: '',
          quarter: '',
          month: '',
          startTime: '',
          endTime: '',
          acceptance: '',
          companyName: '',
          deptName: '',
        }
      },



      // 工单处理时长
      getOrderHandleTimeStatisti() {
        getOrderHandleTimeStatistics(this.dataQuery).then(res => { 
          if (res.code == 200) {
            this.workOrderXDate = []
            this.workOrderOptionData = []
            res.data.handleTimeList.map(item => {
              this.workOrderXDate.push(item.dateColumn)
              this.workOrderOptionData.push(item.averageResponseTime)
            })
            this.getworkOrderOptionEcharts()
          }
        })
      },
      // 工单处理时长图表
      getworkOrderOptionEcharts() {
        this.workOrderOption = {
          xAxis: {
            data: this.workOrderXDate,
            axisTick: {
              alignWithLabel: true
            }
          },
          tooltip: {
            trigger: 'axis',
            // backgroundColor: '#fff', // 提示框背景颜色
            formatter(params) { 
              let res = `
                      <div>
                        <div style="background-color:'#F6F6F6';color:'#000'">${params[0].axisValueLabel}</div>
                        <div>平均值： ${params[0].value}</div>
                      </div>

                     `
              return res
            }
          },

          color: [
            "#5470c6",
            "#91cc75",
            "#fac858",
            "#ee6666",
            "#73c0de",
            "#3ba272",
            "#fc8452",
            "#9a60b4",
            "#ea7ccc"
          ],
          yAxis: {
            name: "单位：h",
            nameTextStyle: {
              color: "#626262",
              nameLocation: "start",
            },
            splitLine: {
              lineStyle: {
                type: 'dashed' //虚线
              },
              // show: true //隐藏
            }
          },
          series: [{
            data: this.workOrderOptionData,
            itemStyle: { color: '#5998FD' },
            type: 'bar',
          }]
        };
      },





      getResourcesContrastNumStatisti() {
        getResourcesContrastNumStatistics(this.dataQuery).then(res => { 
          let xdata = []
          let contrastNumData = []
          let nowNumData = []
          res.data.resourcesContrastNumList.map(item => {
            xdata.push(item.className)
            contrastNumData.push(item.contrastNum)
            nowNumData.push(item.nowNum)
          })
          this.myChart2 = this.$echarts.init(this.$refs.chart2)
          let option2 = {
            xAxis: {
              data: xdata,
              axisTick: {
                alignWithLabel: true
              }
            },
            color: this.color,
            yAxis: {
              splitLine: {
                lineStyle: {
                  // type: 'dashed'//虚线
                },
                // show: true //隐藏
              }
            },
            series: [{
                name: 'Direct',
                type: 'bar',
                emphasis: {
                  focus: 'series',
                },
                itemStyle: {
                  barBorderRadius: [6, 6, 0, 0],
                },
                data: contrastNumData
              },
              {
                name: 'email',
                type: 'bar',
                emphasis: {
                  focus: 'series'
                },
                itemStyle: {
                  barBorderRadius: [6, 6, 0, 0],
                },
                data: nowNumData
              },
            ]
          };
          this.myChart2.setOption(option2);
        })
      },


      dateRangeChange(value) { 
        if (value && value.length) {
          this.dataQuery.startTime = value[0]
          this.dataQuery.endTime = value[1]
        } else {
          this.dataQuery.startTime = ''
          this.dataQuery.endTime = ''
        }
      },
      initData() {
        this.optionsData = {
          xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            data: [150, 230, 224, 218, 135, 147, 260],
            type: 'line'
          }]
        }
      },


        // 用户登录来源
   async   yonghu() {

    const   table=this.userLoginSourceOption.series[0].data  
  // table.push({averageResponseTime:,comparison:}) 
           // 定义表头
           const header = [this.userLoginSourceOption.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.chart11;
      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 lang="scss">
  .main {
    padding: 20px;
  }

  .padding16 {
    padding: 16px;
  }

  .marginTop14 {
    margin-top: 14px;
  }

  .flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 20px;
    color: #333;
  }

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

  .year-box {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 30px;
  }

  .flex-info {
    display: flex;
    margin: 20px 0 0;
  }

  // ::v-deep .el-row{
  //     margin:10px 0 !important;;
  // }
  .title {
    font-weight: bold;
    font-size: 22px;
    color: #333333;
  }

  .title-box-title {
    white-space: nowrap;
  }

  .el-input {
    width: 400rpx;
  }

  .progress-box {
    padding: 40px;
  }

  .mr30 {
    margin-right: 30px;
  }

  /* ::v-deep .el-card{
    box-shadow:none;
    border:none;
  } */
  .searchModule {
    padding: 10px;
    background: #FFFFFF;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: 12px;
    background: linear-gradient(180deg, #D6E7FF 0%, #BAD2F9 100%);
    border-radius: 12px 12px 12px 12px;
  }

  .chartTemp-height {
    height: 300px;
  }

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

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

  .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;
    margin-left: 10px;
    display: flex;
  }

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

  .filterList {
    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: 100px;
    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;
  }

  .title-box {
    white-space: nowrap;
    font-weight: 700;
    font-size: 20px;
  }

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

  .right-box {
    display: flex;
    flex: 1;
    justify-content: space-between;
    align-items: center;


  }

  .left-box {
    margin-right: 15px;
  }

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

  .el-card-box {
    margin-bottom: 10px;
    cursor: pointer;
  }

  .filterItem1R {
    display: flex;
    flex-direction: column;
    margin-left: 20px;
    white-space: nowrap;
  }

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

  .echarts-height {
    height: 300px;
  }

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

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

  .main-right {
    // margin:0 5px 0 10px;
  }

  .el-card-box {
    padding: 20px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
    background: #fff;
    border-radius: 5px;
  }

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

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

  .chart1L {
    width: 35%;
    height: 316px;
    background: #FFFFFF;
    border-radius: 12px;
  }

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

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

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

  .chart1Content1 {
    width: 226px;
    height: 226px;
  }

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

  .chart1Content2 {
    margin-left: 30px;
    color: #333333;
    font-size: 18px;
  }

  .chart1Content2>div {
    margin-bottom: 10px;
  }

  .chart1R {
    width: 64%;
    height: 316px;
    background: #FFFFFF;
    border-radius: 12px;
  }

  .chart1Chart {
    width: 100%;
    height: 290px;
  }

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

  .chart2L {
    width: 40%;
    height: 460px;
    background: #FFFFFF;
    border-radius: 12px;
  }

  .filterTitle {
    padding: 20px 0;
    display: flex;
    justify-content: center;
  }

  .filterTitle1 {
    margin-top: 20px;
    display: flex;
    justify-content: center;
  }

  .filterTitle1>div {
    width: 132px;
    height: 32px;
    background: #FFFFFF;
    border-radius: 2px 0px 0px 2px;
    font-size: 14px;
    line-height: 32px;
    text-align: center;
    margin-right: 10px;
    cursor: pointer;
  }

  .filterTitle1>div:hover {
    border: 1px solid #0051AA;
    color: #0051AA;
  }

  .active {
    border: 1px solid #0051AA;
    color: #0051AA;
  }

  .noActive {
    border: 1px solid #D9D9D9;
    color: #595959;
  }

  .filterTitle2 {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
  }

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

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

  .chart2Chart {
    width: 100%;
    height: 340px;
  }

  .chart2R {
    width: 59%;
    height: 460px;
    background: #FFFFFF;
    border-radius: 12px;
  }

  .chart3 {
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
  }

  .chart3Item {
    width: 40%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .chart3Item1 {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }

  .chart3Item11 {}

  .chart3_One {
    width: 100%;
    height: 140px;
  }

  .chart4 {
    height: 440px;
    background: #FFFFFF;
    border-radius: 12px;
  }

  .chart4Chart {
    width: 100%;
    height: 300px;
  }

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

  .chart5L {
    width: 49.5%;
    height: 400px;
    background: #FFFFFF;
    border-radius: 12px;
  }

  .chart5Content {
    margin-top: 10px;
    width: 100%;
    height: 290px;
    display: flex;
  }

  .chart5_One {
    width: 50%;
    height: 100%;
  }

  .chart6L {
    width: 49.5%;
    height: 500px;
    background-color: #FFFFFF;
  }

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

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

  .chart10Content {
    width: 100%;
    height: 90%;
    display: flex;
  }

  .chart10_One {
    width: 50%;
    height: 100%;
  }

  .chart11 {
    width: 100%;
    height: 300px;
  }

  .parmas-box {
    background: #F6F6F6;
    color: #676767;
  }

  .justify-center {}

  .justify-center-box {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
  }

  .title-info {
    width: 120px;
    height: 40px;
    line-height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    border: 1px solid #D9D9D9;
  }
</style>
