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

<template>
  <div v-if="showReportData" style="width: 100%; height: calc(100% - 70px);">
    <div class="cy-report-content">
      <div class="cy-div0">
        <div class="cy-report-ruler-unit">mm</div>
      </div>
      <div class="cy-div1">
        <div class="cy-ruler-top">
          <ruler-view ruler-position="horizontal"></ruler-view>
        </div>
        <div class="cy-box">
          <div class="cy-ruler-left">
            <ruler-view ruler-position="vertical"></ruler-view>
          </div>
          <div class="cy-box-main">
            <el-input type="text" placeholder="请输入报表模板名称" v-model="templateName" maxlength="20" size="mini"
                      show-word-limit></el-input>
            <div id="luckysheet"
                 style="margin:0px;padding:0px;position:relative;height:calc(100% - 40px);width:100%;left: 0px;top: 0px;bottom:0px;">
            </div>
          </div>
        </div>
      </div>
      <div class="cy-div2">
        <input ref="importFileNode" class="import-file-node" type="file" @change="loadExcel"
               style="display: none;"></input>
        <div v-if="templateId && templateId != 0 && templateId != -999" class="cy-chart-div"
             @click="saveReportTemplate('saveAs')">
          <svg-icon icon-class="report_saveas" style="width: 35px; height: 35px; margin-bottom: 6px;"/>
          <span>另存为</span>
        </div>
        <div class="cy-chart-div" @click="saveReportTemplate">
          <svg-icon icon-class="report_save" style="width: 35px; height: 35px; margin-bottom: 6px;"/>
          <span>保存</span>
        </div>
        <div class="cy-chart-div" @click="printExcel()">
          <svg-icon icon-class="cy-print" style="width: 30px; height: 30px; margin-bottom: 8px;"/>
          <span>打印</span>
        </div>
        <div class="cy-chart-div" @click="resetReport(false)">
          <svg-icon icon-class="report_reset" style="width: 30px; height: 30px; margin-bottom: 8px;"/>
          <span>重置</span>
        </div>
        <div class="cy-chart-div" @click="closeReport">
          <svg-icon icon-class="report_cancel" style="width: 30px; height: 30px; margin-bottom: 8px;"/>
          <span>关闭</span>
        </div>
        <el-divider></el-divider>
        <div class="cy-chart-div" @click="templateEvent()" v-if="templateReportType != 2 && templateReportType != 5">
          <svg-icon icon-class="report_template" style="width: 35px;"/>
          <span>模板库</span>
        </div>
        <div class="cy-chart-div" @click="dataEvent(1)" v-if="templateReportType != 2 && templateReportType != 5">
          <svg-icon icon-class="report_basedata" style="width: 35px;"/>
          <span>基础数据项</span>
        </div>
        <div class="cy-chart-div" @click="dataEvent(2)">
          <svg-icon icon-class="report_data_u" style="width: 35px;"/>
          <span>附属属性</span>
        </div>
        <div class="cy-chart-div" @click="dataEvent(3)">
          <svg-icon icon-class="report_data" style="width: 35px;"/>
          <span>数据项</span>
        </div>
		<div class="cy-chart-div" @click="updateDataEvent()" v-if="templateReportType != 5">
		  <svg-icon icon-class="report_data" style="width: 35px;"/>
		  <span>修改策略</span>
		</div>
        <div class="cy-chart-div" @click="barEvent('bar')" v-if="templateReportType != 2 && templateReportType != 5">
          <svg-icon icon-class="bar_chart"/>
          <span>柱状图</span>
        </div>
        <div class="cy-chart-div" @click="barEvent('line')" v-if="templateReportType != 2 && templateReportType != 5">
          <svg-icon icon-class="line_chart"/>
          <span>折线图</span>
        </div>
        <div class="cy-chart-div" @click="barEvent('pie')" v-if="templateReportType != 2 && templateReportType != 5">
          <svg-icon icon-class="pie_chart"/>
          <span>饼状图</span>
        </div>
      </div>
    </div>

    <!-- 图表右键操作 -->
    <ul v-show="visibleChartMenu"
        :style="{ left: menuLeft + 'px', top: menuTop + 'px' }"
        class="contextmenu contextmenu-black">
      <li @click="updateChartItem">修改</li>
      <li @click="delChartItem">删除</li>
    </ul>

    <!-- 弹出层：图配置 -->
    <el-drawer
        :title="chartConfigTitle"
        :visible.sync="dialogBarChartVisible"
        :show-close="false"
        :close-on-press-escape="false"
        :wrapperClosable="false"
        size="30%"
        :before-close="dialogClose">
      <el-form ref="barChartForm" :model="barChartForm" label-position="top" size="mini" style="margin: 0 20px 20px;">
        <el-form-item label="图表标题：" prop="title" class="label-title1">
          <el-input type="text" placeholder="请输入标题" v-model="barChartForm.title" maxlength="80" show-word-limit>
          </el-input>
        </el-form-item>
        <el-form-item label="图表副标题：" prop="subtitle" class="label-title1">
          <el-input type="text" placeholder="请输入副标题" v-model="barChartForm.subtitle" maxlength="60"
                    show-word-limit>
          </el-input>
        </el-form-item>
        <el-form-item label="是否显示图表标题：" prop="showTitle">
          <el-radio v-model="barChartForm.showTitle" label="1">是</el-radio>
          <el-radio v-model="barChartForm.showTitle" label="0">否</el-radio>
        </el-form-item>
        <el-form-item label="是否显示图例：" prop="showLegend">
          <el-radio v-model="barChartForm.showLegend" label="1">是</el-radio>
          <el-radio v-model="barChartForm.showLegend" label="0">否</el-radio>
        </el-form-item>
        <!--        <el-form-item label="图例：" prop="legendType" v-if="barChartForm.type != 'pie'">-->
        <!--          <el-radio v-model="barChartForm.legendType" label="1">数据项</el-radio>-->
        <!--          <el-radio v-model="barChartForm.legendType" label="0">值</el-radio>-->
        <!--        </el-form-item>-->
        <el-form-item label="数据组：">
          <el-select filterable
                     v-model="chooseDataGroup"
                     placeholder="请选择数据组"
                     @change="dataSourceChange"
                     style="width: calc(100% - 110px);">
            <el-option
                v-for="dict in dataGroupList"
                :key="dict.id"
                :label="dict.groupName"
                :value="dict.id"
            ></el-option>
          </el-select>
          <el-button size="mini" @click="addDataItem" style="float: right;width: 100px;">选择数据项</el-button>
          <el-tag size="mini" v-if="chooseItemData.length > 0"
                  style="margin-top: 10px;"
                  class="cy-item-tag">已选择({{ chooseItemData.length }})项
          </el-tag>
        </el-form-item>
        <template v-if="chooseItemData.length > 0">
          <el-form-item label="取值类型：" prop="valueType">
            <el-radio v-for="item in valueTypeList"
                      v-model="barChartForm.valueType"
                      :label="item.value">{{ item.label }}
            </el-radio>
          </el-form-item>
          <el-form-item label="取值模式：" prop="valueTakingMode" v-if="templateReportType == 1">
            <el-radio v-for="item in valueTakingModeList"
                      v-model="barChartForm.valueTakingMode"
                      :label="item.value">{{ item.label }}
            </el-radio>
          </el-form-item>

          <template v-if="templateReportType == 1">
            <el-divider content-position="left">取值周期设置</el-divider>
            <div class="cy-line" style="margin-bottom: 20px;">
              <el-form-item label="时间单位：" prop="bucketType">
                <el-radio v-for="item in bucketTypeList"
                          v-model="barChartForm.bucketType"
                          :label="item.value">{{ item.label }}
                </el-radio>
              </el-form-item>
              <el-form-item label="数据切换周期：" prop="bucketValue">
                <el-input-number label="请输入周期值"
                                 v-model="barChartForm.bucketValue"
                                 :precision="0"
                                 :min="1"
                                 :max="100"></el-input-number>
              </el-form-item>
            </div>
          </template>
        </template>
<!--        <el-button type="warning" size="mini" @click="insertBarChartForm(0)">应用</el-button>-->
        <el-button type="primary" size="mini" @click="insertBarChartForm(1)">保存</el-button>
        <el-button size="mini" @click="cancelBarChartForm">取消</el-button>
      </el-form>
    </el-drawer>

    <!-- 数据组选择 -->
    <el-dialog
        title="选择数据项"
        width="600px"
        top="10vh"
        center
        v-dialog-drag-and-zoom
        v-if="dialogDataItemVisible"
        :before-close="dialogItemClose"
        :visible.sync="dialogDataItemVisible"
        :close-on-click-modal="false"
        :append-to-body="true">
      <div>
        <div style="margin-bottom: 10px;">
          <span>组名称：{{ itemDataListByGroupName }}（共 {{ itemDataListByTree.length }} 项）</span>
          <el-checkbox v-model="isSelectAllItem" @change="selectAllItem" style="float: right;">全选</el-checkbox>
        </div>
        <el-input placeholder="请输入关键字进行过滤" @input="itemChangeEvent" v-model="filterItemData"></el-input>
        <div style="height: 50vh; margin-top: 10px; overflow: auto;">
<!--          <el-tree class="cy-item-tree"-->
<!--                   ref="itemTree"-->
<!--                   :data="itemDataListByTree"-->
<!--                   :indent="10"-->
<!--                   node-key="id"-->
<!--                   show-checkbox-->
<!--                   :check-on-click-node="true"-->
<!--                   :filter-node-method="filterItemDataNode"-->
<!--                   :highlight-current="true"-->
<!--                   :default-expand-all="true"-->
<!--                   @check-change="handleItemCheckChange">-->
<!--              <span class="custom-tree-node" slot-scope="{ node, data }">-->
<!--                <svg-icon v-if="!data.children || data.children.length == 0" icon-class="file"/>-->
<!--                <svg-icon v-else-if="node.expanded" icon-class="folder-open"/>-->
<!--                <svg-icon v-else icon-class="folder"/>-->
<!--                <span :title='data.itemName || "-"' style="margin-left: 2px;">-->
<!--                  {{-->
<!--                    data.describe-->
<!--                        ? ((data.itemName ? data.itemName : '') + '（' + data.describe + '）')-->
<!--                        : data.itemName ? data.itemName : ''-->
<!--                  }}-->
<!--                </span>-->
<!--              </span>-->
<!--          </el-tree>-->
          <p-virtual-check ref="pvcChoose"
                           :data-sources="itemDataListByTree"
                           @check-change-all="checkChangeAllChoose"
                           @check-change="checkChangeChoose"></p-virtual-check>
        </div>
      </div>
      <div style="width: 100%;text-align: center;">
        <el-button type="primary"
                   @click="chooseItemTreeEvent"
                   style="margin-top: 20px;">确定
        </el-button>
      </div>
    </el-dialog>

    <!-- 数据组选择（设备报表） -->
    <el-dialog
        title="选择条件数据项"
        width="600px"
        top="10vh"
        center
        v-dialog-drag-and-zoom
        v-if="dialogDeviceDataItemVisible"
        :before-close="dialogItemClose"
        :visible.sync="dialogDeviceDataItemVisible"
        :close-on-click-modal="false"
        :append-to-body="true">
      <div>
        <div style="margin-bottom: 10px;">
          <span>组名称：{{ itemDataListByGroupName }}（共 {{ itemDeviceDataListByTree.length }} 项）</span>
        </div>
        <el-input placeholder="请输入关键字进行过滤" v-model="filterDeviceItemData"></el-input>
        <div style="height: 50vh; margin-top: 10px; overflow: auto;">
          <el-tree class="cy-item-tree"
                   ref="deviceItemTree"
                   :data="itemDeviceDataListByTree"
                   :indent="10"
                   node-key="id"
                   show-checkbox
                   :check-on-click-node="true"
                   :filter-node-method="filterItemDataNode"
                   :highlight-current="true"
                   :default-expand-all="true">
              <span class="custom-tree-node" slot-scope="{ node, data }">
                <svg-icon v-if="!data.children || data.children.length == 0" icon-class="file"/>
                <svg-icon v-else-if="node.expanded" icon-class="folder-open"/>
                <svg-icon v-else icon-class="folder"/>
                <span :title='data.itemName || "-"' style="margin-left: 2px;">
                  {{
                    data.describe
                        ? ((data.itemName ? data.itemName : '') + '（' + data.describe + '）')
                        : data.itemName ? data.itemName : ''
                  }}
                </span>
              </span>
          </el-tree>
        </div>
      </div>
      <div style="width: 100%;text-align: center;">
        <el-button type="primary"
                   @click="chooseDeviceItemTreeEvent"
                   style="margin-top: 20px;">确定
        </el-button>
      </div>
    </el-dialog>

    <!-- 选择基础数据项 -->
    <el-dialog
        title="选择基础数据项"
        width="500px"
        center
        v-dialog-drag
        v-if="dialogBaseDataVisible"
        :before-close="dialogBaseDataClose"
        :visible.sync="dialogBaseDataVisible"
        :close-on-click-modal="false"
        :append-to-body="true">
      <el-select v-model="chooseBaseData" filterable placeholder="请选择数据项" style="width: 100%;">
        <el-option
            v-for="item in this.baseDataList"
            :key="item.id"
            :label="item.dictKey"
            :value="item.dictValue">
        </el-option>
      </el-select>
      <div style="width: 100%; text-align: center; margin-top: 20px;">
        <el-button type="warning" @click="baseItemEvent(0)">应用</el-button>
        <el-button type="primary" @click="baseItemEvent(1)">确定</el-button>
        <el-button @click="dialogBaseDataClose">取消</el-button>
      </div>
    </el-dialog>

    <el-dialog
        title="选择表达式"
        width="500px"
        top="10vh"
        center
        :before-close="dialogDataModelClose"
        :visible.sync="dialogDataModelVisible"
        :close-on-click-modal="false"
        :append-to-body="true">
      <el-select v-model="chooseDataModel" filterable placeholder="请选择表达式" style="width: 100%;">
        <el-option
            v-for="item in this.dataModelList"
            :key="item.id"
            :label="item.operationRule"
            :value="item.id">
        </el-option>
      </el-select>
      <div style="width: 100%; text-align: center; margin-top: 20px;">
        <el-button type="primary" @click="saveDataModelEvent">确定</el-button>
        <el-button @click="dialogDataModelClose">取消</el-button>
      </div>
    </el-dialog>

    <!-- 公共模板报表类型选择 -->
    <el-dialog
        title="选择模板报表"
        width="60vw"
        center
        v-dialog-drag-and-zoom
        v-if="dialogCommReportVisible"
        :before-close="dialogClose"
        :visible.sync="dialogCommReportVisible"
        :close-on-click-modal="false"
        :append-to-body="true">
      <div style="height: 60vh; overflow: auto;">
        <div style="height: 50px; display: flex;">
          <div style="width: 50%;">
            <label style="margin-right: 15px;">模板名称</label>
            <el-input placeholder="请输入报表模板名称进行过滤"
                      v-model="searchReportTxt"
                      @input="handleReportTypeInputChange"
                      style="width: calc(100% - 100px); margin-bottom: 10px;">
            </el-input>
          </div>
          <div style="width: 50%;">
            <label style="margin-right: 15px;">所属行业</label>
            <el-input placeholder="请选择所属行业"
                      @click.native="clickCascader"
                      v-model="reportTypeInputName"
                      readonly
                      style="width: calc(100% - 100px); z-index: 1;">
            </el-input>
            <el-cascader v-model="reportType"
                         ref="reportType"
                         :options="reportTypes"
                         style="width: calc(100% - 100px); width: 40px; margin-left: calc(-100% + 100px);"
                         :props="{ value: 'id', label: 'dictKey', emitPath: true, multiple: false }"
                         clearable
                         @change="handleReportTypeChange"
                         @expand-change="handleReportTypeNodeChange"></el-cascader>
          </div>
        </div>
        <div style="height: calc(100% - 50px); overflow: auto;">
          <el-empty v-if="commTemplateList.length == 0" description="暂无数据"></el-empty>
          <div v-else style="margin-top: 10px;">
            <div v-for="item in commTemplateList"
                 style="float: left;width: 30%;display: flex;flex-direction: column;align-items: center;margin-top: 10px;">
              <el-image v-if="item.logo == 'zsxt.png'" :src="require('@/assets/images/template/zsxt.png')" fit="contain"
                        style="height: 80px;"></el-image>
              <el-image v-else-if="item.logo == 'jcscs.png'" :src="require('@/assets/images/template/jcscs.png')"
                        fit="contain" style="height: 80px;"></el-image>
              <el-image v-else-if="item.logo == 'ncs.png'" :src="require('@/assets/images/template/ncs.png')"
                        fit="contain" style="height: 80px;"></el-image>
              <el-image v-else :src="require('@/assets/images/template/muban.png')" fit="contain"
                        style="height: 80px;"></el-image>
              <el-radio v-model="commTemplate" :label="item"
                        style="margin-top: 5px;width: 100%;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;text-align: center;">
                {{ item.templateName }}
              </el-radio>
            </div>
          </div>
        </div>
      </div>
      <div style="text-align: center; margin-top: 40px;">
        <el-button type="warning" @click="commReportEvent(0)">应用</el-button>
        <el-button type="primary" @click="commReportEvent(1)">确定</el-button>
        <el-button @click="dialogClose">取消</el-button>
      </div>
    </el-dialog>

    <!-- 选择数据组数据 -->
    <el-dialog
        :title="hasBelongDataFlag ? '附属属性配置' : '数据项配置'"
        width="80%"
        top="10vh"
        center
        v-dialog-drag-and-zoom
        v-if="dialogGroupItemVisible"
        :before-close="dialogClose"
        :visible.sync="dialogGroupItemVisible"
        :close-on-click-modal="false"
        :append-to-body="true">
      <div style="height: 60vh; overflow: auto;">
        <div>
          <label v-if="templateReportType != 2 || (!isUpdateShow && templateReportType == 2)">数据组：</label>
          <el-select filterable
		  v-if="templateReportType != 2 || (!isUpdateShow && templateReportType == 2)"
                     v-model="chooseDataGroup"
                     @change="getGroupById"
                     placeholder="请选择数据组"
                     style="width: 330px;">
            <el-option
                v-for="dict in dataGroupList"
                :key="dict.id"
                :label="dict.groupName"
                :value="dict.id"
            ></el-option>
          </el-select>
<!--          <label style="margin-left: 10px;">数据类型：</label>-->
<!--          <el-select filterable-->
<!--                     v-model="chooseDataGroupType"-->
<!--                     placeholder="请选择数据类型"-->
<!--                     style="width: 150px;">-->
<!--            <el-option-->
<!--                v-for="dict in dataGroupTypeList"-->
<!--                :key="dict.value"-->
<!--                :label="dict.label"-->
<!--                :value="dict.value"-->
<!--            ></el-option>-->
<!--          </el-select>-->
          <el-button v-if="templateReportType != 2 || (!isUpdateShow && templateReportType == 2)" size="mini" @click="addDataItem" style="width: 100px;margin-top: 4px; margin-left: 10px;">
            选择数据项
          </el-button>
          <template v-if="!hasBelongDataFlag">
            <el-button size="mini" type="primary" @click="multipleDataItemEvent"
                       style="width: 100px;margin-top: 4px;">设置数据条件
            </el-button>
<!--            <el-button v-if="templateReportType==2" size="mini" type="primary" @click="setDriverCondition"-->
<!--                       style="width: 100px;margin-top: 4px;">配置驱动条件-->
<!--            </el-button>-->
          </template>
        </div>
        <div v-if="chooseDataGroup && !hasBelongDataFlag && templateReportType == 2"
             style="margin-top: 10px; display: flex;">
          <label>条件：</label>
          <div style="color: #a5a5a5;">
            <span>{{ this.conditionObj.itemName }}</span>&nbsp;&nbsp;
            <span>{{ this.conditionObj.eventModeName }}</span>&nbsp;&nbsp;
            <span>{{ this.conditionObj.modeValue }}</span>
          </div>
        </div>
        <div style="height: 30vh; margin-top: 10px; overflow: auto;">
          <template v-if="!hasBelongDataFlag">
            <u-table ref="plConditionTable"
                     row-key="label"
                     use-virtual
                     :height="250"
                     :data="chooseGroupItemList"
                     @selection-change="selectionLineChangeHandle"
                     :big-data-checkbox="true"
                     showBodyOverflow="title"
                     showHeaderOverflow="title"
                     style="margin-top: 10px;"
                     border>
              <u-table-column type="selection" width="55" align="center"/>
              <u-table-column type="index" label="序号" width="60" fixed align="center"/>
              <u-table-column label="数据项名称" prop="itemName" sortable="custom" align="center"/>
              <u-table-column prop="valueType" label="取值类型" align="center">
                <template slot-scope="scope">
                  {{ getValByProp(valueTypeList, scope.row.valueType) }}
                </template>
              </u-table-column>
              <u-table-column v-if="templateReportType == 1" prop="valueTakingMode" label="取值模式" align="center">
                <template slot-scope="scope">
                  {{ getValByProp(valueTakingModeList, scope.row.valueTakingMode) }}
                </template>
              </u-table-column>
              <u-table-column v-if="templateReportType == 1" prop="bucketType" label="取值时间单位" align="center">
                <template slot-scope="scope">
                  {{ getValByProp(bucketTypeList, scope.row.bucketType) }}
                </template>
              </u-table-column>
              <u-table-column v-if="templateReportType == 1" prop="bucketValue" label="数据切换周期" align="center">
              </u-table-column>
              <template v-if="false">
                <u-table-column prop="startTime" label="取值时段范围" align="center">
                  <template slot-scope="scope">
                    {{ scope.row.startTime }}
                    {{ scope.row.startTime ? ',' : '' }}
                    {{ scope.row.endTime }}
                  </template>
                </u-table-column>
              </template>
              <u-table-column label="操作" align="center" width="80">
                <template slot-scope="scope">
                  <el-button
                      type="text"
                      size="mini"
                      style="color: red;"
                      @click="handleItemDelete(scope.$index, scope.row)">删除
                  </el-button>
                </template>
              </u-table-column>
            </u-table>
          </template>
          <template v-else>
            <u-table ref="plConditionTable"
                     row-key="label"
                     use-virtual
                     :height="250"
                     :data="chooseGroupItemList"
                     @selection-change="selectionLineChangeHandle"
                     :big-data-checkbox="true"
                     showBodyOverflow="title"
                     showHeaderOverflow="title"
                     style="margin-top: 10px;"
                     border>
              <u-table-column type="selection" width="55" align="center"/>
              <u-table-column type="index" label="序号" width="60" fixed align="center"/>
              <u-table-column label="数据项名称" prop="itemName" sortable="custom" align="center"/>
              <u-table-column prop="dataValue" label="值" align="center">
              </u-table-column>
              <u-table-column label="操作" align="center" width="80">
                <template slot-scope="scope">
                  <el-button
                      type="text"
                      size="mini"
                      style="color: red;"
                      @click="handleItemDelete(scope.$index, scope.row)">删除
                  </el-button>
                </template>
              </u-table-column>
            </u-table>
          </template>
        </div>
        <!-- 设备报表 -->
        <div v-if="templateReportType == 5">
          <el-divider content-position="left">设备报表条件配置</el-divider>
          <div class="cy-line custom-tree" style="display: flex; flex-direction: column;">
            <div class="device-condition">
              <label>条件类型：</label>
              <el-radio v-model="deviceReportCondition.variableType" label="1">单变量</el-radio>
              <el-radio v-model="deviceReportCondition.variableType" label="2">双变量</el-radio>
            </div>
            <div class="device-condition">
              <label>状态1：</label>
              <template v-if="deviceReportCondition.variableType == 2">
                <el-button size="mini" @click="addDataItemByDevice(1)">
                  选择状态1
                </el-button>
              </template>
              <template v-else>
                <el-button size="mini" @click="addDataItemByDevice(0)">
                  选择变量
                </el-button>
              </template>
              <div v-if="deviceReportCondition.startItemId" style="margin-left: 20px;">
                <span>{{ deviceReportCondition.startItemName }}</span>&nbsp;&nbsp;
                <span><b>等于</b></span>&nbsp;&nbsp;
<!--                <el-input-number v-model="deviceReportCondition.startValue" placeholder="请输入值"-->
<!--                                 :min="0" :max="99999" :controls="false" :precision="0"-->
<!--                                 style="width: 120px;margin-right: 50px;"></el-input-number>-->
                <el-input v-model="deviceReportCondition.startValue" placeholder="请输入值"
                                 style="width: 120px;margin-right: 50px;"></el-input>
              </div>
            </div>
            <div class="device-condition">
              <label>状态2：</label>
              <el-button v-if="deviceReportCondition.variableType == 2"
                         size="mini" @click="addDataItemByDevice(2)">
                选择状态2
              </el-button>
              <div v-if="deviceReportCondition.endItemId" style="margin-left: 20px;">
                <span>{{ deviceReportCondition.endItemName }}</span>&nbsp;&nbsp;
                <span><b>等于</b></span>&nbsp;&nbsp;
<!--                <el-input-number v-model="deviceReportCondition.endValue" placeholder="请输入值"-->
<!--                                 :min="0" :max="99999" :controls="false" :precision="0"-->
<!--                                 style="width: 120px;margin-right: 50px;"></el-input-number>-->
                <el-input v-model="deviceReportCondition.endValue" placeholder="请输入值"
                                 style="width: 120px;margin-right: 50px;"></el-input>
              </div>
            </div>
            <div class="device-condition">
              <label>是否自动计算运行时间：</label>
              <el-radio v-model="deviceReportCondition.isGenCountTime" label="0">不计算</el-radio>
              <el-radio v-model="deviceReportCondition.isGenCountTime" label="1">计算</el-radio>
            </div>
          </div>
        </div>
        <div v-if="chooseGroupItemList.length > 0 && templateReportType != 2 && templateReportType != 5">
          <template>
            <el-divider content-position="left">{{ hasBelongDataFlag ? '显示方式' : '数据项排列方式' }}</el-divider>
            <div class="cy-line custom-tree">
              <el-radio-group v-model="itemShowParams.fieldType" @input="showDataTypeEvent">
                <el-radio label="1">横向</el-radio>
                <el-radio label="2">纵向</el-radio>
              </el-radio-group>
            </div>
          </template>
          <template v-if="!hasBelongDataFlag && templateReportType != 0">
            <el-divider content-position="left">值显示数量</el-divider>
            <div class="cy-line custom-tree" style="display: flex; align-items: center;">
              <div style="width: 50%;display: none;">
                <label>显示方式：</label>
                <el-radio v-model="itemShowParams.valType" label="1">横向</el-radio>
                <el-radio v-model="itemShowParams.valType" label="2">纵向</el-radio>
              </div>
              <div style="width: 50%;">
                <!--                <label>值显示数量：</label>-->
                <el-input-number label="请输入显示数量"
                                 v-model="itemShowParams.valLine"
                                 :min="1"
                                 :max="50"></el-input-number>
              </div>
            </div>
          </template>
        </div>
      </div>
      <div style="width: 100%;text-align: center;">
        <template v-if="!hasBelongDataFlag">
          <el-button type="warning" style="margin-top: 20px;" @click="itemEvent(0)">应用</el-button>
          <el-button type="primary" style="margin-top: 20px;" @click="itemEvent(1)">确定</el-button>
        </template>
        <template v-else>
          <el-button type="warning" style="margin-top: 20px;" @click="belongItemEvent(0)">应用</el-button>
          <el-button type="primary" style="margin-top: 20px;" @click="belongItemEvent(1)">确定</el-button>
        </template>
        <el-button style="margin-top: 20px;" @click="dialogClose">取消</el-button>
      </div>
    </el-dialog>

    <!-- 配置数据项取值条件 -->
    <el-dialog
        title="设置数据条件"
        width="600px"
        top="10vh"
        center
        v-dialog-drag
        v-if="dialogDataItemConfigVisible"
        :before-close="dialogDataItemConfigClose"
        :visible.sync="dialogDataItemConfigVisible"
        :close-on-click-modal="false"
        :append-to-body="true">
      <el-form label-width="120px" ref="itemConditionForm" :model="itemConditionForm" :rules="itemConditionFormRules">
        <el-form-item label="取值类型：" prop="valueType">
          <el-radio v-for="item in valueTypeList"
                    v-model="itemConditionForm.valueType"
                    :label="item.value">{{ item.label }}
          </el-radio>
        </el-form-item>
        <el-form-item label="取值模式：" prop="valueTakingMode" v-if="templateReportType == 1">
          <el-radio v-for="item in valueTakingModeList"
                    v-model="itemConditionForm.valueTakingMode"
                    :label="item.value">{{ item.label }}
          </el-radio>
        </el-form-item>
        <template v-if="false">
          <el-form-item label="取值时间：" prop="dateRange">
            <el-date-picker
                v-model="itemConditionForm.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>
        </template>
        <template v-if="templateReportType == 1">
          <el-divider content-position="left">取值周期设置</el-divider>
          <div class="cy-line">
            <el-form-item label="时间单位：" prop="bucketType">
              <el-radio v-for="item in bucketTypeList"
                        v-model="itemConditionForm.bucketType"
                        :label="item.value">{{ item.label }}
              </el-radio>
            </el-form-item>
            <el-form-item label="数据切换周期：" prop="bucketValue">
              <el-input-number label="请输入周期值"
                               v-model="itemConditionForm.bucketValue"
                               :precision="0"
                               :min="1"
                               :max="100"></el-input-number>
            </el-form-item>
          </div>
        </template>
      </el-form>
      <span slot='footer'>
        <el-button type="primary" @click="chooseDataItemConfigEvent" style="margin-top: 20px;">确定</el-button>
        <el-button @click="dialogDataItemConfigClose" style="margin-top: 20px;">取消</el-button>
      </span>
    </el-dialog>

    <!-- 配置驱动条件 -->
    <el-dialog
        title="配置驱动条件"
        width="600px"
        top="10vh"
        center
        v-dialog-drag
        v-if="dialogDriverConditionVisible"
        :before-close="dialogDriverConditionClose"
        :visible.sync="dialogDriverConditionVisible"
        :close-on-click-modal="false"
        :append-to-body="true">
      <el-form label-width="100px">
        <el-form-item label="驱动条件：">
          <el-radio v-for="item in driverConditionList"
                    v-model="eventMode"
                    :label="item.value">{{ item.label }}
          </el-radio>
        </el-form-item>
        <el-form-item label="驱动值：">
          <el-input-number label="请输入条件值"
                           v-model="modeValue"
                           :precision="0"
                           :controls="false"
                           :min="1"
                           :max="99999"></el-input-number>
        </el-form-item>
        <el-form-item label="选择驱动项：">
          <el-radio v-for="item in chooseGroupItemList"
                    v-model="isDriverItemId"
                    :label="item.id">{{ item.itemName }}
          </el-radio>
        </el-form-item>
      </el-form>
      <span slot='footer'>
        <el-button type="primary" @click="chooseDriverCondition" style="margin-top: 20px;">确定</el-button>
        <el-button @click="dialogDriverConditionClose" style="margin-top: 20px;">取消</el-button>
      </span>
    </el-dialog>

    <!-- 模板报表类型选择 -->
    <el-dialog
        title="选择模板报表类型"
        width="600px"
        center
        v-dialog-drag
        v-if="dialogReportTypeVisible"
        :before-close="dialogClose"
        :visible.sync="dialogReportTypeVisible"
        :close-on-click-modal="false"
        :append-to-body="true">
      <div>
        <label>报表类型：</label>
        <el-radio v-model="templateReportType" label="0">手动报表</el-radio>
        <el-radio v-model="templateReportType" label="1">自动报表</el-radio>
        <el-radio v-model="templateReportType" label="2">事件驱动报表</el-radio>
        <el-radio v-model="templateReportType" label="5">设备报表</el-radio>
      </div>
      <div v-if="templateReportType == 2 || templateReportType == 5" style="margin-top: 20px;">
        <label>记录数量：</label>
        <el-input-number label="请输入事件驱动显示记录数量"
                         v-model="templateEventReportNum"
                         :min="1"
                         :max="100"></el-input-number>
      </div>
      <div style="text-align: center; margin-top: 40px;">
        <el-button type="primary" @click="chooseTemplateReportTypeEvent">确定</el-button>
      </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>
  <div v-else></div>
</template>

<script>
import RulerView from '@/components/RulerView'
import PVirtualCheck from "@/components/PVirtualCheck"
import LuckyExcel from 'luckyexcel'
import {
  getAllDataModel,
  getAllItemGroup, getItemGroupById, getSysTableTemplate, getSysTableTemplateById,
  getTableItemGroupById,
  getTableTemplateById,
  saveReportTemplate,
  updateReportTemplate
} from "@/api/datasource";
import {
  getLuckysheetConfig, goPage,
  handleTree, showAlertMsgWin,
  showAlertWin, showConfirmWin,
  showLoading, showPromptWin,
  traverseNode,
  traverseVisible
} from "@/utils/cqcy";
import {getDictByKey} from "@/api/basic";
import {exportExcel} from "@/utils/export";
import {exportSheetExcel} from "@/utils/sheetToXls";
import {insertLuckysheetEChart, cellValueFormat, toLuckySheetJson, toExcelColumn} from "@/utils/luckysheettool";
import Print from "print-js";

import {print} from '@/utils/print'

export default {
  name: 'index',
  components: {
    RulerView,
    "p-virtual-check": PVirtualCheck,
  },
  data() {
    return {
		isUpdateShow: false,
      newItemId: 0,
      ctrlxstatus: false,
      sheetAxis: [],
      showReportData: true,
      dialogBarChartVisible: false,
      dialogDataItemVisible: false,
      dialogDeviceDataItemVisible: false,
      dialogDataModelVisible: false,
      dialogCommReportVisible: false,
      dialogGroupItemVisible: false,
      dialogBaseDataVisible: false,
      dialogReportTypeVisible: false,
      dialogDataItemConfigVisible: false,
      dialogDriverConditionVisible: false,
      isSelectAllItem: false,
      menuLeft: 0,
      menuTop: 0,
      visibleChartMenu: false,
      templateReportType: null,
      hasBelongDataFlag: false,
      eventMode: null,
      modeValue: null,
      isDriverItemId: null,
      templateEventReportNum: 100,
      chooseChartClz: '',
      chartConfigTitle: '',
      barChartForm: {
        title: '',
        type: '',
        subtitle: '',
        showTitle: '1',
        showLegend: '1',
        legendType: '1',
        legendData: ['模板数据1', '模板数据2'],
        xAxisData: ['数据1', '数据2', '数据3'],
        valueType: 0, // 0原始值1计算值
        valueTakingMode: 0, // 取值模式0平均值，1最大值，2最小值，3瞬时值
        bucketType: 1, // 时段类型0天，1时，2分，3秒
        bucketValue: 1
      },
      barChartOption: {},
      valueTypeList: [
        {'label': '原始值', 'value': 0},
        {'label': '计算值', 'value': 1}
      ],
      bucketTypeList: [
        {'label': '天', 'value': 0},
        {'label': '时', 'value': 1},
        {'label': '分', 'value': 2},
        {'label': '秒', 'value': 3},
      ],
      valueTakingModeList: [
        {'label': '平均值', 'value': 0},
        {'label': '最大值', 'value': 1},
        {'label': '最小值', 'value': 2},
        {'label': '瞬时值', 'value': 3},
      ],
      driverConditionList: [
        {'label': '大于', 'value': 0},
        {'label': '小于', 'value': 1},
        {'label': '等于', 'value': 2}
      ],
      // 条件值
      conditionObj: {
        itemName: '',
        eventModeName: '',
        modeValue: ''
      },
      // 设备报表条件
      deviceReportCondition: {
        type: null,
        variableType: '1',
        isGenCountTime: '0',
        startItemId: null,
        startItemName: null,
        startValue: '',
        endItemId: null,
        endItemName: null,
        endValue: ''
      },
      // 数据项取值条件
      itemConditionForm: {
        valueType: 0, // 0原始值1计算值
        valueTakingMode: 0, // 取值模式0平均值，1最大值，2最小值，3瞬时值
        bucketType: 1, // 时段类型0天，1时，2分，3秒
        bucketValue: 1, // 时段值
        dateRange: [], // 取值时间范围，手动报表必填
      },
      itemConditionFormRules: {
        valueType: [
          {required: true, message: '请选择取值类型', trigger: 'change'}
        ],
        valueTakingMode: [
          {required: true, message: '请选择取值模式', trigger: 'change'}
        ],
        bucketType: [
          {required: true, message: '请选择时间单位', trigger: 'change'}
        ],
        bucketValue: [
          {required: true, message: '请输入周期值', trigger: 'change'}
        ]
      },
      itemShowParams: {
        fieldType: '1',
        valType: '2',
        valLine: 1,
        dataId: new Date().getTime()
      },
      baseDataList: [],
      chooseBaseData: null,
      dataGroupList: [],
      dataGroupTypeList: [
        {'label': '所有', 'value': -1},
        {'label': '附属项', 'value': 0},
        {'label': '数据项', 'value': 1}
      ],
      itemDeviceDataListByTree: [],
      itemDataListByTree: [],
      itemDataListByGroupName: '',
      itemDataListByCalc: [],
      chooseGroupItemList: [],
      selectionDataItems: [],
      dataModelList: [],
      chooseDataModel: null,
      chooseDataItemIndex: null,
      bomCheckKey: 0,
      bomItemKey: 0,
      chooseDataGroup: null,
      chooseDataGroupType: null,
      chooseItemData: [],
      filterItemData: '',
      filterDeviceItemData: '',
      searchReportTxt: '',
      keyType: 'report_template',
      reportTypes: [],
      reportType: null,
      reportTypeInputName: '所有',
      reportTypeInputId: [],
      commTemplate: null,
      commTemplateList: [],
      templateName: '',
      templateId: '',
      templateVersion: '',
      reportTemplateItem: this.$store.getters.sessionName.REPORT_TEMPLATE_ITEM,
      reportInterval: null,
      toolItemChart: [],
      toolItemTable: [],
      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'],
        printId:null
      }
    }
  },
  watch: {
    '$route.query.t': {
      handler(now, old) {
        this.initLuckysheet(this.$route.query.id, this.$route.query.type)
      }
    },
    // filterItemData(val) {
    //   this.$refs.itemTree.filter(val)
    // },
    filterDeviceItemData(val) {
      this.$refs.deviceItemTree.filter(val)
    },
    visibleChartMenu(value) {
      if (value) {
        document.body.addEventListener('click', this.closeMenu)
      } else {
        document.body.removeEventListener('click', this.closeMenu)
      }
    }
  },
  mounted() {
    let _this = this
    $(function () {
      if (_this.showReportData) {
        let tempId = _this.$route.query.id
        let type = _this.$route.query.type
        _this.initLuckysheet(tempId, type)
      }
    })
    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()
      }
      if (event.ctrlKey && event.keyCode == 67) {
        _this.$data.ctrlxstatus = false;
        setTimeout(()=> {
          navigator.clipboard.writeText(cellValueFormat(luckysheet.getRangeHtml()))
        }, 100)
      } else if (event.ctrlKey && event.keyCode == 88) {
        _this.$data.ctrlxstatus = true;
        _this.$data.sheetAxis = luckysheet.getRange();
        console.log(luckysheet.getRangeAxis())
        setTimeout(()=> {
          navigator.clipboard.writeText(cellValueFormat(luckysheet.getRangeHtml()))
        }, 100)
      }
    }
  },
  created() {
    let _this = this

    // 强制关闭自定义图表右键菜单
    document.body.oncontextmenu = (e) => {
      setTimeout(() => {
        if ($('#luckysheet-rightclick-menu') && 'block' == $('#luckysheet-rightclick-menu').css('display')) {
          _this.closeMenu()
        }
      }, 500)
    }
  },
  destroyed() {
    localStorage.removeItem('REPORT_LEN')
    luckysheet.destroy()
    if (this.reportInterval) {
      clearInterval(this.reportInterval)
    }
  },
  methods: {
    /** 初始化操作 */
    initLuckysheet(tempId, type) {
      let _this = this
      this.selectionDataItems = []
      this.templateReportType = null
      let f = localStorage.getItem('IMPORT_FILE_FLAG')
      if (type === 'import' && f === 'true') { // 报表模板导入
        this.templateReportType = null
        this.dialogReportTypeVisible = true
        console.log('导入报表')
        return
      }
      if (tempId && tempId != -999) {
        _this.getTableTemplate(tempId, type)
        return
      }
      let expand = localStorage.getItem('EXPAND_REPORT_FLAG')
      if (expand === 'true') {
        localStorage.removeItem('EXPAND_REPORT_FLAG')
        this.showInitLuckysheet()
        return
      }
      this.templateReportType = null
      this.dialogReportTypeVisible = true
    },
    /** 显示表格数据信息 */
    showInitLuckysheet() {
      let _this = this
      this.templateId = null
      this.templateVersion = null
      this.templateName = ''
      this.toolItemChart = []
      this.toolItemTable = []
      luckysheet.destroy()
      let locItem = localStorage.getItem(_this.reportTemplateItem)
      if (locItem && JSON.parse(locItem).data && Array.isArray(JSON.parse(locItem).data)) {
        let option = JSON.parse(JSON.stringify(_this.luckysheetOption))
        option.data = JSON.parse(locItem).data
        _this.toolItemChart = JSON.parse(locItem).charts
        _this.toolItemTable = JSON.parse(locItem).tables
        option.hook = {
          workbookCreateAfter() {
            for (let i in _this.toolItemChart) {
              _this.insertEChartTool(JSON.parse(_this.toolItemChart[i].standby), false)
            }
            _this.autoSaveReportInfo()
            let _len = getLuckysheetConfig() ? getLuckysheetConfig().length : 0
            localStorage.setItem('REPORT_LEN', String(_len))
          },
          cellUpdated(r, c, newV, oldV) {
            if (!(r === 49 && c === 0)) {
              _this.forceRefreshLuckysheet()
            }
          },
          rangePasteBefore(r, d) {
            if (_this.$data.ctrlxstatus) {
              _this.$data.ctrlxstatus = false;
              luckysheet.clearRange({range: _this.$data.sheetAxis})
            }
          }
        }
        luckysheet.create(option)
        _this.templateName = localStorage.getItem(_this.reportTemplateItem + '_TITLE')
      } else {
        let option = JSON.parse(JSON.stringify(_this.luckysheetOption))
        option.hook = {
          workbookCreateAfter() {
            // 定时本地存储
            _this.autoSaveReportInfo()
          },
          cellUpdated(r, c, newV, oldV) {
            if (!(r === 49 && c === 0)) {
              _this.forceRefreshLuckysheet()
            }
          },
          rangePasteBefore(r, d) {
            if (_this.$data.ctrlxstatus) {
              _this.$data.ctrlxstatus = false;
              luckysheet.clearRange({range: _this.$data.sheetAxis})
            }
          }
        }
        luckysheet.create(option)
      }
    },
    getValByProp(lists = [], val) {
      let result = ''
      lists.forEach((list) => {
        if (list.value === val) {
          result = list.label
        }
      })
      return result
    },
    /** 多选事件 */
    selectionLineChangeHandle(val) {
      this.selectionDataItems = val
    },
    /** 删除临时数据项 */
    handleItemDelete(index, row) {
      let _this = this
      showConfirmWin(_this, null, '您确定要删除该数据项吗？', () => {
        _this.chooseGroupItemList.forEach((item, i) => {
          if (row.id == item.id) {
            _this.chooseGroupItemList.splice(i, 1)
          }
        })
      })
    },
    /** 多选事件 */
    multipleDataItemEvent() {
      // 事件驱动报表
      // if (this.templateReportType == 2) {
      //   showAlertMsgWin(this, null, '事件驱动报表不需要设置取值条件！')
      //   return
      // }
      if (!this.selectionDataItems || this.selectionDataItems.length == 0) {
        showAlertMsgWin(this, null, '请至少选择一项数据！')
        return
      }
      this.dialogDataItemConfigVisible = true
    },
    setDataCondition(data) {
      data.valueTakingMode = this.itemConditionForm.valueTakingMode
      data.bucketType = this.itemConditionForm.bucketType
      data.valueType = this.itemConditionForm.valueType
      data.bucketValue = this.itemConditionForm.bucketValue
      if (this.templateReportType == 0) {
        data.startTime = this.itemConditionForm.dateRange[0]
        data.endTime = this.itemConditionForm.dateRange[1]
      }
    },
    /** 数据项配置结果集事件 */
    chooseDataItemConfigEvent() {
      // if (this.templateReportType == 0 && (!this.itemConditionForm.dateRange || this.itemConditionForm.dateRange.length == 0)) {
      //   showAlertMsgWin(this, null, '取值时间范围不能为空！')
      //   return
      // }
      this.$refs['itemConditionForm'].validate((valid) => {
        if (valid) {
          this.$nextTick(() => {
            let _this = this
            const loading = showLoading(_this, '保存中，请稍候···')
            if (_this.chooseGroupItemList.length == _this.selectionDataItems.length) {
              _this.chooseGroupItemList.forEach((data) => {
                _this.setDataCondition(data)
              })
            } else {
              _this.selectionDataItems.forEach((item) => {
                if (item.checked || item.isFlag == 'update') {
                  _this.chooseGroupItemList.forEach((data) => {
                    if (data.id === item.id) {
                      _this.setDataCondition(data)
                    }
                  })
                }
              })
            }
            loading.close()
            _this.dialogDataItemConfigClose()
            _this.dialogDataItemConfigVisible = false
            _this.$refs.plConditionTable.clearSelection()
            _this.selectionDataItems = []
            _this.bomItemKey++
          })
        }
      })
    },
    /** 配置驱动条件 */
    setDriverCondition() {
      if (this.chooseGroupItemList.length == 0) {
        showAlertMsgWin(this, null, '请选择数据组项！')
        return
      }
      this.dialogDriverConditionVisible = true;
    },
    /** 选择事件驱动结果集 */
    chooseDriverCondition() {
      if (this.isDriverItemId == null || this.eventMode == null || this.modeValue == null) {
        showAlertMsgWin(this, null, '请配置驱动条件、驱动值、驱动项！')
        return
      }
      this.chooseGroupItemList.forEach((item, i) => {
        item.isDriverItem = null;
        if (item.id == this.isDriverItemId) {
          item.isDriverItem = 1;
        }
      })
      this.dialogDriverConditionVisible = false;
    },
    /** 关闭配置驱动条件界面 */
    dialogDriverConditionClose() {
      this.eventMode = null
      this.modeValue = null
      this.isDriverItemId = null
      this.dialogDriverConditionVisible = false
    },
    /** 选择模板报表类型 */
    chooseTemplateReportTypeEvent() {
      if (!this.templateReportType) {
        showAlertMsgWin(this, null, '请选择模板报表类型！')
        return
      }
      this.dialogReportTypeVisible = false
      let f = localStorage.getItem('IMPORT_FILE_FLAG')
      if (f === 'true') {
        this.resetReport(true)
        this.$refs.importFileNode.dispatchEvent(new MouseEvent('click'))
        localStorage.removeItem('IMPORT_FILE_FLAG')
        return
      }
      localStorage.removeItem(this.reportTemplateItem)
      this.showInitLuckysheet()
    },
    /** 实现类似刷新效果 */
    forceRefreshLuckysheet() {
      if (luckysheet) {
        luckysheet.setCellValue(49, 0, luckysheet.getCellValue(49, 0))
      }
    },
    checkChangeChoose(datas) {
      this.itemDataListByTree = datas
    },
    checkChangeAllChoose(flag) {
      this.isSelectAllItem = flag
    },
    /** 数据项搜索条件 */
    itemChangeEvent(value) {
      let arr = JSON.parse(JSON.stringify(this.itemDataListByTree))
      if (!value || !value.trim()) {
        this.itemDataListByTree = arr
        return
      }
      let filterList = arr.filter(v => {
        return v.itemName.indexOf(value) !== -1
      })
      this.itemDataListByTree = filterList
    },
    /** 数据项全选事件 */
    selectAllItem(val) {
      // const data = traverseNode(this.$refs.itemTree.store.root.childNodes)
      // if (this.isSelectAllItem) {
      //   // this.$refs.itemTree.setCheckedNodes(this.itemDataListByTree)
      //   let arr = traverseVisible(data)
      //   let ids = Array.from(arr, ({id}) => id)
      //   this.$refs.itemTree.setCheckedKeys(ids)
      // } else {
      //   this.$refs.itemTree.setCheckedNodes([])
      // }
      this.$refs.pvcChoose.checkedAll(val)
    },
    /**数据项单项选择判断 */
    handleItemCheckChange(data, checked, indeterminate) {
      const tdata = traverseNode(this.$refs.itemTree.store.root.childNodes)
      let arr = traverseVisible(tdata)
      if (arr.length == this.$refs.itemTree.getCheckedNodes().length) {
        this.isSelectAllItem = true
      } else {
        this.isSelectAllItem = false
      }
    },
    /** 处理日期显示数字问题 */
    withDateData(excelData) {
      if (!excelData) {
        return
      }
      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",
                  }
            }
          })
        }
      })
    },
    /** 保存模版信息 */
    saveReportTemplate(type) {
      let _templateName = this.templateName
      let _title = '保存'
      if (type == 'saveAs') {
        this.templateName = '副本_' + _templateName
        _title = '另存为'
        showPromptWin(this, _title, '请输入/确认报表模板名称', this.templateName, (val) => {
          if (!val) {
            return '模板名称不能为空'
          }
          if (val.length > 20) {
            return '模板名称必须在20字以内'
          }
        }, (value) => {
          this.saveReportTemplateData(type, value, _templateName, _title)
        }, () => {
          this.templateName = _templateName
        })
        return
      }
      if (!this.templateName || this.templateName.length > 20) {
        showAlertMsgWin(this, null, '模板名称不能为空且必须在20字以内！')
        return
      }
      this.saveReportTemplateData(type, this.templateName, _templateName, _title)
    },
    saveReportTemplateData(type, templateName, _templateName, _title) {
      const loading = showLoading(this, '保存中，请稍候···')
      let option = JSON.parse(JSON.stringify(this.luckysheetOption))
      let _data = JSON.parse(getLuckysheetConfig())
      if (!_data) {
        loading.close()
        showAlertMsgWin(this, null, '保存失败！')
        return
      }
      let excelData = _data[0].data
      // 处理日期显示数字问题
      this.withDateData(excelData)
      // 检查数据项设置的字段值是否被改变
      this.checkToItemTable()
      let result = {
        'option': option,
        'data': _data
      }
      let data = {
        'templateType': this.templateReportType,
        'templateName': templateName,
        'templateData': JSON.stringify(result),
        'tableTemplateItemList': this.toolItemTable,
        'tableTemplateChartList': this.toolItemChart
      }
      // 事件驱动模板
      if (this.templateReportType == 2) {
        data.eventNum = this.templateEventReportNum;
        if (this.eventMode == null || this.modeValue == null) {
          // showAlertMsgWin(this, null, '保存失败！驱动条件或驱动值未设置')
          // return
        }
        data.eventMode = this.eventMode;
        data.modeValue = this.modeValue;
      }
      // 设备报表模板
      if (this.templateReportType == 5) {
        data.eventNum = this.templateEventReportNum
        data.isGenCountTime = this.deviceReportCondition.isGenCountTime
        data.variableType = this.deviceReportCondition.variableType
        data.startItemId = this.deviceReportCondition.startItemId
        data.endItemId = this.deviceReportCondition.endItemId
        data.startValue = this.deviceReportCondition.startValue
        data.endValue = this.deviceReportCondition.endValue
        let _temp = null
        data.tableTemplateItemList.forEach((_t) => {
          // 单变量
          if (data.variableType == 1) {
            if (data.startItemId == _t.itemId) {
              _t.timeItemType = 0
              _temp = JSON.parse(JSON.stringify(_t))
            }
          } else {
            if (data.startItemId == _t.itemId) {
              _t.timeItemType = 0
            }
            if (data.endItemId == _t.itemId) {
              _t.timeItemType = 1
            }
          }
        })
        if (_temp) {
          _temp.timeItemType = 1
          data.tableTemplateItemList.push(_temp)
        }
      }
      if (this.templateId && type != 'saveAs') {
        data.id = this.templateId
        data.version = this.templateVersion
        updateReportTemplate(data).then(res => {
          loading.close()
          let msg = res.data ? '修改成功！' : '修改失败！'
          showAlertMsgWin(this, null, msg, () => {
            this.resetReport(true)
            this.getTableTemplate(this.$route.query.id, this.$route.query.type)
            this.$emit('refreshReportTemplateData', new Date().getTime())
          })
        }).catch((e) => {
          loading.close()
          this.templateName = _templateName
          showAlertWin(this, null, e)
        })
      } else {
        saveReportTemplate(data).then(res => {
          loading.close()
          let msg = res.data ? _title + '成功！' : _title + '失败！'
          showAlertMsgWin(this, null, msg)
          this.resetReport(true)
          this.$emit('refreshReportTemplateData', new Date().getTime())
        }).catch((e) => {
          loading.close()
          this.templateName = _templateName
          showAlertWin(this, null, e)
        })
      }
    },
    /** 关闭报表 */
    closeReport() {
      goPage(this, '/index')
    },
    /** 重置报表信息 */
    resetReport(clearFlag) {
      let _this = this
      localStorage.removeItem(this.reportTemplateItem)
      if (clearFlag) {
        this.templateId = null
        this.templateVersion = null
        this.templateName = ''
      }
      this.toolItemChart = []
      this.toolItemTable = []
      luckysheet.destroy()
      let option = JSON.parse(JSON.stringify(this.luckysheetOption))
      option.hook = {
        workbookCreateAfter() {
          _this.autoSaveReportInfo()
        },
        cellUpdated(r, c, newV, oldV) {
          if (!(r === 49 && c === 0)) {
            _this.forceRefreshLuckysheet()
          }
        },
        rangePasteBefore(r, d) {
          if (_this.$data.ctrlxstatus) {
            _this.$data.ctrlxstatus = false;
            luckysheet.clearRange({range: _this.$data.sheetAxis})
          }
        }
      }
      luckysheet.create(option)
    },
    /** 导入报表 */
    loadExcel(evt) {
      console.log(evt)
      let _this = this
      const files = evt.target.files
      if (files == null || files.length == 0) {
        showAlertMsgWin(_this, null, '请选择文件！')
        return
      }
      console.log(files)
      // 获取文件名
      let name = files[0].name
      // 获取文件后缀
      let suffixArr = name.split("."),
          suffix = suffixArr[suffixArr.length - 1]
      if (suffix != 'xlsx') {
        showAlertMsgWin(_this, null, '只能导入xlsx格式文件！')
        return
      }
      const loading = showLoading(this, '文件导入中，请稍候···')
      // 转换导入的excel
      LuckyExcel.transformExcelToLucky(files[0], function (exportJson, luckysheetfile) {
        if (exportJson.sheets == null || exportJson.sheets.length == 0) {
          loading.close()
          showAlertMsgWin(_this, null, '无法读取excel文件的内容，当前不支持xls文件！')
          return
        }
        console.log('exportJson', exportJson)
        // 销毁之前的表格
        window.luckysheet.destroy()
        // 创建新的表格
        let option = JSON.parse(JSON.stringify(_this.luckysheetOption))
        option.data = exportJson.sheets
        option.title = exportJson.info.name
        // option.data = toLuckySheetJson(exportJson.sheets)
        option.hook = {
          workbookCreateAfter() {
            _this.autoSaveReportInfo()
              toLuckySheetJson(luckysheet)
          },
          cellUpdated(r, c, newV, oldV) {
            if (!(r === 49 && c === 0)) {
              _this.forceRefreshLuckysheet()
            }
          },
          rangePasteBefore(r, d) {
            if (_this.$data.ctrlxstatus) {
              _this.$data.ctrlxstatus = false;
              luckysheet.clearRange({range: _this.$data.sheetAxis})
            }
          }
        }

        window.luckysheet.create(option)
        document.getElementsByClassName('import-file-node')[0].value = ''
        loading.close()
      })
    },
    /** 生成唯一 ID 字符串 */
    generateRandomKey(prefix) {
      if (prefix == null) {
        prefix = 'chart'
      }
      let userAgent = window.navigator.userAgent
          .replace(/[^a-zA-Z0-9]/g, '')
          .split('')
      let mid = ''
      for (let i = 0; i < 12; i++) {
        mid += userAgent[Math.round(Math.random() * (userAgent.length - 1))]
      }
      let time = new Date().getTime()

      return prefix + '_' + mid + '_' + time
    },
    /** 向 Excel 插入图表 */
    insertEChartTool(info, flag, item, chartInfo) {
      let _this = this
      let _self = this
      // 数据参数
      if (flag) {
        let params = {
          'chartName': chartInfo.title,
          'chartType': chartInfo.type,
          'valueTakingMode': chartInfo.valueTakingMode,
          'valueType': chartInfo.valueType,
          'bucketType': chartInfo.bucketType,
          'bucketValue': chartInfo.bucketValue,
          'startTime': null,
          'endTime': null,
          'standby': JSON.stringify(info),
          'tableTemplateChartItemList': []
        }
        item.forEach((t) => {
          params.tableTemplateChartItemList.push({
            'itemId': t.id,
            'itemName': t.itemName,
            'itemReadName': t.itemReadName,
            'itemGroupId': t.itemGroupId
          })
        })
        console.log(params)
        if (!_this.toolItemChart) _this.toolItemChart = []
        _this.toolItemChart.push(params)
      }

      setTimeout(() => {
        const sheet = luckysheet.getLuckysheetfile()[0]
        let optionData = sheet.data
        try {
          insertLuckysheetEChart({
            selector: '#luckysheet',
            info,
            sheet,
            optionData,
            echarts,
            luckysheet,
            $,
            _self
          })
        } catch (e) {
          console.error(e)
        }
        // 图表事件监听
        $('.' + info.className).mousedown(function (e) {
          if (3 == e.which) {
            _this.closeMenu()
            _this.menuTop = e.pageY
            _this.menuLeft = e.pageX / 2
            _this.visibleChartMenu = true
            _this.chooseChartClz = info.className
            setTimeout(() => {
              $('#luckysheet-rightclick-menu').css('display', 'none')
            }, 100)
          }
        })
      }, 200)
    },
    /** 获取右侧数据组列表 */
    getDataGroupList(callback) {
      getAllItemGroup(this.templateReportType).then(res => {
        this.dataGroupList = res.data
        if (callback) callback()
      }).catch((e) => {
        showAlertWin(this, null, e)
      })
    },
    /** 选择数据源值改变事件 */
    dataSourceChange(val) {
      this.chooseDataGroup = val
      this.chooseItemData = []
    },
    /** 数据项搜索过滤 */
    filterItemDataNode(value, data) {
      if (!value) return true
      return data.itemName.indexOf(value) !== -1
    },
    /** 添加数据项 */
    addDataItem() {
      let id = this.chooseDataGroup
      // let _type = this.chooseDataGroupType
      if (!id) {
        showAlertMsgWin(this, null, '请选择数据组！')
        return
      }
      this.isSelectAllItem = false
      this.itemDataListByTree = []
      const loading = showLoading(this, '加载中，请稍候···')
      const itemType =  this.newItemId == 1 ? 1 : (this.hasBelongDataFlag ? 0 : null);
      getTableItemGroupById(id, itemType).then(res => {
        loading.close()
        this.itemDataListByGroupName = res.data.groupName
        let flag = this.chooseGroupItemList.length == 0
        let tempList = flag ? this.chooseItemData : this.chooseGroupItemList
        let _data = res.data.itemList ? res.data.itemList : []
        _data.forEach((t) => {
          t.label = t.itemName
          t.value = t.itemReadName
          t.checked = false
        })
        this.itemDataListByTree = _data ? _data : []
        if (this.$refs.itemTree) this.$refs.itemTree.setCheckedKeys([])
        if (tempList.length > 0) {
          let idList = Array.from(tempList, ({id}) => id)
          setTimeout(() => {
            if (this.$refs.itemTree) {
              if (flag) this.$refs.itemTree.setCheckedKeys([])
              else this.$refs.itemTree.setCheckedKeys(idList)
            }
            if (this.itemDataListByTree.length == this.chooseGroupItemList.length) {
              this.isSelectAllItem = true
            } else {
              this.isSelectAllItem = false
            }
          }, 100)
        }
        this.dialogDataItemVisible = true
      }).catch((e) => {
        loading.close()
        showAlertWin(this, null, e)
      })
    },
    /** 添加数据项（设备报表条件数据项） */
    addDataItemByDevice(type) {
      if (!this.deviceReportCondition.variableType) {
        showAlertMsgWin(this, null, '请选择条件类型！')
        return
      }
      this.deviceReportCondition.type = type
      this.filterDeviceItemData = ''
      let _data = this.chooseGroupItemList
      this.itemDeviceDataListByTree = _data ? _data : []
      this.dialogDeviceDataItemVisible = true
    },
    /** 选择的数据项：第一步 */
    chooseItemTreeEvent() {
      let _temp = JSON.parse(JSON.stringify(this.itemDataListByTree))
      if (!_temp || _temp.length == 0) {
        showAlertMsgWin(this, null, '请选择数据项！')
        return
      }
      for (let i = _temp.length - 1; i >= 0; i --) {
        if (!_temp[i].checked) {
          _temp.splice(i, 1)
        }
      }
      if (_temp.length == 0) {
        showAlertMsgWin(this, null, '请选择数据项！')
        return
      }
      // if (_temp.length > 100) {
      //   showAlertMsgWin(this, null, '报表数据项选择超过上限100！')
      //   return
      // }
      // let flag = this.chooseGroupItemList.length == 0
      // let tempList = flag ? this.chooseItemData : this.chooseGroupItemList
      // let _tempList = JSON.parse(JSON.stringify(tempList))
      // let chooseList = []
      // for (let i in checkedNodes) {
      //   let checkedNode = checkedNodes[i]
      //   if (checkedNode.children && checkedNode.children.length > 0) {
      //     continue
      //   }
      //   // 优化数据项选择条件后重新选择数据项时条件会消失
      //   for (let j in _tempList) {
      //     if (_tempList[j].id == checkedNode.id) {
      //       checkedNode.valueTakingMode = _tempList[j].valueTakingMode
      //       checkedNode.valueType = _tempList[j].valueType
      //       checkedNode.bucketType = _tempList[j].bucketType
      //       checkedNode.bucketValue = _tempList[j].bucketValue
      //     }
      //   }
      //   console.log(checkedNode)
      //   chooseList.push(checkedNode)
      // }
      // this.chooseItemData = chooseList
	  console.log(this.chooseItemData)
	  console.log(_temp)
      this.chooseItemData = _temp
      this.dialogDataItemVisible = false
      if (this.dialogGroupItemVisible) {
        this.initGroupItem()
      }
      this.filterItemData = ''
      // this.getAllDataModel(chooseList)
    },
    /** 选择的设备报表数据 */
    chooseDeviceItemTreeEvent() {
      let checkedNodes = this.$refs.deviceItemTree.getCheckedNodes(false, true)
      if (checkedNodes.length != 1) {
        showAlertMsgWin(this, null, '请选择一项数据项！')
        return
      }
      // 单变量
      if (this.deviceReportCondition.type == 0) {
        this.deviceReportCondition.startItemId = checkedNodes[0].id
        this.deviceReportCondition.startItemName = checkedNodes[0].itemName
        this.deviceReportCondition.endItemId = checkedNodes[0].id
        this.deviceReportCondition.endItemName = checkedNodes[0].itemName
      }
      // 双变量：开始
      else if (this.deviceReportCondition.type == 1) {
        this.deviceReportCondition.startItemId = checkedNodes[0].id
        this.deviceReportCondition.startItemName = checkedNodes[0].itemName
      }
      // 双变量：结束
      else if (this.deviceReportCondition.type == 2) {
        this.deviceReportCondition.endItemId = checkedNodes[0].id
        this.deviceReportCondition.endItemName = checkedNodes[0].itemName
      }
      this.deviceReportCondition.type = null
      this.dialogDeviceDataItemVisible = false
    },
    initGroupItem() {
      let group = null
      for (let i = 0; i < this.dataGroupList.length; i++) {
        if (this.dataGroupList[i].id == this.chooseDataGroup) {
          group = this.dataGroupList[i]
          break
        }
      }
	  if (!this.isUpdateShow) {
		  this.chooseGroupItemList = this.chooseGroupItemList.filter(function (item, index) {
			return item.itemGroupId != group.id;
		  })
	  }

      for (let j = 0; j < this.chooseItemData.length; j++) {
        this.chooseItemData[j].groupName = group.groupName
        this.chooseGroupItemList.push(this.chooseItemData[j])
      }
      let obj = {};
      this.chooseGroupItemList = this.chooseGroupItemList.reduce(function (item, next) {
        obj[next.id] ? '' : obj[next.id] = true && item.push(next)
        return item;
      }, [])
    },
    /** 查询所有数据模型 */
    getAllDataModel(itemList) {
      let loading = showLoading(this, '数据加载中，请稍候···')
      let params = {
        'page': 1,
        'limit': 1000
      }
      getAllDataModel(params).then(res => {
        loading.close()
        if (!res.data) {
          this.chooseItemData = itemList
          return
        }
        this.dataModelList = res.data.dataModelList
        this.itemDataListByCalc = JSON.parse(JSON.stringify(itemList))
        for (let i in this.itemDataListByCalc) {
          let temp = this.itemDataListByCalc[i]
          temp.rule = {
            'operationRule': '默认值'
          }
        }
      }).catch((e) => {
        loading.close()
        showAlertWin(this, null, e)
      })
    },
    /** 选择数据模型 */
    handleChoose(index, row) {
      this.chooseDataItemIndex = index
      this.chooseDataModel = null
      this.dialogDataModelVisible = true
    },
    /** 保存数据模型事件 */
    saveDataModelEvent() {
      if (!this.chooseDataModel) {
        showAlertMsgWin(this, null, '请选择表达式！')
        return
      }
      let item = {}
      for (let i in this.dataModelList) {
        if (this.chooseDataModel == this.dataModelList[i].id) {
          item = this.dataModelList[i]
        }
      }
      this.$nextTick(() => {
        this.itemDataListByCalc[this.chooseDataItemIndex].rule = item
        this.bomCheckKey++
      })
      this.dialogDataModelVisible = false
    },
    /** 报表模板库 */
    templateEvent() {
      this.commTemplateList = []
      this.reportTypes = []
      this.reportType = null
      // 获取报表类别
      getDictByKey({
        'keyType': 'report_template'
      }).then(res => {
        this.reportTypes.push({
          'id': -1,
          'dictKey': '所有',
          'dictValue': ''
        })
        let t = handleTree(res.data, 'id', 'parentId', 'children')
        this.reportTypes = this.reportTypes.concat(t)
        this.dialogCommReportVisible = true
        this.handleReportTypeChange([-1])
      }).catch((e) => {
        showAlertWin(this, null, e)
      })
    },
    clickCascader() {
      this.$refs.reportType.$el.click()
      this.reportType = null
    },
    searchDictTree(nodes, searchKey) {
      for (let _i = 0; _i < nodes.length; _i++) {
        if (nodes[_i].id === searchKey) {
          return nodes[_i].dictKey
        } else {
          if (nodes[_i].children && nodes[_i].children.length > 0) {
            let res = this.searchDictTree(nodes[_i].children, searchKey)
            if (res) {
              return res
            }
          }
        }
      }
      return null
    },
    handleReportTypeInputChange() {
      let arr = this.reportTypeInputId.length == 0 ? [-1] : this.reportTypeInputId
      this.handleReportTypeChange(arr)
    },
    /** 报表行业选择 */
    handleReportTypeNodeChange(val) {
      this.handleReportTypeChange(val)
    },
    /** 报表行业选择 */
    handleReportTypeChange(val) {
      if (!val || val.length == 0) {
        return
      }
      let nameArr = []
      val.forEach(v => {
        let name = this.searchDictTree(this.reportTypes, v)
        nameArr.push(name)
      })
      this.reportTypeInputName = nameArr.join(' / ')
      this.reportTypeInputId = val
      let id = val[val.length - 1]
      if (id === -1) {
        this.reportTypeInputName = '所有'
        this.reportTypeInputId = []
        id = null
      }
      let params = {
        'keyType': this.keyType,
        'dictId': id
      }
      if (this.searchReportTxt && this.searchReportTxt.trim()) {
        params.templateName = this.searchReportTxt.trim()
      }
      getSysTableTemplate(params).then(res => {
        if (!res.data) {
          return
        }
        this.commTemplateList = res.data
      }).catch((e) => {
        showAlertWin(this, null, e)
      })
    },
    /** 选择模板报表 */
    commReportEvent(flag) {
      let _this = this
      if (!_this.commTemplate) {
        showAlertMsgWin(_this, null, '请选择模板！')
        return
      }
      const loading = showLoading(_this, '加载中，请稍候···')
      getSysTableTemplateById(_this.commTemplate.id).then(res => {
        if (!res || !res.data) {
          loading.close()
          return
        }
        let locItem = res.data.templateData
        luckysheet.destroy()
        let option = JSON.parse(JSON.stringify(_this.luckysheetOption))
        option.data = JSON.parse(locItem).data
        this.toolItemChart = JSON.parse(locItem).charts
        option.hook = {
          workbookCreateAfter() {
            loading.close()
            if (flag == 1) _this.dialogClose()
          },
          cellUpdated(r, c, newV, oldV) {
            if (!(r === 49 && c === 0)) {
              _this.forceRefreshLuckysheet()
            }
          },
          rangePasteBefore(r, d) {
            if (_this.$data.ctrlxstatus) {
              _this.$data.ctrlxstatus = false;
              luckysheet.clearRange({range: _this.$data.sheetAxis})
            }
          }
        }
        luckysheet.create(option)
      }).catch((e) => {
        loading.close()
        showAlertWin(_this, null, e)
      })
    },
    /** 数据项 */
    dataEvent(type) {
		this.isUpdateShow = false
      let rangeWithFlatten = luckysheet.getRangeWithFlatten()
      if (!rangeWithFlatten || rangeWithFlatten.length != 1) {
        showAlertMsgWin(this, null, '请选择一项单元格！')
        return
      }
        this.newItemId = 0;
      // 基础数据项
      if (type == 1) {
        this.getBaseDataItem()
        return
      } else if (type == 3) {
          this.newItemId = 1;
      }
      // 初始化数据显示方式
      this.itemShowParams = {
        fieldType: '1',
        valType: '2',
        valLine: 1,
        dataId: new Date().getTime()
      }
      this.deviceReportCondition = {
        type: null,
        variableType: '1',
        isGenCountTime: '0',
        startItemId: null,
        startItemName: null,
        startValue: '',
        endItemId: null,
        endItemName: null,
        endValue: ''
      }
      this.hasBelongDataFlag = false
      if (type == 2) this.hasBelongDataFlag = true
      this.chooseDataGroup = null
      this.getDataGroupList()
      this.dialogGroupItemVisible = true
    },
    /** 查询字典表：基础数据项 */
    getBaseDataItem() {
      getDictByKey({
        'keyType': 'base_data_item'
      }).then(res => {
        this.dialogBaseDataVisible = true
        this.baseDataList = res.data
      }).catch((e) => {
        showAlertWin(this, null, e)
      })
    },
    /** 基础数据项插入 */
    baseItemEvent(flag) {
      if (!this.chooseBaseData) {
        showAlertMsgWin(this, null, '请选择基础数据项！')
        return
      }
      let rangeWithFlatten = luckysheet.getRangeWithFlatten()
      let c = rangeWithFlatten[0].c
      let r = rangeWithFlatten[0].r
      luckysheet.setCellValue(r, c, this.chooseBaseData)
      if (flag == 1) this.dialogBaseDataClose()
    },
    /** 动态数据项插入 */
    itemEvent(flag) {
      if (this.chooseGroupItemList.length == 0) {
        showAlertMsgWin(this, null, '请选择数据组项！')
        return
      }
      // 检查是否设置数据读取条件
      let condCount = 0
      this.chooseGroupItemList.forEach((item, i) => {
        if (this.templateReportType != 2
            && (item.valueTakingMode == null || item.bucketType == null
                || item.bucketValue == null)) {
          condCount++
        }
      })
      if (condCount > 0) {
        showAlertMsgWin(this, null, '请设置数据条件！')
        return
      }
      // 设备报表
      if (this.templateReportType == 5) {
        if (!this.deviceReportCondition.startItemId || !this.deviceReportCondition.endItemId) {
          showAlertMsgWin(this, null, '请设置设备报表条件！')
          return
        }
        if (this.deviceReportCondition.startItemId == this.deviceReportCondition.endItemId
            && this.deviceReportCondition.startValue == this.deviceReportCondition.endValue) {
          showAlertMsgWin(this, null, '设备报表开始和结束变量条件不合法！')
          return
        }
      }
      let c, r
      condCount = 0;
      let rangeWithFlatten = luckysheet.getRangeWithFlatten()
      c = rangeWithFlatten[0].c
      r = rangeWithFlatten[0].r
      // 事件驱动报表格式设置
      if (this.templateReportType == 2) {
        this.chooseGroupItemList.forEach((item, i) => {
          if (item.valueType == null) {
            condCount++
          }
        })
        if (condCount > 0) {
          showAlertMsgWin(this, null, '请设置数据条件！')
          return
        }
        // 清空之前选择的数据组、数据项信息
        let tempItem = JSON.parse(JSON.stringify(this.toolItemTable))
        tempItem.forEach((t, i) => {
          if (i == 0) {
            luckysheet.setCellValue(t.xaxis - 1, t.yaxis - 1, '')
          }
          luckysheet.setCellValue(t.xaxis - 1, t.yaxis, '')
          luckysheet.setCellValue(t.xaxis, t.yaxis, '')
        })
        this.toolItemTable = []
        luckysheet.setCellValue(r, c, '数据时间')
        r++
        c++
      }
      // 设备报表
      else if (this.templateReportType == 5) {
        console.log(this.deviceReportCondition)
        luckysheet.setCellValue(r, c, '序号')
        luckysheet.setCellValue(r + 1, c, '${index}')
        c++
        luckysheet.setCellValue(r, c, '开始时间')
        luckysheet.setCellValue(r + 1, c, '${startTime}')
        c++
        luckysheet.setCellValue(r, c, '停止时间')
        luckysheet.setCellValue(r + 1, c, '${stopTime}')
        if (this.deviceReportCondition.isGenCountTime == 1) {
          c++
          luckysheet.setCellValue(r, c, '运行时间（分钟）')
          luckysheet.setCellValue(r + 1, c, '${runMinute}')
        }
        r++
        c++
      }
      // 值显示数量
        let addrObj = {}
      let startX = 0;
      let startY = 0;
	  console.log(this.chooseGroupItemList)
      for (let n = 0; n < this.itemShowParams.valLine; n++) {
          for (let i = 0; i < this.chooseGroupItemList.length; i++) {
              let item = this.chooseGroupItemList[i]
              // this.chooseGroupItemList.forEach((item, i) => {
              let groupId = item.itemGroupId
              let name = item.itemName
              let describe = item.describe
              // name = name.substring(name.lastIndexOf('.') + 1)
              let v = '${' + groupId + '.' + name + '}'
			  if (item.itemReadName) {
				  v = '${' + item.dataSourceName + '.' + item.itemReadName + '}'
          // v = item.dataSourceName + "." + item.itemReadName
			  }
			  if (!item.placeHolder) {
				item.placeHolder = v
			  } else {
				  v = item.placeHolder
			  }
              item.standby = JSON.stringify({
                  'index': n,
                  'fieldType': this.itemShowParams.fieldType
              })
              let p_c = parseInt(c)
              let p_r = parseInt(r)
              // fieldType：1 横向 2 纵向
              if (this.itemShowParams.fieldType == '2') {
                  p_r += i
                  p_c += n
              } else {
                  p_c += i
                  p_r += n
              }
              item.xaxis = p_r
              item.yaxis = p_c
              if (i == 0 && n == 0) {
                  startX = p_r;
                  startY = p_c;
              }
              // 事件驱动报表和设备报表格式设置
              if (this.templateReportType == 2 || this.templateReportType == 5) {
                  // luckysheet.setCellValue((p_r > 1 ? (p_r - 1) : 0), p_c, describe ? describe : name)
                  addrObj[(p_r > 1 ? (p_r - 1) : 0) + "_" + p_c] = describe ? describe : name
                  if (i == 0 && n == 0) {
                      startX = (p_r > 1 ? (p_r - 1) : 0) ;
                  }
              }
              // luckysheet.setCellValue(p_r, p_c, v)
              addrObj[p_r + "_" +p_c] = v
              if (n == 0) this.pushToItemTable(item)
              // })
          }
      }
        // console.log(addrObj)
      // 拼接数据项二位数组
        let cloumn = [];
        let addX = 0;

        while (true) {
            let x = startX + addX;
            let y = startY;
            let addY = 0;
            let row = [];
            while (true) {
              if (addrObj[x+"_"+(y + addY)] != null) {
                  // console.log(x+"_"+(y + addY))
                  row.push(addrObj[x+"_"+(y + addY)])
              } else {
                  break;
              }
                addY++;
            }
            cloumn.push(row);
            if (addrObj[x+"_"+y] == null) {
                break;
            }
            addX++;
        }
        luckysheet.setValueBatch(cloumn, {
            sr: startY,
            sc: startX,
            er: cloumn[0].length + startY - 1,
            ec: cloumn.length + startX - 1
        })


      if (flag == 1) {
        this.chooseGroupItemList = []
        this.chooseDataGroup = null
        this.chooseItemData = []
        this.dialogGroupItemVisible = false
      }
    },
    /** 附属属性值 */
    belongItemEvent(flag) {
      if (this.chooseGroupItemList.length == 0) {
        showAlertMsgWin(this, null, '请选择数据组项！')
        return
      }
      let rangeWithFlatten = luckysheet.getRangeWithFlatten()
      let c = rangeWithFlatten[0].c
      let r = rangeWithFlatten[0].r
      this.chooseGroupItemList.forEach((item, i) => {
        let dataValue = item.dataValue
        dataValue = dataValue ? (dataValue + '') : ''
        let p_c = parseInt(c)
        let p_r = parseInt(r)
        // fieldType：1 横向 2 纵向
        if (this.itemShowParams.fieldType == '2') {
          p_r += i
        } else {
          p_c += i
        }
        luckysheet.setCellValue(p_r, p_c, dataValue)
      })
      // 应用
      if (flag == 1) {
        this.chooseGroupItemList = []
        this.chooseDataGroup = null
        this.chooseItemData = []
        this.dialogGroupItemVisible = false
      }
    },
    /** 向数据表格增加数据（重复判断） */
    pushToItemTable(item) {
		console.log(item)
      let itemInfo = {
        'itemId': item.id,
        'isDriverItem': item.isDriverItem,
        'placeHolder': item.placeHolder,
        'xaxis': item.xaxis,
        'yaxis': item.yaxis,
        'valueTakingMode': item.valueTakingMode,
        'bucketType': item.bucketType,
        'valueType': item.valueType,
        'bucketValue': item.bucketValue,
        'standby': item.standby,
		'itemName': item.itemName,
		'itemReadName': item.itemReadName,
		'dataSourceName': item.dataSourceName,
		'itemGroupId': item.itemGroupId,
		'itemType': item.itemType,
		'checked': item.checked
      }
	  if (item.dataSourceId) {
		  itemInfo.dataSourceId = item.dataSourceId
	  }
	  if (item.itemId) {
		  itemInfo.itemId = item.itemId
	  }
	  
      itemInfo.startTime = null
      itemInfo.endTime = null
      // 当前是手动报表
      if (this.templateReportType == 0) {
        itemInfo.startTime = item.startTime
        itemInfo.endTime = item.endTime
      }
      // 检查同一位置是否被替换
      let index = -1
      this.toolItemTable.forEach((info, i) => {
        if (itemInfo.xaxis === info.xaxis && itemInfo.yaxis === info.yaxis) {
          index = i
        }
      })
      if (index > -1) {
        this.toolItemTable[index] = itemInfo
      } else {
        this.toolItemTable.push(itemInfo)
      }
    },
    /** 检查数据项设置的字段值是否被改变 */
    checkToItemTable() {
      let i = this.toolItemTable.length
      let sheetData =  luckysheet.getSheetData(0)
      while (i--) {
        let info = this.toolItemTable[i]
        // let v = luckysheet.getCellValue(info.xaxis, info.yaxis)
          let v = sheetData[info.xaxis][info.yaxis]
        console.log(v, info.placeHolder)
		if (v) {
			if ((v + "") != info.placeHolder) {
				if (v.v) {
					if (v.v != info.placeHolder) {
						this.toolItemTable.splice(i, 1)
					}
				} else {
					this.toolItemTable.splice(i, 1)
				}
			}
		} else {
			this.toolItemTable.splice(i, 1)
		}
      }
    },
    uniqueFunc(arr, uniId) {
      try {
        const res = new Map()
        return arr.filter((item) => !res.has(item.showType[uniId]) && res.set(item.showType[uniId], 1))
      } catch (e) {
        return arr
      }
    },
    /** 柱状图 */
    barEvent(type) {
      let _this = this
      // 当前选择范围
      let rangeWithFlatten = luckysheet.getRangeWithFlatten()
      if (!rangeWithFlatten || rangeWithFlatten.length <= 1) {
        showAlertMsgWin(_this, null, '请选择多项单元格！')
        return
      }
      this.barChartForm = {
        title: '',
        type: '',
        subtitle: '',
        showTitle: '1',
        showLegend: '1',
        legendType: '1',
        legendData: ['模板数据1', '模板数据2'],
        xAxisData: ['数据1', '数据2', '数据3'],
        valueType: 0, // 0原始值1计算值
        valueTakingMode: 0, // 取值模式0平均值，1最大值，2最小值，3瞬时值
        bucketType: 1, // 时段类型0天，1时，2分，3秒
        bucketValue: 1
      }
      this.chooseDataGroup = null
      this.getDataGroupList()
      if (!type) {
        type = 'bar'
      }
      if (type == 'bar') {
        this.chartConfigTitle = '柱状图配置'
      } else if (type == 'line') {
        this.chartConfigTitle = '折线图配置'
      } else if (type == 'pie') {
        this.chartConfigTitle = '饼状图配置'
      }
      this.barChartForm.type = type
      // 显示柱状图配置信息
      this.dialogBarChartVisible = true
    },
    /** 柱状图图表插入 */
    insertBarChartForm(flag) {
      if (this.barChartForm.showTitle == '1' && !this.barChartForm.title) {
        showAlertMsgWin(this, null, '标题不能为空！')
        return
      }
      if (!this.chooseDataGroup) {
        showAlertMsgWin(this, null, '请选择数据组！')
        return
      }
      if (this.chooseItemData.length == 0) {
        showAlertMsgWin(this, null, '请选择数据组项！')
        return
      }
      if ((this.barChartForm.legendType == '0' && this.chooseItemData.length > 1)
          || (this.barChartForm.type == 'pie' && this.chooseItemData.length > 1)) {
        showAlertMsgWin(this, null, '饼图仅支持选择一项数据项！')
        return
      }
      // 图表参数
      this.barChartOption = {
        title: {
          show: this.barChartForm.showTitle == '1',
          text: this.barChartForm.title,
          subtext: this.barChartForm.subtitle,
          left: 'center'
        },
		grid: {

		},
        tooltip: {
			top: 0
		},
        legend: {
          show: this.barChartForm.showLegend == '1',
          orient: 'vertical',
          left: 0,
		  bottom: 0,
          data: []
        },
        series: []
      }
      if (this.barChartForm.type != 'pie') {
        this.barChartOption.xAxis = {
          data: this.barChartForm.xAxisData
        }
        this.barChartOption.yAxis = {}
        // 图表图例类型：1 数据项 0 值
        if (this.barChartForm.legendType == '1') {
          let legendNameList = []
          for (let i in this.chooseItemData) {
            let name = this.chooseItemData[i].describe
            name = name ? name : this.chooseItemData[i].itemName
            legendNameList.push(name)
          }
          this.barChartOption.legend.data = legendNameList
        } else {
          this.barChartOption.legend.data = ['值', '运算值']
        }

        // this.barChartOption.legend.data = this.barChartForm.legendData
        for (let i in this.barChartOption.legend.data) {
          let seriesName = this.barChartOption.legend.data[i]
          let dataList = []
          for (let j in this.barChartForm.xAxisData) {
            dataList.push(Math.ceil(Math.random() * 10))
          }
          let series = {
            name: seriesName,
            type: this.barChartForm.type,
            data: dataList
          }
          this.barChartOption.series.push(series)
        }
      } else {
        this.barChartOption.legend = null
        let seriesName = this.barChartForm.legendData[0]
        let dataList = []
        for (let i in this.barChartForm.xAxisData) {
          dataList.push({
            value: Math.ceil(Math.random() * 10),
            name: this.barChartForm.xAxisData[i]
          })
        }
        let series = {
          name: seriesName,
          type: this.barChartForm.type,
          radius: '50%',
          data: dataList
        }
        this.barChartOption.series.push(series)
      }

      if (this.barChartForm.uid) {
        this.delChartItem()
      }

      // 合并当前选择范围
      luckysheet.setRangeMerge('all')
      // 图表插入的 x、y 轴坐标获取
      let range = luckysheet.getRange()
      let x = range[0].column[0]
      let y = range[0].row[0]
      // 随机类名称
      let clz = this.generateRandomKey('chart_clz')
      let info = {
        id: this.generateRandomKey('chart'), // 唯一 id
        pos: [y, x], // eCharts 插入的单元格横、纵坐标
        className: clz, // 给定eCharts容器的 className，自定义
        chart: null, // 创建的 eCharts 实例
        option: this.barChartOption // eCharts 图形配置选项
      }
      this.insertEChartTool(info, true, this.chooseItemData, this.barChartForm)
      this.chooseDataGroup = null
      if (flag == 0) {
        setTimeout(() => {
          this.chooseChartClz = clz
          this.updateChartItem()
        }, 1000)
        return
      }
      this.$refs.barChartForm.resetFields()
      this.chooseItemData = []
      this.dialogBarChartVisible = false
    },
    /** 取消图表插入 */
    cancelBarChartForm() {
      this.$refs.barChartForm.resetFields()
      this.chooseDataGroup = null
      this.chooseItemData = []
      this.dialogBarChartVisible = false
    },
    /** 图表修改 */
    updateChartItem() {
      let chartInfo = {}
      for (let i in this.toolItemChart) {
        if (JSON.parse(this.toolItemChart[i].standby).className == this.chooseChartClz) {
          chartInfo = this.toolItemChart[i]
        }
      }
	  const chartData = JSON.parse(chartInfo.standby)
      let temp = chartData.option
	  luckysheet.setRangeShow((toExcelColumn(chartData.pos[1] + 1) + (chartData.pos[0] + 1)) + ":" + (toExcelColumn(chartData.pos[1] + 1) + (chartData.pos[0] + 1)))
      this.barChartForm.uid = new Date().getTime()
      this.barChartForm.title = temp.title.text
      this.barChartForm.subtitle = temp.title.subtext
      this.barChartForm.showTitle = temp.title.show ? '1' : '0'
      this.barChartForm.showLegend = temp.legend.show ? '1' : '0'
      this.barChartForm.type = temp.series[0].type
      this.barChartForm.legendType = '1'
      this.barChartForm.bucketType = chartInfo.bucketType
      this.barChartForm.bucketValue = chartInfo.bucketValue
      this.barChartForm.valueTakingMode = chartInfo.valueTakingMode
      this.barChartForm.valueType = chartInfo.valueType
      this.chooseItemData = chartInfo.tableTemplateChartItemList
      this.getDataGroupList(() => {
        this.chooseDataGroup = chartInfo.tableTemplateChartItemList[0].itemGroupId
      })
      this.dialogBarChartVisible = true
    },
    /** 图表删除 */
    delChartItem() {
      if (!this.chooseChartClz) {
        return
      }
      $('.' + this.chooseChartClz).remove()
      luckysheet.cancelRangeMerge()
      for (let i in this.toolItemChart) {
        if (JSON.parse(this.toolItemChart[i].standby).className == this.chooseChartClz) {
          this.toolItemChart.splice(i, 1)
        }
      }
    },
    /** 自动存储报表信息 */
    autoSaveReportInfo() {
      let _this = this
      if (this.reportInterval) {
        clearInterval(this.reportInterval)
      }
      let time = setInterval(() => {
        if (!this.templateId) {
          let result = {
            'charts': _this.toolItemChart,
            'tables': _this.toolItemTable,
            'data': JSON.parse(getLuckysheetConfig())
          }
          localStorage.setItem(_this.reportTemplateItem, JSON.stringify(result))
          localStorage.setItem(_this.reportTemplateItem + '_TITLE', _this.templateName)
          console.log(new Date().getTime(), 'auto save report template success.')
        }
      }, 5 * 1000)
      this.reportInterval = time
    },
    /** 获取模板报表信息 */
    getTableTemplate(id, type) {
      let _this = this
      this.printId=id
      if (!id || id == -999) {
        this.resetReport(true)
        return
      }
      getTableTemplateById(id).then(res => {
        if (!res.data) {
          return
        }
        localStorage.removeItem('REPORT_LEN')
        luckysheet.destroy()
        this.templateName = res.data.templateName
        this.templateId = res.data.id
        this.templateVersion = res.data.version
        this.templateReportType = res.data.templateType
        this.templateEventReportNum = res.data.eventNum ? res.data.eventNum : 100
        this.toolItemTable = res.data.tableTemplateItemList
        this.toolItemChart = res.data.tableTemplateChartList

        let templateData = res.data.templateData
        let option = JSON.parse(JSON.stringify(this.luckysheetOption))
        option.data = JSON.parse(templateData).data
        option.hook = {
          workbookCreateAfter() {
            for (let i in _this.toolItemChart) {
              _this.insertEChartTool(JSON.parse(_this.toolItemChart[i].standby), false)
            }
            // 报表模板导出
            if (type === 'export' && type === localStorage.getItem('__export')) {
              localStorage.setItem('__export', '')
              exportExcel(luckysheet.getAllSheets(), _this.templateName)
            }
            let _len = getLuckysheetConfig() ? getLuckysheetConfig().length : 0
            localStorage.setItem('REPORT_LEN', String(_len))
          },
          cellUpdated(r, c, newV, oldV) {
            if (!(r === 49 && c === 0)) {
              _this.forceRefreshLuckysheet()
            }
          },
          rangePasteBefore(r, d) {
            if (_this.$data.ctrlxstatus) {
              _this.$data.ctrlxstatus = false;
              luckysheet.clearRange({range: _this.$data.sheetAxis})
            }
          }
        }
        luckysheet.create(option)
      }).catch((e) => {
        showAlertWin(this, null, e)
      })
    },
    /** 数据值显示类型事件 */
    showDataTypeEvent(val) {
      if (val == 1) {
        this.itemShowParams.valType = '2'
      } else {
        this.itemShowParams.valType = '1'
      }
    },
    /** 根据ID查询组信息 */
    getGroupById(val) {
      if (this.templateReportType == 2 || this.templateReportType == 5) {
        this.chooseGroupItemList = []
      }
      if (this.templateReportType != 2) {
        return
      }
      const loading = showLoading(this, '加载中，请稍候···')
      getItemGroupById(val, null).then(res => {
        loading.close()
        let data = res.data
        let itemList = data.itemList
        let itemName = ''
        itemList.forEach((item) => {
          if (item.isDriverItem == 1) {
            itemName = item.itemName
          }
        })
        let list = [
          {'label': '大于', 'value': 0},
          {'label': '小于', 'value': 1},
          {'label': '等于', 'value': 2},
          {'label': '动态大于', 'value': 3},
          {'label': '动态小于', 'value': 4}
        ]
        this.conditionObj = {
          itemName: itemName,
          eventModeName: this.getValByProp(list, data.eventMode),
          modeValue: data.modeValue
        }
      }).catch((e) => {
        loading.close()
        showAlertWin(this, null, e)
      })
    },
    /** 打印操作 */
    printExcel() {
      const loading = showLoading(this, '请稍候···')

        // exportSheetExcel(luckysheet.getLuckysheetfile(), "报表模板", loading)
      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图片（*将生成的base64编码复制粘贴到浏览器地址框，是可以预览图片样式的），生成后执行的后续打印操作，取用匿名委托函数做为参数传入
        luckysheet.getScreenshotNew((imgSrc) => {
          window.luckysheet.showGridLines();
          // * Lodop中的ADD_PRINT_IMAGE，也可以直接输出base64码图片，不用加img标签（如果加了img标签，会被当做超文本对待，受浏览器引擎解析的影响）
          let $img = `<img src=${imgSrc} style="" />`
          this.$nextTick(() => {
            document.querySelector('#print-html').innerHTML = $img;
            setTimeout(() => {
              Print({
                printable: 'print-html',
                type: 'html',
                documentTitle: '文档标题',
                maxWidth: 1150, // 最大宽度
                header: '',
                headerStyle: 'font-weight:400;text-align:center;',
                style: '', // 不打印页眉和页脚
                honorColor: true, // 是否打印彩色文本
                targetStyles: ['*'] // 允许打印所有样式属性
              }) // Print.js插件
              // print(this.printId)
              if (document.querySelector('#print-area'))
                document.querySelector('#print-area').style = "display:none";
              loading.close()
            }, 1000);
          })
        });
      }
      else {
        // 获取打印区域的行列
        let RowColumn = this.getPrintSheetArea();
        // 因需要打印左边的边框，需重新设置第一列
        //RowColumn.column[0] = 0;
        // 进行选区操作
        luckysheet.setRangeShow(RowColumn);
        // 将打印区域生成base64图片（*将生成的base64编码复制粘贴到浏览器地址框，是可以预览图片样式的），生成后执行的后续打印操作，取用匿名委托函数做为参数传入
        luckysheet.getScreenshotNew((imgSrc) => {
          window.luckysheet.showGridLines();
          // * Lodop中的ADD_PRINT_IMAGE，也可以直接输出base64码图片，不用加img标签（如果加了img标签，会被当做超文本对待，受浏览器引擎解析的影响）
          let $img = `<img src=${imgSrc} style="" />`
          this.$nextTick(() => {
            document.querySelector('#print-html').innerHTML = $img;
            setTimeout(() => {
              Print({
                printable: 'print-html',
                type: 'html',
                documentTitle: '文档标题',
                maxWidth: 1150, // 最大宽度
                header: '',
                headerStyle: 'font-weight:400;text-align:center;',
                style: '', // 不打印页眉和页脚
                honorColor: true, // 是否打印彩色文本
                targetStyles: ['*'] // 允许打印所有样式属性
              }) // Print.js插件
              // print(this.printId)
              if (document.querySelector('#print-area'))
                document.querySelector('#print-area').style = "display:none";
              loading.close()
            }, 1000);
          })
        });
      }
    },
    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;
    },
    clearRt() {
      this.reportTypeInputName = '所有'
      this.reportTypeInputId = []
      this.reportType = null
      this.searchReportTxt = ''
    },
    /** 弹出层关闭事件 */
    dialogClose(done) {
      this.chooseDataGroup = null
      this.chooseItemData = []
      this.chooseGroupItemList = []
      this.filterItemData = ''
      this.filterDeviceItemData = ''
      this.clearRt()

      this.commTemplate = null
      if (typeof (done) === 'function') {
        done()
      } else {
        this.dialogBarChartVisible = false
        this.dialogDataItemVisible = false
        this.dialogDataModelVisible = false
        this.dialogCommReportVisible = false
        this.dialogGroupItemVisible = false
        this.dialogReportTypeVisible = false
        this.dialogDriverConditionVisible = false;
      }
    },
    /** 弹出层关闭事件 */
    dialogItemClose(done) {
      this.itemDataListByTree = []
      this.filterItemData = ''
      this.filterDeviceItemData = ''
      if (typeof (done) === 'function') {
        done()
      } else {
        this.dialogDataItemVisible = false
        this.dialogDeviceDataItemVisible = false
      }
    },
    /** 弹出层关闭事件 */
    dialogDataModelClose() {
      if (typeof (done) === 'function') {
        done()
      } else {
        this.dialogDataModelVisible = false
      }
    },
    /** 弹出层关闭事件 */
    dialogBaseDataClose() {
      this.chooseBaseData = null
      if (typeof (done) === 'function') {
        done()
      } else {
        this.dialogBaseDataVisible = false
      }
    },
    /** 数据项取值配置弹出层关闭事件 */
    dialogDataItemConfigClose(done) {
      this.itemConditionForm = {
        valueType: 0, // 0原始值1计算值
        valueTakingMode: 0, // 取值模式0平均值，1最大值，2最小值，3瞬时值
        bucketType: 1, // 时段类型0天，1时，2分，3秒
        bucketValue: 1, // 时段值
        dateRange: [], // 取值时间范围，手动报表必填
      }
      if (typeof (done) === 'function') {
        done()
      } else {
        this.dialogDataItemConfigVisible = false
      }
    },
    /** 关闭右键弹出层 */
    closeMenu() {
      this.visibleChartMenu = false
    },
	updateDataEvent() {
      let rangeWithFlatten = luckysheet.getRangeWithFlatten()
      if (!rangeWithFlatten) {
        showAlertMsgWin(this, null, '请选择要修改的数据项！')
        return
      }
	  const sheetData = luckysheet.getSheet(0).data
	  let flattenObj = {}
	  let status = false;
	  for (let i = 0; i < rangeWithFlatten.length; i++) {
		const val = sheetData[rangeWithFlatten[i].r][rangeWithFlatten[i].c]
		if (!status) {
			if (val) {
				status = true;
			}
		}
		
	  	flattenObj[rangeWithFlatten[i].c + "_" + rangeWithFlatten[i].r] = val
	  }
	  console.log(flattenObj)
	  if (!status) {
		  showAlertMsgWin(this, null, '选择区域未包含有效数据项！')
		  return
	  }
	  const items = this.toolItemTable;
	  let arr = []
	  for (let i = 0; i < items.length; i++) {
	  	const key = items[i].yaxis + "_" + items[i].xaxis
		if (flattenObj[key]) {
			items[i].isFlag = 'update'
			arr.push(items[i])
		}
	  }
	  if (!arr.length) {
		  showAlertMsgWin(this, null, '选择区域未包含有效数据项！')
		  return
	  }
	  console.log(arr)
	  this.chooseGroupItemList = arr
	  this.isUpdateShow = true
	  // 初始化数据显示方式
	  this.itemShowParams = {
	    fieldType: '1',
	    valType: '2',
	    valLine: 1,
	    dataId: new Date().getTime()
	  }
	  this.deviceReportCondition = {
	    type: null,
	    variableType: '1',
	    isGenCountTime: '0',
	    startItemId: null,
	    startItemName: null,
	    startValue: '',
	    endItemId: null,
	    endItemName: null,
	    endValue: ''
	  }
	  this.getDataGroupList()
	  this.hasBelongDataFlag = false
	  // this.chooseDataGroup = null
	  this.dialogGroupItemVisible = true
    },
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
.cy-report-content {
  width: 100%;
  height: 100%;
  padding-left: 6px;
  color: #FFFFFF;
  font-size: 14px;
  background-color: #2c3e50;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

.cy-div0 {
  width: 30px;
  height: 30px;
  background: #767676;
}

.cy-div1 {
  width: calc(100% - 90px);
  height: 100%;
}

.cy-div2 {
  width: 70px;
  height: 100%;
  z-index: 1;
  background: #2c3e50;
  overflow: auto;
}

.cy-report-ruler-unit {
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  float: left;
  border-right: 1px solid #2c3e50;
  border-bottom: 1px solid #2c3e50;
}

.cy-ruler-top {
  background: #767676;
  width: 100%;
  height: 30px;
}

.cy-box {
  height: calc(100% - 50px);
  width: calc(100% + 30px);
  display: flex;
  margin-left: -30px;
  overflow: hidden;

  .cy-ruler-left {
    background: #767676;
    width: 30px;
    height: 100%;
  }

  .cy-box-main {
    width: 100%;
    height: 100%;
    margin: 10px;
    background: #FFFFFF;
  }
}

.cy-chart-div {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  margin-bottom: 15px;

  .svg-icon {
    width: 50px;
    height: 50px;
  }

  span {
    font-size: 12px;
    margin-top: -5px;
  }
}

.label-title {
  display: block !important;

  .el-form-item__content {
    width: calc(100% - 100px);
  }
}

.el-transfer-panel {
  width: 300px !important;
}

.device-condition {
  margin: 5px;
}
</style>