read_opc/chuanyi_client2/src/views/run_config/index.vue

<template>
  <div class="cqcy-content" style="margin: 0;height: calc(100% - 70px);">
    <breadcrumb-view :breadcrumbList="breadcrumbList" :show-index="false"></breadcrumb-view>
    <div v-if="btnType === ''" class="cy-nav-sx">
      <el-select v-model="searchValue"
                 style="width: 180px;"
                 placeholder="请选择报表类型"
                 @change="changeReportTypeEvent">
        <el-option v-for="item in reportOptions"
                   style="margin-left: 5px; width: 180px;"
                   :key="item.value"
                   :label="item.label"
                   :value="item.value">
        </el-option>
      </el-select>
      <el-input placeholder="请输入报表名称"
                v-model="searchTxt"
                style="margin-left: 5px; width: 180px;"
                prefix-icon="el-icon-search">
      </el-input>
      <el-button style="margin-left: 5px;" @click="searchReportEvent">查询</el-button>
    </div>
    <!--    <el-button v-if="btnType === ''" type="primary" class="cy-nav-btn" icon="el-icon-circle-plus-outline"-->
    <!--               size="mini" @click="addReportEvent">新增-->
    <!--    </el-button>-->
    <!--    <el-button v-if="btnType === ''" type="success" class="cy-nav-btn" icon="el-icon-refresh"-->
    <!--               size="mini" @click="refreshReportEvent">刷新</el-button>-->
    <el-divider></el-divider>
    <div class="cy-main">
      <div class="cy-main-left" v-if="!showMainView">
        <div class="cy-list">
          <el-table v-if="reportDataList.length > 0"
                    :data="reportDataList"
                    border
                    :stripe="true"
                    :header-cell-style="{background: '#E8E8E8'}"
                    @sort-change="sortChange"
                    style="width: 100%;">
            <el-table-column
                align="center"
                sortable="custom"
                label="报表名称"
                prop="reportTableName">
              <template slot-scope="scope">
                <span style="color: #409EFF; cursor: pointer;"
                      @click="handleReportNodeClick(scope.row, scope.row.userId != uid ? 'deny' : '')"
                      :title="scope.row.reportTableName">{{ scope.row.reportTableName }}</span>
              </template>
            </el-table-column>
            <el-table-column
                align="center"
                label="报表类型"
                prop="reportTableType"
                width="350">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.userId != uid" type="success" style="margin-right: 5px;">被分享</el-tag>
                <el-tag v-if="uid == scope.row.userId && scope.row.userGroupList && scope.row.userGroupList.length > 0"
                        type="warning" style="margin-right: 5px;">已分享
                </el-tag>
                <el-tag v-if="scope.row.reportTableType == 0" style="margin-right: 5px;">手动报表</el-tag>
                <el-tag v-if="scope.row.reportTableType == 1" style="margin-right: 5px;">自动报表</el-tag>
                <el-tag v-if="scope.row.reportTableType == 2" style="margin-right: 5px;">事件驱动报表</el-tag>
              </template>
            </el-table-column>
            <el-table-column
                align="center"
                label="创建时间"
                sortable
                prop="createTime"
                width="200">
            </el-table-column>
            <el-table-column label="操作" align="center" width="380">
              <template slot-scope="scope">
                <el-button type="text"
                           v-if="uid == scope.row.userId"
                           size="small"
                           icon="el-icon-setting"
                           @click="editReportItem(scope.row)">配置
                </el-button>
                <!--                <el-button type="text"-->
                <!--                           v-if="uid == scope.row.userId"-->
                <!--                           size="small"-->
                <!--                           icon="el-icon-edit"-->
                <!--                           @click="editReportItem(scope.row)">修改-->
                <!--                </el-button>-->
                <el-button type="text"
                           v-if="uid == scope.row.userId && scope.row.reportTableType == 1 && scope.row.runState == 0"
                           size="small"
                           icon="el-icon-video-play"
                           @click="setReportStatus(scope.row)">启动
                </el-button>
                <el-button type="text"
                           v-if="uid == scope.row.userId && scope.row.reportTableType == 1 && scope.row.runState == 1"
                           size="small"
                           icon="el-icon-video-pause"
                           @click="setReportStatus(scope.row)">停止
                </el-button>
                <el-button type="text"
                           v-if="uid == scope.row.userId"
                           size="small"
                           icon="el-icon-printer"
                           @click="setAutoPrint(scope.row)">打印
                </el-button>
                <el-button type="text"
                           v-if="uid == scope.row.userId"
                           size="small"
                           icon="el-icon-user"
                           @click="setUserGroupEvent(scope.row)">授权
                </el-button>
                <el-button type="text"
                           v-if="uid == scope.row.userId"
                           size="small"
                           icon="el-icon-document"
                           @click="getUserGroupEvent(scope.row)">授权详情
                </el-button>
                <el-button type="text"
                           v-if="uid == scope.row.userId"
                           size="small"
                           icon="el-icon-delete"
                           style="color: red;"
                           @click="removeReportItem(scope.row)">删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-empty v-else description="暂无数据"></el-empty>
        </div>
        <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="reportPage"
            :page-size="reportLimit"
            layout="sizes, prev, pager, next, total"
            :total="reportTotal">
        </el-pagination>
      </div>
      <div class="cy-main-right" :style="showMainView ? '' : 'display: none;'">
        <el-row v-if="btnType == 'add'" style="margin: 10px 20px;">
          <el-button type="primary" size="mini" icon="el-icon-document" @click="saveReportInfo">保存报表</el-button>
          <el-button type="danger" size="mini" icon="el-icon-circle-close" @click="cancelSaveReport">取消</el-button>
        </el-row>
        <el-row v-if="btnType == 'show'" style="margin: 10px 20px;">
          <el-button type="success" size="mini" icon="el-icon-document-checked" @click="updateReport">保存</el-button>
          <el-button type="primary" size="mini" icon="el-icon-download" @click="downloadReport">下载</el-button>
          <el-button type="warning" size="mini" icon="el-icon-printer" @click="printExcel">打印</el-button>
          <el-button type="info" size="mini" icon="el-icon-document" @click="historyReport">运行记录</el-button>
          <el-button type="danger" size="mini" icon="el-icon-circle-close" @click="cancelSaveReport">关闭</el-button>
        </el-row>
        <el-row v-if="btnType == 'showShared'" style="margin: 10px 20px;">
          <el-button type="primary" size="mini" icon="el-icon-download" @click="downloadReport">下载</el-button>
          <el-button type="warning" size="mini" icon="el-icon-printer" @click="printExcel">打印</el-button>
          <el-button v-if="chooseMyReport && chooseMyReport.reportTableType != 0" type="info" size="mini"
                     icon="el-icon-document" @click="historyReport">运行记录
          </el-button>
          <el-button type="danger" size="mini" icon="el-icon-circle-close" @click="cancelSaveReport">关闭</el-button>
        </el-row>
        <el-row v-if="btnType == 'showChild'" style="margin: 10px 20px;">
          <el-button type="primary" size="mini" icon="el-icon-download" @click="downloadReport">下载</el-button>
          <el-button type="warning" size="mini" icon="el-icon-printer" @click="printExcel">打印</el-button>
          <el-button type="danger" size="mini" icon="el-icon-circle-close" @click="cancelSaveReport2">关闭</el-button>
        </el-row>
        <div id="luckysheet"
             style="margin:0px;padding:0px;position:relative;height:calc(100% - 50px);width:100%;left: 20px;top: 0px;bottom:0px;">
        </div>
      </div>
    </div>

    <!-- 新增报表 -->
    <el-dialog
        :title="reportDialogTitle"
        width="600px"
        top="10vh"
        center
        v-dialog-drag
        v-if="dialogReportTemplateVisible"
        :before-close="dialogClose"
        :visible.sync="dialogReportTemplateVisible"
        :close-on-click-modal="false"
        :append-to-body="true">
      <el-form ref="reportForm" :model="reportForm" :rules="reportRules" label-width="80px">
        <el-form-item label='报表名称' prop="reportTableName">
          <el-input placeholder="请输入报表名称" v-model="reportForm.reportTableName" maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="报表类型" prop="reportTableType" v-if="!reportForm.id">
          <el-radio-group v-model="reportForm.reportTableType" @input="changeReportType">
            <el-radio label="0">手动报表</el-radio>
            <el-radio label="1">自动报表</el-radio>
            <el-radio label="2">事件驱动报表</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="报表模板" prop="tableTemplateId" v-if="!reportForm.id">
          <el-select v-model="reportForm.tableTemplateId" filterable placeholder="请选择报表模板" style="width: 100%;">
            <el-option
                v-for="item in reportTemplateList"
                :key="item.id"
                :label="item.templateName"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="时间范围" prop="dateRange" v-if="reportForm.reportTableType == 1">
          <el-date-picker
              v-model="reportForm.dateRange"
              type="datetimerange"
              :clearable="false"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              placeholder="选择取值时间范围"
              :picker-options="{
                      format: 'yyyy-MM-dd HH:mm:ss'
                    }"
              value-format="yyyy-MM-dd HH:mm:ss"
              :default-time="['09:00:00', '18:00:00']">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="运行时间" prop="cronLabel" v-if="reportForm.reportTableType == 1">
          <el-input placeholder="请设置运行时间" v-model="reportForm.cronLabel" style="width: calc(100% - 105px);"
                    readonly></el-input>
          <el-button size="mini" @click="settingAutoReportTime" style="float: right;width: 100px;line-height: 20px;">
            设置运行时间
          </el-button>
        </el-form-item>
      </el-form>
      <span slot='footer'>
        <el-button type="primary" @click="chooseReportEvent" style="margin-top: 20px;">确定</el-button>
        <el-button @click="dialogClose" style="margin-top: 20px;">取消</el-button>
      </span>
    </el-dialog>

    <!-- 配置打印定时任务 -->
    <el-dialog
        :title="printDialogTitle"
        width="700px"
        top="10vh"
        center
        v-dialog-drag
        v-if="dialogAutoPrintVisible"
        :before-close="dialogClose"
        :visible.sync="dialogAutoPrintVisible"
        :close-on-click-modal="false"
        :append-to-body="true">
      <el-form ref="reportForm" :model="reportForm" :rules="reportRules" label-width="80px">
        <el-radio-group v-model="radioByCron">
          <el-form-item label="秒">
            <el-radio :label="1">
              <span style="margin-right: 10px;">每</span>
              <el-input-number size="mini" v-model="radioByCronValS" :min="1" :max="59"></el-input-number>
              <span style="margin-left: 10px;">秒执行一次</span>
            </el-radio>
          </el-form-item>
          <el-form-item label="分钟">
            <el-radio :label="2">
              <span style="margin-right: 10px;">每</span>
              <el-input-number size="mini" v-model="radioByCronValM" :min="1" :max="59"></el-input-number>
              <span style="margin-left: 10px;">分钟执行一次</span>
            </el-radio>
          </el-form-item>
          <el-form-item label="小时">
            <el-radio :label="3">
              <span style="margin-right: 10px;">每</span>
              <el-input-number size="mini" v-model="radioByCronValH" :min="1" :max="2"></el-input-number>
              <span style="margin-left: 10px;">小时执行一次</span>
            </el-radio>
          </el-form-item>
          <el-form-item label="指定时间">
            <el-radio :label="4">
              <span style="margin-right: 10px;">在每天的</span>
              <el-time-picker v-model="radioByCronValD"
                              size="mini"
                              placeholder="请选择时间"
                              :clearable="false"
                              :editable="false"
                              value-format="HH:mm:ss"
                              :picker-options="{
                                format: 'HH:mm:ss'
                              }">
              </el-time-picker>
              <span style="margin-left: 10px;">执行一次</span>
            </el-radio>
          </el-form-item>
          <el-form-item label="">
            <el-radio :label="5">
              <span style="margin-right: 10px;">在每月</span>
              <el-input-number size="mini" v-model="radioByCronValMo" :min="1" :max="31"></el-input-number>
              <span style="margin-right: 10px; margin-left: 10px;">号的</span>
              <el-time-picker v-model="radioByCronValMoD"
                              size="mini"
                              placeholder="请选择时间"
                              :clearable="false"
                              :editable="false"
                              value-format="HH:mm:ss"
                              :picker-options="{
                                format: 'HH:mm:ss'
                              }">
              </el-time-picker>
              <span style="margin-left: 10px;">执行一次</span>
            </el-radio>
          </el-form-item>
        </el-radio-group>
      </el-form>
      <span slot='footer'>
        <el-button type="primary" @click="chooseCronPrint" style="margin-top: 20px;">确定</el-button>
        <el-button type="warning" v-if="printForm.runState==1" @click="stopAutoPrint"
                   style="margin-top: 20px;">停止</el-button>
        <el-button type="warning" disabled v-if="printForm.runState!=1" @click="stopAutoPrint"
                   style="margin-top: 20px;">停止</el-button>
        <el-button @click="dialogClose" style="margin-top: 20px;">取消</el-button>
      </span>
    </el-dialog>

    <!-- 用户组选择 -->
    <el-dialog
        title="选择用户组"
        width="840px"
        top="10vh"
        center
        v-dialog-drag
        v-if="dialogUserGroupVisible"
        :before-close="dialogClose"
        :visible.sync="dialogUserGroupVisible"
        :close-on-click-modal="false"
        :append-to-body="true">
      <!--      <el-form label-width="80px">-->
      <!--        <el-form-item label="用户组">-->
      <!--          <el-select v-model="userGroupInfo" filterable clearable multiple placeholder="请选择用户组" style="width: 100%;">-->
      <!--            <el-option-->
      <!--                v-for="item in userGroupList"-->
      <!--                :key="item.id"-->
      <!--                :label="item.userGroupName"-->
      <!--                :value="item.id">-->
      <!--            </el-option>-->
      <!--          </el-select>-->
      <!--        </el-form-item>-->
      <!--      </el-form>-->
      <div class="ug-div">
        <el-transfer
            v-model="userGroupInfo"
            :titles="['用户组列表', '已选择用户组']"
            :data="userGroupList"
            :props="{
              key: 'id',
              label: 'userGroupName'
            }">
        </el-transfer>
      </div>
      <span slot='footer'>
        <el-button type="primary" @click="chooseUserGroupEvent" style="margin-top: 20px;">确定</el-button>
        <el-button @click="dialogClose" style="margin-top: 20px;">取消</el-button>
      </span>
    </el-dialog>

    <!-- 自动报表CRON定时表达式 -->
    <el-dialog
        title="配置定时任务"
        width="700px"
        top="10vh"
        center
        v-dialog-drag
        v-if="dialogAutoReportVisible"
        :before-close="dialogClose"
        :visible.sync="dialogAutoReportVisible"
        :close-on-click-modal="false"
        :append-to-body="true">
      <el-form label-width="80px">
        <el-radio-group v-model="radioByCron">
          <el-form-item label="秒">
            <el-radio :label="1">
              <span style="margin-right: 10px;">每</span>
              <el-input-number size="mini" v-model="radioByCronValS" :min="1" :max="59"></el-input-number>
              <span style="margin-left: 10px;">秒执行一次</span>
            </el-radio>
          </el-form-item>
          <el-form-item label="分钟">
            <el-radio :label="2">
              <span style="margin-right: 10px;">每</span>
              <el-input-number size="mini" v-model="radioByCronValM" :min="1" :max="59"></el-input-number>
              <span style="margin-left: 10px;">分钟执行一次</span>
            </el-radio>
          </el-form-item>
          <el-form-item label="小时">
            <el-radio :label="3">
              <span style="margin-right: 10px;">每</span>
              <el-input-number size="mini" v-model="radioByCronValH" :min="1" :max="2"></el-input-number>
              <span style="margin-left: 10px;">小时执行一次</span>
            </el-radio>
          </el-form-item>
          <el-form-item label="指定时间">
            <el-radio :label="4">
              <span style="margin-right: 10px;">在每天的</span>
              <el-time-picker v-model="radioByCronValD"
                              size="mini"
                              placeholder="请选择时间"
                              :clearable="false"
                              :editable="false"
                              value-format="HH:mm:ss"
                              :picker-options="{
                                format: 'HH:mm:ss'
                              }">
              </el-time-picker>
              <span style="margin-left: 10px;">执行一次</span>
            </el-radio>
          </el-form-item>
          <el-form-item label="">
            <el-radio :label="5">
              <span style="margin-right: 10px;">在每月</span>
              <el-input-number size="mini" v-model="radioByCronValMo" :min="1" :max="31"></el-input-number>
              <span style="margin-right: 10px; margin-left: 10px;">号的</span>
              <el-time-picker v-model="radioByCronValMoD"
                              size="mini"
                              placeholder="请选择时间"
                              :clearable="false"
                              :editable="false"
                              value-format="HH:mm:ss"
                              :picker-options="{
                                format: 'HH:mm:ss'
                              }">
              </el-time-picker>
              <span style="margin-left: 10px;">执行一次</span>
            </el-radio>
          </el-form-item>
        </el-radio-group>
        <!--        <el-form-item label="表达式">-->
        <!--          <el-input type="text" placeholder="请输入定时任务表达式" v-model="cronVal" maxlength="50"></el-input>-->
        <!--        </el-form-item>-->
        <!--        <div>-->
        <!--          <label>常用定时任务表达式例子</label>-->
        <!--          <ul>-->
        <!--            <li v-for="(item, i) in cronList" style="margin-bottom: 5px;">-->
        <!--              <span class="cron-txt" @click="cronNodeEvent(item)">{{ item.value }}</span>-->
        <!--              <span class="cron-txt-desc">{{ item.label }}</span>-->
        <!--            </li>-->
        <!--          </ul>-->
        <!--        </div>-->
      </el-form>
      <span slot='footer'>
          <el-button type="primary" @click="chooseCronEvent">确定</el-button>
        <!--          <el-button @click="dialogClose">取消</el-button>-->
      </span>
    </el-dialog>

    <!-- 报表类型 -->
    <el-dialog
        title="报表类型选择"
        width="50%"
        top="10vh"
        center
        v-dialog-drag
        v-if="dialogReportTypeVisible"
        :before-close="dialogClose"
        :visible.sync="dialogReportTypeVisible"
        :close-on-click-modal="false"
        :append-to-body="true">
      <div style="text-align: center;">
        <el-radio v-model="reportType" label="0">手动报表</el-radio>
        <el-radio v-model="reportType" label="1">自动报表</el-radio>
        <el-radio v-model="reportType" label="2">事件驱动报表</el-radio>
      </div>
      <span slot='footer'>
          <el-button type="primary" @click="chooseReportTypeEvent">确定</el-button>
          <el-button @click="dialogClose">取消</el-button>
      </span>
    </el-dialog>

    <!-- 报表下载类型选择 -->
    <el-dialog
        title="选择下载类型"
        width="500px"
        center
        v-dialog-drag
        v-if="dialogDownloadReportTypeVisible"
        :before-close="dialogClose"
        :visible.sync="dialogDownloadReportTypeVisible"
        :close-on-click-modal="false"
        :append-to-body="true">
      <div style="text-align: center;">
        <el-radio v-model="downloadType" label="1">Excel</el-radio>
        <!--        <el-radio v-model="downloadType" label="2" disabled>PDF</el-radio>-->
      </div>
      <div style="text-align: center; margin-top: 40px;">
        <el-button type="primary" @click="downloadReportEvent">确定</el-button>
      </div>
    </el-dialog>

    <!-- 历史报表查看 -->
    <el-dialog
        title="运行报表记录"
        width="80%"
        top="10vh"
        center
        v-dialog-drag-and-zoom
        v-if="dialogHistoryReportVisible"
        :before-close="dialogClose"
        :visible.sync="dialogHistoryReportVisible"
        :close-on-click-modal="false"
        :append-to-body="true">
      <div style="height: 60vh;">
        <div style="margin-bottom: 10px; float: right;">
          <el-input placeholder="请输入报表名称"
                    v-model="searchHistoryTxt"
                    style="margin-left: 5px; width: 300px;"
                    prefix-icon="el-icon-search">
          </el-input>
          <el-button type="primary" style="margin-left: 5px;" @click="searchHistoryReportEvent">查询</el-button>
        </div>
        <el-table
            :data="reportHistoryData" border :stripe="true"
            :header-cell-style="{background: '#E8E8E8'}"
            @sort-change="sortChange1"
            style="width: 100%; height: calc(100% - 100px); overflow: auto;">
          <el-table-column
              align="center"
              sortable="custom"
              label="报表名称"
              prop="reportTableName">
            <template slot-scope="scope">
                <span style="color: #409EFF; cursor: pointer;"
                      @click="handleReportNodeClick(scope.row, 'history')"
                      :title="scope.row.reportTableName">{{ scope.row.reportTableName }}</span>
            </template>
          </el-table-column>
          <!--          <el-table-column-->
          <!--              align="center"-->
          <!--              label="报表状态"-->
          <!--              prop="isAutoReport"-->
          <!--              width="180">-->
          <!--            <template slot-scope="scope">-->
          <!--              <el-tag v-if="scope.row.userId != uid" type="success" style="margin-right: 5px;">被分享</el-tag>-->
          <!--              <el-tag v-if="uid == scope.row.userId && scope.row.userGroupList && scope.row.userGroupList.length > 0"-->
          <!--                      type="warning" style="margin-right: 5px;">已分享</el-tag>-->
          <!--            </template>-->
          <!--          </el-table-column>-->
          <!--          <el-table-column-->
          <!--              align="center"-->
          <!--              label="当前版本"-->
          <!--              sortable="custom"-->
          <!--              prop="version"-->
          <!--              width="120">-->
          <!--          </el-table-column>-->
          <el-table-column
              align="center"
              label="运行时间"
              sortable
              prop="createTime"
              width="200">
          </el-table-column>
          <el-table-column label="操作" align="center" width="300">
            <template slot-scope="scope">
              <el-button type="text"
                         v-if="uid == scope.row.userId"
                         size="small"
                         icon="el-icon-delete"
                         style="color: red;"
                         @click="removeReportItem(scope.row, 'record')">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
            style="margin-top: 20px;"
            background
            layout="sizes, prev, pager, next, total"
            :current-page="reportHistoryPage"
            :page-size="reportHistoryLimit"
            @size-change="sizeHistoryChangeEvent"
            @current-change="currentHistoryChangeEvent"
            :total="reportHistoryTotal">
        </el-pagination>
      </div>
    </el-dialog>

    <!-- 用户组用户人员查看 -->
    <el-dialog
        title="授权详情"
        width="600px"
        top="10vh"
        center
        v-dialog-drag
        v-if="dialogGroupUserVisible"
        :before-close="dialogGroupUserClose"
        :visible.sync="dialogGroupUserVisible"
        :close-on-click-modal="false"
        :append-to-body="true">
      <div style="height: 60vh;">
        <el-table
            :data="groupUserData" border :stripe="true"
            :header-cell-style="{background: '#E8E8E8'}"
            style="width: 100%; height: calc(100% - 50px); overflow: auto;">
          <el-table-column
              align="center"
              label="用户组名称"
              prop="userGroupName">
          </el-table-column>
          <el-table-column
              align="center"
              label="姓名"
              prop="userName">
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>

    <div id="print-area"
         style="display: none;position: absolute;z-index: 0;top: 0;width: 100%;height: 100vh;overflow: hidden;">
      <div id="print-html" ref="printPayFeeNew"></div>
    </div>
  </div>
</template>

<script>
import BreadcrumbView from '@/components/BreadcrumbView'
import {
  customCompare,
  getLuckysheetConfig,
  getNowFormatDate, showAlertMsgWin,
  showAlertWin, showConfirmWin,
  showLoading, showPromptWin
} from '@/utils/cqcy'
import {
  delReportTableById,
  getAllDataModel,
  getAllOkReportTable,
  getAllTableTemplate,
  getAutoChReportTable,
  getChartData,
  getDataModelById,
  getReportTableById,
  getTableData,
  getTableTemplateById,
  getUserByGroupId, runAutoTableById,
  saveReport, setAutoTableTime,
  tableAssignUserById,
  tableExchangeTypeById,
  updateReportTable,
  updateTableNameById,
  getPrintByReportId,
  addPrint,
  stopAutoPrintById
} from '@/api/datasource'
import Print from 'print-js'
import {getUsername} from '@/utils/auth'
import {exportExcel} from '@/utils/export'
import {getAllUserGroup} from "@/api/user";
import {mapGetters} from "vuex";
import {insertLuckysheetEChart} from "@/utils/luckysheettool";
import cqcyCode from "@/utils/cqcyCode";

export default {
  name: "index",
  components: {
    BreadcrumbView
  },
  computed: {
    ...mapGetters([
      'name',
      'uid'
    ])
  },
  data() {
    return {
      breadcrumbList: ['运行配置'],
      groupProps: {
        isLeaf: 'leaf'
      },
      reportDialogTitle: '新增报表',
      showMainView: false,
      chooseMyReport: null,
      chooseCurrMyReport: null,
      dialogReportTemplateVisible: false,
      dialogDownloadReportTypeVisible: false,
      dialogAutoReportVisible: false,
      dialogReportTypeVisible: false,
      dialogUserGroupVisible: false,
      dialogHistoryReportVisible: false,
      dialogGroupUserVisible: false,
      dialogAutoPrintVisible: false,
      reportType: '0',
      downloadType: '1',
      btnType: '',
      hasUserGroup: false,
      userGroupInfo: null,
      userGroupList: [],
      radioByCron: null,
      radioByCronValS: '',
      radioByCronValM: '',
      radioByCronValH: '',
      radioByCronValD: null,
      radioByCronValMo: '',
      radioByCronValMoD: null,
      cronVal: '',
      cronList: [],
      reportId: null,
      reportTemplateList: [],
      dataModelList: [],
      chooseReportTemplate: null,
      chooseReportTemplateId: null,
      chooseIsAutoReport: null,
      delFlag: 0,
      reportForm: {
        id: null,
        reportTableName: '',
        reportTableType: null,
        tableTemplateId: null,
        reportTableData: '',
        cronLabel: '',
        cron: '',
        dateRange: ''
      },
      printDialogTitle: '打印任务配置',
      printForm: {
        id: null,
        reportTableId: null,
        cronId: '',
        cron: '',
        runState: null
      },
      searchValue: null,
      searchTxt: '',
      searchHistoryTxt: '',
      reportOptions: [{
        label: '所有报表',
        value: -1
      }, {
        label: '手动报表',
        value: 0
      }, {
        label: '自动报表',
        value: 1
      }, {
        label: '事件驱动报表',
        value: 2
      }],
      groupUserData: [],
      reportHistoryData: [],
      reportHistoryTotal: 0,
      reportHistoryPage: 1,
      reportHistoryLimit: 10,
      reportTotal: 0,
      reportPage: 1,
      reportLimit: 10,
      reportDataList: [],
      reportInterval: 30 * 1000, // 手动报表更新数据频率
      reportIntervalTag: null,
      reportRules: {
        reportTableName: [
          {required: true, message: '请输入报表名称', trigger: 'blur'}
        ],
        reportTableType: [
          {required: true, message: '请选择报表类型', trigger: 'change'}
        ],
        tableTemplateId: [
          {required: true, message: '请选择报表模板', trigger: 'change'}
        ]
      },
      luckysheetOption: {
        container: 'luckysheet', // 设定 DOM 容器的 id
        title: '报表模板', // 设定表格名称
        lang: 'zh', // 设定表格语言
        showinfobar: false, // 是否显示顶部信息栏
        showtoolbar: false, // 是否显示工具栏
        showtoolbarConfig: {
          paintFormat: true, //格式刷
          moreFormats: true, // 单元格格式
          font: true, // 字体
          fontSize: true, // 字号大小
          bold: true, // 粗体 (Ctrl+B)
          italic: true, // 斜体 (Ctrl+I)
          strikethrough: true, // 删除线 (Alt+Shift+5)
          underline: true, // 下划线 (Alt+Shift+6)
          textColor: true, // 文本颜色
          fillColor: true, // 单元格颜色
          border: true, // 边框
          mergeCell: true, // 合并单元格
          horizontalAlignMode: true, // 水平对齐方式
          verticalAlignMode: true, // 垂直对齐方式
          function: true, // 公式
          // image: true
          // chart: true
        },
        showsheetbar: false, // 是否显示底部 sheet 页按钮
        sheetFormulaBar: false, // 是否显示公式
        row: 120, // 是否显示底部 sheet 页按钮
        data: [{
          "name": "统计报表", //工作表名称
        }],
        cellRightClickConfig: { // 自定义配置单元格右击菜单
          copy: true, // 复制
          copyAs: false, // 复制为
          paste: true, // 粘贴
          insertRow: true, // 插入行
          insertColumn: true, // 插入列
          deleteRow: true, // 删除选中行
          deleteColumn: true, // 删除选中列
          deleteCell: false, // 删除单元格
          hideRow: false, // 隐藏选中行和显示选中行
          hideColumn: false, // 隐藏选中列和显示选中列
          rowHeight: true, // 行高
          columnWidth: true, // 列宽
          clear: false, // 清除内容
          matrix: false, // 矩阵操作选区
          sort: false, // 排序选区
          filter: false, // 筛选选区
          chart: true, // 图表生成
          image: false, // 插入图片
          link: false, // 插入链接
          data: false, // 数据验证
          cellFormat: false // 设置单元格格式
        },
        plugins: ['chart']
      }
    }
  },
  watch: {},
  beforeDestroy() {
    this.chooseMyReport = null
    this.chooseCurrMyReport = null
  },
  mounted() {
    let _this = this
    document.onkeyup = function (event) {
      let e = event || window.event || arguments.callee.caller.arguments[0]
      if (!e) return
      const {key, keyCode} = e
      if (keyCode === 46 || keyCode === 8) {
        _this.forceRefreshLuckysheet()
      }
    }
  },
  created() {
    luckysheet.destroy()
    this.loadReport()
    this.initCronList()
  },
  destroyed() {
    luckysheet.destroy()
  },
  methods: {
    /** 实现类似刷新效果 */
    forceRefreshLuckysheet() {
      if (luckysheet) {
        luckysheet.setCellValue(49, 0, luckysheet.getCellValue(49, 0))
      }
    },
    sortChange({prop, order}) {
      this.reportDataList.sort(customCompare(prop, order))
    },
    sortChange1({prop, order}) {
      this.reportHistoryData.sort(customCompare(prop, order))
    },
    handleSizeChange(val) {
      this.reportPage = 1
      this.reportLimit = val
      this.loadReport()
    },
    handleCurrentChange(val) {
      this.reportPage = val
      this.loadReport()
    },
    sizeHistoryChangeEvent(val) {
      this.reportHistoryPage = 1
      this.reportHistoryLimit = val
      this.historyReport()
    },
    currentHistoryChangeEvent(val) {
      this.reportHistoryPage = val
      this.historyReport()
    },
    searchHistoryReportEvent() {
      this.reportHistoryPage = 1
      this.historyReport()
    },
    changeReportTypeEvent(val) {
      this.reportPage = 1
      this.searchValue = val
      this.loadReport()
    },
    searchReportEvent() {
      this.reportPage = 1
      this.loadReport()
    },
    /** 验证CRON是否正确 */
    validCron(value) {
      const cronParse = require('cron-parser')
      try {
        const interval = cronParse.parseExpression(value)
        console.log('cronDate:', interval.next().toDate())
        return true
      } catch (e) {
      }
      return false
    },
    /** 解析数据运行表达式 */
    analysisCron(val) {
      if (!val) return
      let s = val.split(' ')
      if (s[0].indexOf('/') > -1) {
        this.radioByCron = 1
        this.radioByCronValS = parseInt(s[0].split('/')[1])
      } else if (s[1].indexOf('/') > -1) {
        this.radioByCron = 2
        this.radioByCronValM = parseInt(s[1].split('/')[1])
      } else if (s[2].indexOf('/') > -1) {
        this.radioByCron = 3
        this.radioByCronValH = parseInt(s[2].split('/')[1])
      } else if (s[3] === '*') {
        this.radioByCron = 4
        this.radioByCronValD = s[2] + ':' + s[1] + ':' + s[0]
      } else {
        this.radioByCron = 5
        this.radioByCronValMo = parseInt(s[3])
        this.radioByCronValMoD = s[2] + ':' + s[1] + ':' + s[0]
      }
    },
    /** 获取自动报表运行表达式 */
    getCron() {
      let result = null
      switch (this.radioByCron) {
          // 按每秒执行：0/2 * * * * ?
        case 1:
          if (Number.isInteger(this.radioByCronValS)) {
            result = '0/#{cron} * * * * ?'
            result = result.replace('#{cron}', this.radioByCronValS)
          }
          break
          // 按每分钟执行：0 0/2 * * * ?
        case 2:
          if (Number.isInteger(this.radioByCronValM)) {
            result = '0 0/#{cron} * * * ?'
            result = result.replace('#{cron}', this.radioByCronValM)
          }
          break
          // 按每小时执行：0 0 0/2 * * ?
        case 3:
          if (Number.isInteger(this.radioByCronValH)) {
            result = '0 0 0/#{cron} * * ?'
            result = result.replace('#{cron}', this.radioByCronValH)
          }
          break
          // 每天定时执行：0 15 10 * * ?
        case 4:
          if (this.radioByCronValD) {
            let times = this.radioByCronValD.split(':')
            result = '#{cron1} #{cron2} #{cron3} * * ?'
            result = result.replace('#{cron1}', times[2])
            result = result.replace('#{cron2}', times[1])
            result = result.replace('#{cron3}', times[0])
            result = result.replace(/00/g, '0')
          }
          break
          // 每月定时执行：0 0 2 1 * ?
        case 5:
          if (Number.isInteger(this.radioByCronValMo) && this.radioByCronValMoD) {
            let times = this.radioByCronValMoD.split(':')
            result = '#{cron1} #{cron2} #{cron3} #{cron4} * ?'
            result = result.replace('#{cron1}', times[2])
            result = result.replace('#{cron2}', times[1])
            result = result.replace('#{cron3}', times[0])
            result = result.replace('#{cron4}', this.radioByCronValMo)
            result = result.replace(/00/g, '0')
          }
          break
        default:
          break
      }
      return result
    },
    /** 获取自动报表运行表达式名称 */
    getCronLabel() {
      let result = null
      switch (this.radioByCron) {
          // 按每秒执行：0/2 * * * * ?
        case 1:
          if (Number.isInteger(this.radioByCronValS)) {
            result = '每#{cron}秒执行一次'
            result = result.replace('#{cron}', this.radioByCronValS)
          }
          break
          // 按每分钟执行：0 0/2 * * * ?
        case 2:
          if (Number.isInteger(this.radioByCronValM)) {
            result = '每#{cron}分钟执行一次'
            result = result.replace('#{cron}', this.radioByCronValM)
          }
          break
          // 按每小时执行：0 0 0/2 * * ?
        case 3:
          if (Number.isInteger(this.radioByCronValH)) {
            result = '每#{cron}小时执行一次'
            result = result.replace('#{cron}', this.radioByCronValH)
          }
          break
          // 每天定时执行：0 15 10 * * ?
        case 4:
          if (this.radioByCronValD) {
            let times = this.radioByCronValD.split(':')
            result = '每天#{cron3}:#{cron2}:#{cron1}执行一次'
            result = result.replace('#{cron1}',
                (times[2].length < 2 && parseInt(times[2]) < 10) ? ('0' + times[2]) : times[2])
            result = result.replace('#{cron2}',
                (times[1].length < 2 && parseInt(times[1]) < 10) ? ('0' + times[1]) : times[1])
            result = result.replace('#{cron3}',
                (times[0].length < 2 && parseInt(times[0]) < 10) ? ('0' + times[0]) : times[0])
            // result = result.replace(/00/g, '0')
          }
          break
          // 每月定时执行：0 0 2 1 * ?
        case 5:
          if (Number.isInteger(this.radioByCronValMo) && this.radioByCronValMoD) {
            let times = this.radioByCronValMoD.split(':')
            result = '每月#{cron4}号的#{cron3}:#{cron2}:#{cron1}执行一次'
            result = result.replace('#{cron1}',
                (times[2].length < 2 && parseInt(times[2]) < 10) ? ('0' + times[2]) : times[2])
            result = result.replace('#{cron2}',
                (times[1].length < 2 && parseInt(times[1]) < 10) ? ('0' + times[1]) : times[1])
            result = result.replace('#{cron3}',
                (times[0].length < 2 && parseInt(times[0]) < 10) ? ('0' + times[0]) : times[0])
            result = result.replace('#{cron4}', this.radioByCronValMo)
            // result = result.replace(/00/g, '0')
          }
          break
        default:
          break
      }
      return result
    },
    /** 选择定时任务表达式 */
    chooseCronEvent() {
      if (!this.getCron()) {
        showAlertMsgWin(this, null, '请指定定时任务类型或运行时间！')
        return
      }
      this.reportForm.cron = this.getCron()
      this.reportForm.cronLabel = this.getCronLabel()
      if (!this.validCron(this.reportForm.cron)) {
        showAlertMsgWin(this, null, '定时任务表达式格式不正确！')
        return
      }
      this.dialogAutoReportVisible = false
    },
    resetRadioVal() {
      this.radioByCron = null
      this.radioByCronValS = ''
      this.radioByCronValM = ''
      this.radioByCronValH = ''
      this.radioByCronValD = null
      this.radioByCronValMo = ''
      this.radioByCronValMoD = null
      this.cronVal = ''
    },
    chooseReportTypeEvent() {
      if (!this.reportType) {
        showAlertMsgWin(this, null, '请选择报表类型！')
        return
      }
      // 自动报表
      if (this.reportType == '1') {
        this.resetRadioVal()
        getReportTableById(this.reportId).then(res => {
          this.dialogAutoReportVisible = true
          this.cronVal = res.data.cron
          this.analysisCron(this.cronVal)
        }).catch((e) => {
          showAlertWin(this, null, e)
        })
        return
      }
      const loading = showLoading(this, '请稍候···')
      let params = {
        'id': this.reportId,
        'isAutoReport': this.reportType
      }
      tableExchangeTypeById(params).then(res => {
        loading.close()
        this.dialogClose()
        this.loadReport()
      }).catch((e) => {
        loading.close()
        showAlertWin(this, null, e)
      })
    },
    switchChangeEvent(val, data) {
      this.reportId = data.id
      if (val) {
        this.resetRadioVal()
        this.dialogAutoReportVisible = true
        getReportTableById(data.id).then(res => {
          this.cronVal = res.data.cron
          this.analysisCron(this.cronVal)
        }).catch((e) => {
          showAlertWin(this, null, e)
        })
        return
      }
      this.dialogReportTypeVisible = true
    },
    /** 修改自动报表运行状态 */
    setReportStatus(data) {
      let status = data.runState == 0 ? '启动' : '停止'
      let tips = '您确定要' + status + '该报表吗？'
      showConfirmWin(this, null, tips, () => {
        const loading = showLoading(this, status + '中，请稍候···')
        let params = {
          'id': data.id,
          'runState': data.runState == 0 ? 1 : 0
        }
        runAutoTableById(params).then(res => {
          loading.close()
          let msg = res.data ? status + '成功！' : status + '失败！'
          showAlertMsgWin(this, null, msg)
          this.reportPage = 1
          this.loadReport()
        }).catch((e) => {
          loading.close()
          showAlertWin(this, null, e)
        })
      })
    },
    /** 初始化报表信息 */
    resetReportFormVal() {
      this.reportForm = {
        id: null,
        reportTableName: '',
        reportTableType: null,
        tableTemplateId: null,
        reportTableData: '',
        cronLabel: '',
        cron: '',
        dateRange: ''
      }
    },
    /** 报表类型更改事件 */
    changeReportType() {
      this.reportForm.tableTemplateId = null
      this.getAllReportTemplate(this.reportForm.reportTableType)
    },
    /** 新增报表 */
    addReportEvent() {
      this.resetReportFormVal()
      this.reportDialogTitle = '新增报表'
      this.dialogReportTemplateVisible = true
    },
    /** 刷新报表 */
    refreshReportEvent() {
      this.reportPage = 1
      this.loadReport()
    },
    /** 设置自动报表运行时间 */
    settingAutoReportTime() {
      if (this.reportForm.cron) {
        this.analysisCron(this.reportForm.cron)
      } else {
        this.resetRadioVal()
      }
      this.dialogAutoReportVisible = true
    },
    /** 模版报表选择 */
    chooseReportEvent() {
      // 判断是否自动报表
      if (this.reportForm.reportTableType == 1 && this.reportForm.dateRange.length == 0) {
        showAlertMsgWin(this, null, '请选择时间范围！')
        return
      }
      if (this.reportForm.reportTableType == 1 && !this.reportForm.cron) {
        showAlertMsgWin(this, null, '请设置自动报表运行时间！')
        return
      }
      this.$refs['reportForm'].validate((valid) => {
        if (valid) {
          const loading = showLoading(this, '数据加载中，请稍候···')
          getTableTemplateById(this.reportForm.tableTemplateId).then(res => {
            if (!res.data) {
              loading.close()
              showAlertMsgWin(this, null, '选择的报表模板不存在！')
              return
            }
            let luckyData = JSON.parse(res.data.templateData)
            if (this.reportForm.id) {
              this.updateReportInfo(loading, luckyData)
            } else {
              this.saveReportInfo(loading, luckyData)
            }
          }).catch((e) => {
            loading.close()
            showAlertWin(this, null, e)
          })
        }
      })
    },
    /** 根据 ID 查询数据模型 */
    getDataModelById(loading, reportData) {
      if (!loading) {
        loading = showLoading(this, '数据加载中，请稍候···')
      }
      getDataModelById(this.reportForm.operationRule).then(res => {
        loading.close()
        if (!res.data) {
          showAlertMsgWin(this, null, '选择的四则运算表达式不存在！')
          return
        }
        let luckyData = JSON.parse(reportData.templateData)
        this.drawLuckyExcel(luckyData)
        this.btnType = 'add'
        this.dialogReportTemplateVisible = false
      }).catch((e) => {
        loading.close()
        showAlertWin(this, null, e)
      })
    },
    /** 绘制 Excel 表 */
    drawLuckyExcel(luckyData, callback) {
      let _this = this
      luckysheet.destroy()
      let option = luckyData.option
      option.data = luckyData.data
      let charts = luckyData.charts
      let tables = luckyData.tables
      option.hook = {
        workbookCreateAfter() {
          console.log(luckyData)
          for (let i in charts) {
            _this.insertEChartInfo(charts[i])
          }
          for (let i in tables) {
            _this.insertTableInfo(tables[i])
          }
          _this.drawBaseInfo()
          if (callback) {
            callback()
          }
        },
        cellUpdated(r, c, newV, oldV) {
          if (!(r === 49 && c === 0)) {
            _this.forceRefreshLuckysheet()
          }
        }
      }
      luckysheet.create(option)
    },
    /** 获取图表数据 */
    getChartData(data, callback) {
      getChartData(data).then(res => {
        if (!res.data) {
          if (callback) callback([])
          return
        }
        if (callback) callback(res.data)
      }).catch((e) => {
        if (callback) callback([])
        showAlertWin(this, null, e)
      })
    },
    /** 获取表格数据 */
    getTableData(data, callback) {
      getTableData(data).then(res => {
        if (!res.data) {
          if (callback) callback([])
          return
        }
        if (callback) callback(res.data)
      }).catch((e) => {
        if (callback) callback([])
        showAlertWin(this, null, e)
      })
    },
    /** 向 Excel 插入表格 */
    insertTableInfo(tableData) {
      let params = []
      let itemList = tableData.item
      for (let i in itemList) {
        let temp = itemList[i]
        params.push({
          'itemGroupId': temp.itemGroupId,
          'itemName': temp.itemName
        })
      }
      let p = {
        'reportValueFormat': this.reportForm.reportValueFormat,
        'valueCondition': this.reportForm.valueCondition,
        'tableDataDtoChList': params,
        'showType': tableData.showType
      }
      if (this.reportForm.reportDate && this.reportForm.reportDate.length > 0) {
        p.startBelongTime = this.reportForm.reportDate[0]
        p.endBelongTime = this.reportForm.reportDate[1]
      } else {
        p.startBelongTime = getNowFormatDate('yyyy-MM-dd') + ' 08:00:00'
        p.endBelongTime = getNowFormatDate('yyyy-MM-dd') + ' 18:00:00'
      }

      this.getTableData(p, (res) => {
        // console.log('option==>', luckysheet.getAllSheets()[0])
        // console.log('table1==>', res)
        // const optionData = packtable(res, luckysheet.getAllSheets()[0])
        // console.log('table2==>', optionData)
        setTimeout(() => {
          // this.drawTableData(res, p.showType, luckysheet.getAllSheets()[0])
        }, 500)
      })
    },
    /** 初始化表格基础数据项值 */
    initBaseInfoData(data) {
      let currDate = getNowFormatDate('yyyy-MM-dd')
      let currDateTime = getNowFormatDate('yyyy-MM-dd HH:mm:ss')
      data.baseItem = {
        'currDate': currDate,
        'currDateTime': currDateTime,
        'userName': getUsername(),
        'winUserName': process.env.VUE_APP_WINNAME
      }
      return data
    },
    /** 绘制基础数据项布局信息 */
    drawBaseInfo(baseData) {
      if (!baseData) return
      let option = luckysheet.getAllSheets()[0]
      option.celldata.map(item => {
        if (item.v.v) {
          item.v.v = String(item.v.v).trim()
          if (item.v.v.match(/\${([^}]+)}/g)) { // 替换${xxx}内部数据
            if (item.v.v.indexOf('${currDate}') > -1) {
              let val = item.v.v
              val = val.replace('${currDate}', baseData.currDate)
              luckysheet.setCellValue(item.r, item.c, val)
            }
            if (item.v.v.indexOf('${currDateTime}') > -1) {
              let val = item.v.v
              val = val.replace('${currDateTime}', baseData.currDateTime)
              luckysheet.setCellValue(item.r, item.c, val)
            }
            if (item.v.v.indexOf('${userName}') > -1) {
              let val = item.v.v
              val = val.replace('${userName}', baseData.userName)
              luckysheet.setCellValue(item.r, item.c, val)
            }
            if (item.v.v.indexOf('${winUserName}') > -1) {
              let val = item.v.v
              val = val.replace('${winUserName}', baseData.winUserName)
              luckysheet.setCellValue(item.r, item.c, val)
            }
          }
        }
      })
    },
    /** 绘制表格数据 */
    drawTableData(tableItemList, type) {
      if (!tableItemList || tableItemList.length == 0) return
      // 事件驱动报表
      if (type == 2 || type == 4) {
        tableItemList.forEach((tableItem, i) => {
          let valueList = tableItem.valueList ? tableItem.valueList.split(',') : []
          let xAxis = tableItem.xaxis
          let yAxis = tableItem.yaxis
          if (valueList.length == 0) {
            luckysheet.setCellValue(xAxis, yAxis, '')
          } else {
            valueList.forEach((v, j) => {
              luckysheet.setCellValue(xAxis + j, yAxis, v)
            })
          }
        })
        return
      }
      // 其余报表信息
      tableItemList.forEach((tableItem, i) => {
        let standby = tableItem.standby ? JSON.parse(tableItem.standby) : {}
        let dataIndex = standby.index != null ? standby.index : -1
        let valueList = tableItem.valueList ? tableItem.valueList.split(',') : []
        let val = (dataIndex == -1 || (dataIndex + 1) > valueList.length)
            ? cqcyCode['invalidData'] : valueList[dataIndex]
        let xAxis = tableItem.xaxis
        let yAxis = tableItem.yaxis
        try {
          luckysheet.setCellValue(xAxis, yAxis, val)
        } catch (e) {
          console.warn(e)
        }
      })
    },
    /** 向 Excel 插入图表 */
    insertEChartInfo(chart) {
      let _self = this
      let info = JSON.parse(chart.standby)
      let reportChartItemList = chart.reportChartItemList
      let chartType = chart.chartType
      // 系列
      let series = info.option.series
      for (let i in series) {
        let temp = series[i]
        temp.data = []
        for (let j in reportChartItemList) {
          let _name = reportChartItemList[j].describe ? reportChartItemList[j].describe : reportChartItemList[j].itemName
          if (chartType == 'pie') {
            temp.name = _name
            temp.data.push({
              'name': _name,
              'value': reportChartItemList[j].valueList
            })
          } else {
            let _t = []
            let t = reportChartItemList[i].valueList ? reportChartItemList[i].valueList.split(',') : []
            t.forEach((temp) => {
              _t.push(parseFloat(temp))
            })
            temp.data = _t
          }
        }
      }
      if (chartType != 'pie') {
        // x 轴
        let xAxis = info.option.xAxis
        let legend = info.option.legend
        // xAxis.data = []
        legend.data = []
        xAxis.data = (reportChartItemList && reportChartItemList.length > 0) ? reportChartItemList[0].dataTimeList : []
        // xAxis.data = xAxis.data.slice(0, 7)
        for (let i in reportChartItemList) {
          let name = reportChartItemList[i].describe ? reportChartItemList[i].describe : reportChartItemList[i].itemName
          // xAxis.data.push(name)
          legend.data.push(name)
        }
      }
      console.log(chartType, info)
      setTimeout(() => {
        const sheet = luckysheet.getLuckysheetfile()[0]
        let optionData = sheet.data
        try {
          let flag = false
          insertLuckysheetEChart({
            selector: '#luckysheet',
            info,
            sheet,
            optionData,
            echarts,
            luckysheet,
            $,
            _self,
            flag
          })
        } catch (e) {
          console.log(999, e == 'echarts is not defined')
          console.error(e)
        }
      }, 200)
    },
    /** 查询所有报表模板信息 */
    getAllReportTemplate(templateType) {
      const loading = showLoading(this, '数据加载中，请稍候···')
      let params = {
        'page': 1,
        'limit': 1000
      }
      if (templateType != null) {
        params.templateType = templateType
      }
      getAllTableTemplate(params).then(res => {
        loading.close()
        if (!res.data) {
          return
        }
        this.reportTemplateList = res.data.tableTemplateList
      }).catch((e) => {
        loading.close()
        showAlertWin(this, null, e)
      })
    },
    /** 查询所有数据模型 */
    getAllDataModel() {
      let params = {
        'page': 1,
        'limit': 1000
      }
      getAllDataModel(params).then(res => {
        if (!res.data) {
          return
        }
        this.dataModelList = res.data.dataModelList
      }).catch((e) => {
        showAlertWin(this, null, e)
      })
    },
    /** 查询我的报表列表 */
    loadReport() {
      const loading = showLoading(this, '加载中，请稍候···')
      let params = {
        'page': this.reportPage,
        'limit': this.reportLimit
      }
      if (this.searchValue != '-1') {
        params.isAutoReport = this.searchValue
      }
      if (this.searchTxt && this.searchTxt.trim()) {
        params.reportTableName = this.searchTxt
      }
      getAllOkReportTable(params).then(res => {
        loading.close()
        if (!res || !res.data) {
          return
        }
        this.reportTotal = res.data.count
        this.reportDataList = res.data.reportTableList
      }).catch((e) => {
        loading.close()
        showAlertWin(this, null, e)
      })
    },
    /** 设置自动打印 */
    setAutoPrint(data) {
      this.resetPrint();
      const loading = showLoading(this, '设置中，请稍候···')
      this.printForm.reportTableId = data.id;
      getPrintByReportId(data.id).then(res => {
        loading.close()
        if (res.data) {
          this.printForm.id = res.data.id;
          this.printForm.cronId = res.data.cronId;
          this.printForm.cron = res.data.cron;
          this.printForm.runState = res.data.runState;
          this.analysisCron(res.data.cron)
        }
        this.dialogAutoPrintVisible = true
      }).catch((e) => {
        loading.close()
      })
    },
    resetPrint() {
      this.printForm.id = null;
      this.printForm.reportTableId = null;
      this.printForm.cronId = '';
      this.printForm.cron = '';
      this.printForm.runState = null;
    },
    /** 选择定时打印 */
    chooseCronPrint() {
      if (!this.getCron()) {
        showAlertMsgWin(this, null, '请指定定时任务类型或运行时间！')
        return
      }
      this.printForm.cron = this.getCron();
      if (!this.validCron(this.printForm.cron)) {
        showAlertMsgWin(this, null, '定时任务表达式格式不正确！')
        return
      }
      addPrint(this.printForm).then(res => {
        let msg = res.data ? '配置成功！' : '配置失败！'
        showAlertMsgWin(this, null, msg)
        this.showMainView = false
        this.dialogAutoPrintVisible = false;
      }).catch(e => {
        showAlertWin(this, null, e)
      })
    },
    /** 停止打印 */
    stopAutoPrint() {
      console.log(this.printForm.reportTableId)
      stopAutoPrintById(this.printForm.reportTableId).then(res => {
        showAlertWin(this, null, res.data)
        if(res.code==200){
          this.dialogAutoPrintVisible = false;
        }
      }).catch(e => {
        showAlertWin(this, null, e)
      })
    },
    /** 设置用户组信息 */
    setUserGroupEvent(data) {
      if (data.userId != this.uid) {
        showAlertMsgWin(this, null, '您没有权限进行设置！')
        return
      }
      this.reportId = data.id
      this.dialogUserGroupVisible = true
      getAllUserGroup().then(res => {
        this.$nextTick(() => {
          this.userGroupList = res.data
          // this.userGroupInfo = data.userGroupList
          this.userGroupInfo = []
          for (let i = 0; i < data.userGroupList.length; i++) {
            this.userGroupInfo.push(data.userGroupList[i].id)
          }
          if (data.userGroupList && data.userGroupList.length > 0) {
            this.hasUserGroup = true
          }
        })
      }).catch((e) => {
        showAlertWin(this, null, e)
      })
    },
    getUserGroupEvent(data) {
      this.groupUserData = []
      if (!data.userGroupList || data.userGroupList.length == 0) {
        showAlertMsgWin(this, null, '该报表还未进行授权操作！')
        return
      }
      let _this = this
      data.userGroupList.forEach((group) => {
        getUserByGroupId(group.id).then(res => {
          let users = res.data
          users.forEach((u) => {
            _this.groupUserData.push({
              'userGroupName': group.userGroupName,
              'userName': u.userName
            })
          })
        }).catch((e) => {
          showAlertWin(_this, null, e)
        })
      })
      this.dialogGroupUserVisible = true
    },
    chooseUserGroupEvent() {
      // if (!this.userGroupInfo) {
      //   this.$message({
      //     message: '请选择用户组！',
      //     type: 'warning'
      //   })
      //   return
      // }
      let params = {
        'id': this.reportId,
        'userGroupList': []
      }
      for (let i = 0; i < this.userGroupInfo.length; i++) {
        params.userGroupList.push({
          'id': this.userGroupInfo[i]
        })
      }
      tableAssignUserById(params).then(res => {
        if (this.hasUserGroup || this.userGroupInfo) {
          showAlertMsgWin(this, null, '保存成功！')
          this.hasUserGroup = false
        }
        this.dialogClose()
        this.loadReport()
      }).catch((e) => {
        showAlertWin(this, null, e)
      })
    },
    /** 处理自动报表数据信息 */
    drawAutoReportData(datas) {
      if (!datas || datas.length == 0) {
        return
      }
      datas.forEach((data) => {
        if (!data || !data.item) {
          return
        }
        let showInfo = data.showType
        let fieldList = data.field
        data.item.forEach((item, i) => {
          if (!item || !item.dataList) {
            return
          }
          let itemName = item.itemName
          itemName = itemName.substring(itemName.lastIndexOf('.') + 1)
          let tempName = '${' + item.itemGroupId + '.' + itemName + '.' + showInfo.dataId + '}'
          let p_r, p_c
          if (fieldList[i] && tempName == fieldList[i].name) {
            p_r = parseInt(fieldList[i].r)
            p_c = parseInt(fieldList[i].c)
          } else {
            for (let n = 0; n < fieldList.length; n++) {
              if (fieldList[n].name == tempName) {
                p_r = parseInt(fieldList[n].r)
                p_c = parseInt(fieldList[n].c)
                break
              }
            }
          }
          // 数据信息
          let dataList = item.dataList
          for (let j = 0; j < showInfo.valLine; j++) {
            let c = p_c
            let r = p_r
            if (showInfo.valType == '2') r += j
            else c += j
            luckysheet.setCellValue(r, c, (dataList[j] != null && dataList[j] != undefined) ? (dataList[j] + '') : cqcyCode['invalidData'])
          }
        })
      })
    },
    /** 报表点击事件 */
    handleReportNodeClick(data, type) {
      if (data.id == -1 || this.delFlag == 1) {
        return
      }
      const loading = showLoading(this, '加载中，请稍候···')
      getReportTableById(data.id).then(res => {
        let _data = res.data
        if (!_data) {
          loading.close()
          showAlertMsgWin(this, null, '选择的报表不存在！')
          return
        }
        this.showMainView = true
        this.breadcrumbList = [_data.reportTableName]
        this.chooseCurrMyReport = _data
        // 判断是否运行记录
        if (type === 'history') {
          this.dialogHistoryReportVisible = false
          this.btnType = 'showChild'
        } else {
          this.chooseMyReport = res.data
          this.btnType = 'showShared'
        }
        this.setLuckysheetStatus(_data, true, type, loading)
        // 手动报表，循环查询数据
        if (_data.reportTableType == 0) {
          this.reportIntervalTag = setInterval(() => {
            this.reloadReportNode()
          }, this.reportInterval)
        } else {
          if (this.reportIntervalTag) clearInterval(this.reportIntervalTag)
        }
      }).catch((e) => {
        loading.close()
        showAlertWin(this, null, e)
      })
    },
    /** 报表reload事件 */
    reloadReportNode() {
      if (!this.chooseMyReport || !this.chooseMyReport.id) {
        if (this.reportIntervalTag) clearInterval(this.reportIntervalTag)
        return
      }
      const loading = showLoading(this, '加载中，请稍候···')
      getReportTableById(this.chooseMyReport.id).then(res => {
        let _data = res.data
        if (!_data) {
          loading.close()
          if (this.reportIntervalTag) clearInterval(this.reportIntervalTag)
          return
        }
        this.chooseCurrMyReport = _data
        this.chooseMyReport = res.data
        this.setLuckysheetStatus(_data, true, '', loading)
      }).catch((e) => {
        if (this.reportIntervalTag) clearInterval(this.reportIntervalTag)
        loading.close()
        showAlertWin(this, null, e)
      })
    },
    /** 设置工作表状态 */
    setLuckysheetStatus(dataInfo, isReadOnly, type, loading) {
      let _this = this
      // 报表数据
      let reportTableData = dataInfo.reportTableData
      let luckyData = JSON.parse(reportTableData)
      // 基础数据项值
      let baseItem = luckyData.baseItem
      // 数据项
      let reportTableItemList = dataInfo.reportTableItemList
      let reportChartList = dataInfo.reportChartList
      // 报表类型
      let reportTableType = dataInfo.reportTableType

      luckysheet.destroy()
      let option = luckyData.option
      if (!option) option = JSON.parse(JSON.stringify(this.luckysheetOption))
      option.data = luckyData.data
      if (isReadOnly) {
        // 设置工作表保护
        option.data[0].config.authority = {
          sheet: 1, // 如果为 1 或 true，则该工作表受到保护；如果为 0 或 false，则该工作表不受保护。
          hintText: '该工作表受到保护，无法操作', // 弹窗提示的文字
        }
        // 关闭右键菜单
        option.cellRightClickConfig.chart = false
        option.cellRightClickConfig.columnWidth = false
        option.cellRightClickConfig.rowHeight = false
        option.cellRightClickConfig.deleteColumn = false
        option.cellRightClickConfig.deleteRow = false
        option.cellRightClickConfig.insertColumn = false
        option.cellRightClickConfig.insertRow = false
        // 关闭工具栏
        option.showtoolbar = false
        option.enableAddRow = false
        option.showtoolbarConfig = {
          bold: false,
          border: false,
          fillColor: false,
          font: false,
          fontSize: false,
          function: false,
          horizontalAlignMode: false,
          italic: false,
          mergeCell: false,
          moreFormats: false,
          paintFormat: false,
          strikethrough: false,
          textColor: false,
          underline: false,
          verticalAlignMode: false
        }
        // 钩子函数
        option.hook = {
          workbookCreateAfter() {
            for (let i in reportChartList) {
              _this.insertEChartInfo(reportChartList[i])
            }
            // 绘制基础数据项
            _this.drawBaseInfo(baseItem)
            // 绘制数据值
            _this.drawTableData(reportTableItemList, reportTableType)
            luckysheet.setRangeShow('BH1')
            if (loading) loading.close()
          }
        }
      } else {
        let charts = luckyData.charts
        // 钩子函数
        option.hook = {
          workbookCreateAfter() {
            for (let i in charts) {
              _this.insertEChartInfo(charts[i])
            }
            // 绘制基础数据项
            _this.drawBaseInfo(baseItem)
            // 绘制数据值
            _this.drawTableData(reportTableItemList, reportTableType)
            luckysheet.setRangeShow('BH1')
            if (loading) loading.close()
          },
          cellUpdated(r, c, newV, oldV) {
            if (!(r === 49 && c === 0)) {
              _this.forceRefreshLuckysheet()
            }
          }
        }
      }
      luckysheet.create(option)
    },
    /** 绘制事件驱动报表信息 */
    drawEventReportData(eventTables) {
      if (!eventTables || eventTables.length == 0) {
        return
      }
      let x = 0, y = 0
      eventTables.forEach((data, i) => {
        x += 1
        y = 0
        let {dataList, dataTimeList, itemName} = data
        itemName = (itemName != null && itemName != undefined) ? itemName : cqcyCode['invalidData']
        luckysheet.setCellValue(x, y, itemName)
        dataList.forEach((val, j) => {
          y = j + 1
          let _date = luckysheet.getCellValue(0, y)
          if (!_date) {
            let text = (dataTimeList[j] != null && dataTimeList[j] != undefined) ? dataTimeList[j] : cqcyCode['invalidData']
            if (text.length > 19) text = text.substring(0, 19)
            luckysheet.setCellValue(0, y, text)
          }
          val = (val != null && val != undefined) ? val : cqcyCode['invalidData']
          luckysheet.setCellValue(x, y, val)
        })
      })
    },
    /** 修改报表信息 */
    editReportItem(data) {
      let _data = JSON.parse(JSON.stringify(data))
      this.$nextTick(() => {
        this.resetRadioVal()
        this.cronVal = _data.cron
        this.analysisCron(this.cronVal)
        this.reportForm = _data
        if (_data.startTime && _data.endTime) {
          this.reportForm.dateRange = [_data.startTime, _data.endTime]
        } else {
          this.reportForm.dateRange = ''
        }
        this.reportForm.cronLabel = this.getCronLabel()
      })
      this.reportDialogTitle = '配置报表'
      this.dialogReportTemplateVisible = true
      // const loading = showLoading(this, '修改中，请稍候···')
      // getReportTableById(data.id).then(res => {
      //   loading.close()
      //   this.cronVal = res.data.cron
      //   this.analysisCron(this.cronVal)
      //   this.reportForm = res.data
      //   this.reportForm.cronLabel = this.getCronLabel()
      //   this.reportDialogTitle = '配置报表'
      //   this.dialogReportTemplateVisible = true
      // }).catch((e) => {
      //   loading.close()
      //   showAlertWin(this, null, e)
      // })
    },
    /** 报表移除 */
    removeReportItem(data, type) {
      showConfirmWin(this, null, '您确定要删除该报表吗？', () => {
        const loading = showLoading(this, '删除中，请稍候···')
        delReportTableById(data.id).then(res => {
          loading.close()
          let msg = res.data ? '删除成功！' : '删除失败！'
          showAlertMsgWin(this, null, msg)
          if (type == 'record') {
            this.reportHistoryPage = 1
            this.historyReport()
            return
          }
          this.reportPage = 1
          this.loadReport()
          this.cancelSaveReport()
        }).catch((e) => {
          loading.close()
          showAlertWin(this, null, e)
        })
      })
    },
    /** 获取单元格大小 */
    getCellSize(celldata, r, c, luckysheet) {
      const {cs, rs} = celldata.data[r][c].mc
      const rowhidden = celldata.config.rowhidden && Object.keys(celldata.config.rowhidden) || ''
      const rowArr = []
      for (let i = 0; i < rs; i++) {
        let rowIndex = r + i
        if (rowhidden.indexOf(String(rowIndex)) < 0) {
          rowArr.push(rowIndex)
        }
      }
      const colArr = []
      for (let j = 0; j < cs; j++) {
        colArr.push(c + j)
      }
      const totalHeight = Object.values(
          luckysheet.getRowHeight(rowArr)
      ).reduce((a, b) => a + b)
      const totalWidth = Object.values(
          luckysheet.getColumnWidth(colArr)
      ).reduce((a, b) => a + b)
      return {
        w: totalWidth,
        h: totalHeight
      }
    },
    /** 获取图片位置 */
    getImagePosition(num, arr) {
      let index = 0
      let minIndex
      let maxIndex
      for (let i = 0; i < arr.length; i++) {
        if (num < arr[i]) {
          index = i
          break
        }
      }
      if (index == 0) {
        minIndex = 0
        maxIndex = 1
      } else if (index == arr.length - 1) {
        minIndex = arr.length - 2
        maxIndex = arr.length - 1
      } else {
        minIndex = index - 1
        maxIndex = index
      }
      let min = arr[minIndex]
      let max = arr[maxIndex]
      let radio = Math.abs((num - min) / (max - min)) + index
      return radio
    },
    /** 图表转换为图片 */
    convertChart(luckyData) {
      const optionData = luckysheet.getLuckysheetfile()[0]
      let {
        visibledatacolumn, // 所有行的位置
        visibledatarow // 所有列的位置
      } = optionData
      // 动态图表
      if (luckyData.charts && luckyData.charts.length > 0) {
        luckyData.charts.forEach((chart, i) => {
          let myChart = echarts.init(
              document.getElementsByClassName(chart.info.className)[0]
          )
          let baseData = myChart.getConnectedDataURL({
            type: 'png',
            pixelRatio: 2,
            backgroundColor: '#ffffff'
          })
          // luckysheet.cancelRangeMerge(chart.info.pos)
          luckysheet.insertImage(baseData, {
            rowIndex: chart.info.pos[0],
            colIndex: chart.info.pos[1],
            cellSize: this.getCellSize(optionData, chart.info.pos[0], chart.info.pos[1], luckysheet),
            success: function () {
              console.log("插入成功")
            }
          })
        })
      }
      // 静态图表
      if (luckyData.data && luckyData.data.length > 0) {
        luckyData.data.forEach((data, i) => {
          if (data.chart && data.chart.length > 0) {
            data.chart.forEach((chart, j) => {
              let myChart = echarts.init(
                  document.getElementById(chart.chart_id)
              )
              myChart.setOption(chart.chartOptions);
              let baseData = myChart.getConnectedDataURL({
                type: 'png',
                pixelRatio: 2,
                backgroundColor: '#ffffff'
              })
              let col_st = this.getImagePosition(chart.left, visibledatacolumn)
              let row_st = this.getImagePosition(chart.top, visibledatarow)
              luckysheet.insertImage(baseData, {
                rowIndex: parseInt(row_st),
                colIndex: parseInt(col_st),
                cellSize: {
                  w: chart.width,
                  h: chart.height,
                },
                success: function () {
                  console.log("插入成功")
                }
              })
            })
          }
        })
      }
    },
    /** 处理日期显示数字问题 */
    withDateData(excelData) {
      if (!excelData) {
        return
      }
      try {
        excelData.map((item) => {
          if (item) {
            item.map((ll) => {
              if (ll && ll.ct && ll.ct.t && ll.ct.t === 'd') {
                ll.m = ll.m,
                    ll.v = ll.m,
                    ll.ct = {
                      fa: "@",
                      t: "s",
                    }
              }
            })
          }
        })
      } catch (error) {
        console.log(error)
      }
    },
    /** 保存报表信息 */
    saveReportInfo(loading, dataInfo) {
      if (!loading) loading = showLoading(this, '保存中，请稍候···')
      let _excelData = this.initBaseInfoData(dataInfo)
      let params = JSON.parse(JSON.stringify(this.reportForm))
      params.reportTableData = JSON.stringify(_excelData)
      if (params.dateRange && params.dateRange.length > 0) {
        params.startTime = params.dateRange[0]
        params.endTime = params.dateRange[1]
      }
      saveReport(params).then(res => {
        loading.close()
        let msg = res.data ? '保存成功！' : '保存失败！'
        showAlertMsgWin(this, null, msg)
        this.showMainView = false
        this.dialogReportTemplateVisible = false
        this.loadReport()
        this.cancelSaveReport()
      }).catch((e) => {
        loading.close()
        showAlertWin(this, null, e)
      })
    },
    /** 修改报表信息 */
    updateReportInfo(loading, dataInfo) {
      if (!loading) loading = showLoading(this, '修改中，请稍候···')
      let params = JSON.parse(JSON.stringify(this.reportForm))
      if (params.dateRange && params.dateRange.length > 0) {
        params.startTime = params.dateRange[0]
        params.endTime = params.dateRange[1]
      }
      setAutoTableTime(params).then(res => {
        loading.close()
        let msg = res.data ? '修改成功！' : '修改失败！'
        showAlertMsgWin(this, null, msg)
        this.showMainView = false
        this.dialogReportTemplateVisible = false
        this.loadReport()
        this.cancelSaveReport()
      }).catch((e) => {
        loading.close()
        showAlertWin(this, null, e)
      })
    },
    /** 更新报表信息 */
    updateReport() {
      if (!this.chooseMyReport || !this.chooseMyReport.id) {
        showAlertMsgWin(this, null, '保存失败，请刷新后重试！')
        return
      }
      showPromptWin(this, '保存', '请输入报表名称', this.chooseMyReport.reportTableName, (val) => {
        if (!val) {
          return '报表名称不能为空'
        }
        if (val.length > 20) {
          return '报表名称必须在20字以内'
        }
      }, (value) => {
        const loading = showLoading(this, '保存中，请稍候···')
        let _data2 = JSON.parse(this.chooseMyReport.reportTableData)
        let excelTable = _data2.tables
        excelTable.forEach(table => {
          table.field.forEach(field => {
            luckysheet.setCellValue(field.r, field.c, field.name)
          })
        })
        let _data = JSON.parse(getLuckysheetConfig())
        let excelData = _data[0].data
        this.withDateData(excelData)
        _data2.data = _data
        // this.convertChart(_data2)
        let data = this.chooseMyReport
        data.reportTableName = value
        data.reportTableData = JSON.stringify(_data2)
        updateReportTable(data).then(res => {
          loading.close()
          let msg = res.data ? '保存成功！' : '保存失败！'
          showAlertMsgWin(this, null, msg)
          this.showMainView = false
          this.loadReport()
          this.cancelSaveReport()
        }).catch((e) => {
          loading.close()
          showAlertWin(this, null, e)
        })
      })
    },
    /** 报表下载 */
    downloadReport() {
      this.dialogDownloadReportTypeVisible = true
    },
    /** 报表下载事件 */
    downloadReportEvent() {
      if (!this.chooseCurrMyReport) {
        showAlertMsgWin(this, null, '请选择报表！')
        return
      }
      let reportName = this.chooseCurrMyReport.reportTableName ? this.chooseCurrMyReport.reportTableName : '统计报表'
      if (this.downloadType == '1') {
        // exportExcel(luckysheet, reportName, ExcelJS).then((res) => {
        //   console.log("result==>", res)
        //   // this.$message({
        //   //   message: res,
        //   //   type: 'success'
        //   // })
        //   this.dialogDownloadReportTypeVisible = false
        // }).catch((err) => {
        // })
        exportExcel(luckysheet.getAllSheets(), reportName)
        setTimeout(() => {
          this.dialogDownloadReportTypeVisible = false
        }, 500)
      }
    },
    /** 报表记录 */
    historyReport() {
      const loading = showLoading(this, '加载中，请稍候···')
      let params = {
        'page': this.reportHistoryPage,
        'limit': this.reportHistoryLimit,
        'reportTableName': this.searchHistoryTxt,
        'autoTableId': this.chooseMyReport.id
      }
      getAutoChReportTable(params).then(res => {
        loading.close()
        this.dialogHistoryReportVisible = true
        if (!res.data) return
        this.reportHistoryData = res.data.reportTableList
        this.reportHistoryTotal = res.data.count
      }).catch((e) => {
        loading.close()
        showAlertWin(this, null, e)
      })
    },
    getPrintSheetArea() {
      const sheetData = luckysheet.getSheetData();
      let objRowColumn = {
        row: [0, 0], //行
        column: [0, 0], //列
      };
      // * item是行、index是行索引、it是一行里的一格、itemIndex是这一格在这一行里的列索引
      sheetData.forEach((item, index) => {
        //行数
        item.forEach((it, itemIndex) => {
          if (it !== null && it.v) {
            console.log(index, it)
            if (objRowColumn.row[1] < index) {
              objRowColumn.row[1] = index; //row第二位
            }
            if (objRowColumn.column[1] < itemIndex) {
              objRowColumn.column[1] = itemIndex; //column第二位
            }
          }
        });
      });
      return objRowColumn;
    },
    /** 打印操作 */
    printExcel() {
      const loading = showLoading(this, '请稍候···')
      document.querySelector('#print-area').style = "display:block";
      window.luckysheet.hideGridLines();
      // 获取当前选中区域
      let currentSelected = luckysheet.getRange()
      // 如果当前选中区只是一个单元格，则认为选取无效。
      if (currentSelected[0] != null
          && (currentSelected[0].row[1] - currentSelected[0].row[0] >= 1
              || currentSelected[0].column[1] - currentSelected[0].column[0] >= 1)) {
        // 生成base64图片
        let imgSrc = luckysheet.getScreenshot();
        window.luckysheet.showGridLines();
        // * Lodop中的ADD_PRINT_IMAGE，也可以直接输出base64码图片，不用加img标签（如果加了img标签，会被当做超文本对待，受浏览器引擎解析的影响）
        let $img = `<img src=${imgSrc} style="max-width: 90%;" />`
        this.$nextTick(() => {
          document.querySelector('#print-html').innerHTML = $img;
          setTimeout(() => {
            Print({
              printable: 'print-html',
              type: 'html',
              documentTitle: '文档标题',
              header: '',
              headerStyle: 'font-weight:400;text-align:center;',
              style: '@page {margin: 0 10mm};', // 不打印页眉和页脚
              honorColor: true, // 是否打印彩色文本
              targetStyles: ['*'] // 允许打印所有样式属性
            }) // Print.js插件
            document.querySelector("#print-area").style.display = "none";
            loading.close()
          }, 1000)
        })
      } else {
        // 获取打印区域的行列
        let RowColumn = this.getPrintSheetArea();
        // 因需要打印左边的边框，需重新设置第一列
        RowColumn.column[0] = 0;
        // 进行选区操作
        luckysheet.setRangeShow(RowColumn);
        let imgSrc = luckysheet.getScreenshot(); // 生成base64图片
        window.luckysheet.showGridLines();
        // * Lodop中的ADD_PRINT_IMAGE，也可以直接输出base64码图片，不用加img标签（如果加了img标签，会被当做超文本对待，受浏览器引擎解析的影响）
        let $img = `<img src=${imgSrc} style="max-width: 90%;" />`
        this.$nextTick(() => {
          document.querySelector('#print-html').innerHTML = $img;
          setTimeout(() => {
            Print({
              printable: 'print-html',
              type: 'html',
              documentTitle: '文档标题',
              header: '',
              headerStyle: 'font-weight:400;text-align:center;',
              style: '@page {margin: 0 10mm};', // 不打印页眉和页脚
              honorColor: true, // 是否打印彩色文本
              targetStyles: ['*'] // 允许打印所有样式属性
            }) // Print.js插件
            document.querySelector("#print-area").style.display = "none";
            loading.close()
          }, 1000)
        })
      }
    },
    /** 自定义选中区域 */
    getExcelRowColumn() {
      const sheetData = luckysheet.getSheetData();
      let objRowColumn = {
        row: [null, null], //行
        column: [null, null], //列
      };
      sheetData.forEach((item, index) => {
        //行数
        item.forEach((it, itemIndex) => {
          console.log(it)
          if (it !== null) {
            if (objRowColumn.row[0] == null) objRowColumn.row[0] = index; // row第一位
            objRowColumn.row[1] = index; //row第二位
            if (objRowColumn.column[0] == null)
              objRowColumn.column[0] = itemIndex; //column第一位
            objRowColumn.column[1] = itemIndex; //column第二位
          }
        });
      });
      return objRowColumn;
    },
    cronNodeEvent(obj) {
      this.cronVal = obj.value
    },
    initCronList() {
      this.cronList = []
      this.cronList.push({value: '0/2 * * * * ?', label: '表示每2秒钟执行一次任务'})
      this.cronList.push({value: '0 0/2 * * * ?', label: '表示每2分钟执行一次任务'})
      this.cronList.push({value: '0 0 0/2 * * ?', label: '表示每2小时执行一次任务'})
      this.cronList.push({value: '0 15 10 * * ?', label: '表示在每天上午10点15分执行一次任务'})
      this.cronList.push({value: '0 0 10,14,16 * * ?', label: '表示在每天的上午10点、下午2点、下午4点分别执行一次任务'})
      this.cronList.push({
        value: '0 0/30 9-17 * * ?',
        label: '表示在每天的上午9点到下午5点的范围内每30分钟执行一次任务'
      })
      this.cronList.push({value: '0 0 12 ? * WED', label: '表示在每周星期三中午12点执行一次任务'})
      this.cronList.push({value: '0 0 2 1 * ?', label: '表示在每月的1日的凌晨2点执行一次任务'})
    },
    /** 取消保存报表 */
    cancelSaveReport2() {
      this.handleReportNodeClick(this.chooseMyReport, this.chooseMyReport.userId !== this.uid ? 'deny' : '')
    },
    /** 取消保存报表 */
    cancelSaveReport() {
      luckysheet.destroy()

      this.breadcrumbList = ['运行配置']
      this.showMainView = false
      this.btnType = ''
      this.chooseMyReport = null
      if (this.$refs['reportForm']) this.$refs['reportForm'].resetFields()
    },
    /** 弹出层关闭事件 */
    dialogClose(done) {
      this.cronVal = ''
      this.searchHistoryTxt = ''
      this.reportId = null
      // this.userGroupInfo = null
      if (typeof (done) === 'function') {
        done()
      } else {
        this.dialogReportTemplateVisible = false
        this.dialogDownloadReportTypeVisible = false
        this.dialogAutoReportVisible = false
        this.dialogReportTypeVisible = false
        this.dialogUserGroupVisible = false
        this.dialogAutoPrintVisible = false
      }
    },
    /** 弹出层关闭事件 */
    dialogGroupUserClose(done) {
      if (typeof (done) === 'function') {
        done()
      } else {
        this.dialogGroupUserVisible = false
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
.breadcrumb-content {
  padding-bottom: 0;
}

.cy-nav-sx {
  float: left !important;
  margin-top: -23px !important;
  margin-left: 120px !important;
  display: flex;
}

.cy-nav-btn {
  float: right !important;
  margin-right: 20px !important;
  margin-top: -20px !important;
}

.cy-main {
  margin: 10px 20px;
  width: calc(100% - 40px);
  height: calc(100% - 100px);

  .cy-btn {
    margin-bottom: 10px;
  }

  .cy-btn .el-link {
    margin-right: 15px;
  }

  .cy-main-left {
    width: 100%;
    height: 100%;
    overflow: auto;
    //float: left;
    padding: 5px 10px;
    //border-right: 1px solid #d4d4d4;

    .cy-list {
      overflow: auto;
      height: 100%;
      height: calc(100% - 40px);

      ul {
        display: flex;
        flex-wrap: wrap;
        padding: 0;
        margin-top: 0;

        li {
          list-style-type: none;
          background: #41aed7;
          width: 23%;
          margin: 10px 1%;
          border-radius: 8px;
          height: 110px;
          padding: 15px;
          color: #ffffff;

          .cy-item-name {
            font-size: 14px;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            margin-bottom: 15px;
            cursor: pointer;
          }

          .cy-item-val {
            font-size: 12px;
          }

          .cy-list-item {
            font-size: 12px;
            color: #f6f6f6;
            width: 100%;
            //display: flex;
            margin-top: 40px;
          }
        }
      }
    }
  }

  .cy-main-right {
    width: 100%;
    height: 100%;
    float: left;
    overflow: hidden;
  }
}

.cy-group-tree1 {
  font-size: 14px;

  .custom-tree-node1 {
    height: 28px;
    line-height: 28px;
  }
}

.cron-txt {
  color: blue;
  margin-right: 20px;
  cursor: pointer;
  font-weight: bold;
  font-size: 16px;
}

.cron-txt-desc {
}

.ug-div {
  .el-transfer-panel {
    width: 300px;
  }
}
</style>