浏览代码

修改统计图添加图表数据

FinalYu 1 年之前
父节点
当前提交
57e9b2785c
共有 1 个文件被更改,包括 178 次插入96 次删除
  1. 178 96
      chuanyi_client2/src/views/report_template/index.vue

+ 178 - 96
chuanyi_client2/src/views/report_template/index.vue

@@ -13,7 +13,8 @@
             <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>
+            <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>
@@ -21,8 +22,10 @@
         </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')">
+        <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>
@@ -88,7 +91,8 @@
           </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 type="text" placeholder="请输入副标题" v-model="barChartForm.subtitle" maxlength="60"
+                    show-word-limit>
           </el-input>
         </el-form-item>
         <el-form-item label="是否显示图表标题:" prop="showTitle">
@@ -99,10 +103,10 @@
           <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="图例:" 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"
@@ -119,8 +123,35 @@
           <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>
+                  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>
+          <el-form-item label="时间单位:" prop="bucketType" v-if="templateReportType == 1">
+            <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" v-if="templateReportType == 1">
+            <el-input-number label="请输入时段值"
+                             v-model="barChartForm.bucketValue"
+                             :min="1"
+                             :max="100"></el-input-number>
+          </el-form-item>
+        </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>
@@ -162,9 +193,11 @@
                 <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 : '' }}
+                  {{
+                    data.describe
+                        ? ((data.itemName ? data.itemName : '') + '(' + data.describe + ')')
+                        : data.itemName ? data.itemName : ''
+                  }}
                 </span>
               </span>
           </el-tree>
@@ -173,7 +206,8 @@
       <div style="width: 100%;text-align: center;">
         <el-button type="primary"
                    @click="chooseItemTreeEvent"
-                   style="margin-top: 20px;">确定</el-button>
+                   style="margin-top: 20px;">确定
+        </el-button>
       </div>
     </el-dialog>
 
@@ -270,10 +304,14 @@
           <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-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 }}
@@ -314,9 +352,12 @@
                 :value="dict.id"
             ></el-option>
           </el-select>
-          <el-button size="mini" @click="addDataItem" style="width: 100px;margin-top: 4px; margin-left: 10px;">选择数据项</el-button>
+          <el-button size="mini" @click="addDataItem" style="width: 100px;margin-top: 4px; margin-left: 10px;">
+            选择数据项
+          </el-button>
           <el-button size="mini" type="primary" @click="multipleDataItemEvent"
-                     style="width: 100px;margin-top: 4px;">设置数据条件</el-button>
+                     style="width: 100px;margin-top: 4px;">设置数据条件
+          </el-button>
         </div>
         <div style="height: 30vh; margin-top: 10px; overflow: auto;">
           <el-table :data="chooseGroupItemList"
@@ -369,7 +410,8 @@
                     type="text"
                     size="mini"
                     style="color: red;"
-                    @click="handleItemDelete(scope.$index, scope.row)">删除</el-button>
+                    @click="handleItemDelete(scope.$index, scope.row)">删除
+                </el-button>
               </template>
             </el-table-column>
           </el-table>
@@ -393,7 +435,7 @@
                 <el-radio v-model="itemShowParams.valType" label="2">纵向</el-radio>
               </div>
               <div style="width: 50%;">
-<!--                <label>值显示数量:</label>-->
+                <!--                <label>值显示数量:</label>-->
                 <el-input-number label="请输入显示数量"
                                  v-model="itemShowParams.valLine"
                                  :min="1"
@@ -426,17 +468,20 @@
         <el-form-item label="取值类型:" prop="valueType">
           <el-radio v-for="item in valueTypeList"
                     v-model="itemConditionForm.valueType"
-                    :label="item.value">{{ item.label }}</el-radio>
+                    :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>
+                    :label="item.value">{{ item.label }}
+          </el-radio>
         </el-form-item>
         <el-form-item label="时间单位:" prop="bucketType" v-if="templateReportType == 1">
           <el-radio v-for="item in bucketTypeList"
                     v-model="itemConditionForm.bucketType"
-                    :label="item.value">{{ item.label }}</el-radio>
+                    :label="item.value">{{ item.label }}
+          </el-radio>
         </el-form-item>
         <el-form-item label="时段间隔:" prop="bucketValue" v-if="templateReportType == 1">
           <el-input-number label="请输入时段值"
@@ -557,25 +602,28 @@ export default {
         showLegend: '1',
         legendType: '1',
         legendData: ['模板数据1', '模板数据2'],
-        xAxisData: ['数据1', '数据2', '数据3']
-      },
-      barChartOption: {
+        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 }
+        {'label': '原始值', 'value': 0},
+        {'label': '计算值', 'value': 1}
       ],
       bucketTypeList: [
-          { 'label': '天', 'value': 0 },
-          { 'label': '时', 'value': 1 },
-          { 'label': '分', 'value': 2 },
-          { 'label': '秒', 'value': 3 },
+        {'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 },
+        {'label': '平均值', 'value': 0},
+        {'label': '最大值', 'value': 1},
+        {'label': '最小值', 'value': 2},
+        {'label': '瞬时值', 'value': 3},
       ],
       // 数据项取值条件
       itemConditionForm: {
@@ -634,7 +682,6 @@ export default {
       templateVersion: '',
       reportTemplateItem: this.$store.getters.sessionName.REPORT_TEMPLATE_ITEM,
       reportInterval: null,
-      toolChart: [],
       toolItemChart: [],
       toolItemTable: [],
       luckysheetOption: {
@@ -781,7 +828,6 @@ export default {
       this.templateId = null
       this.templateVersion = null
       this.templateName = ''
-      this.toolChart = []
       this.toolItemChart = []
       this.toolItemTable = []
       luckysheet.destroy()
@@ -789,12 +835,12 @@ export default {
       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.toolChart = JSON.parse(locItem).charts
+        _this.toolItemChart = JSON.parse(locItem).charts
         _this.toolItemTable = JSON.parse(locItem).tables
         option.hook = {
           workbookCreateAfter() {
-            for (let i in _this.toolChart) {
-              _this.insertEChartTool(_this.toolChart[i].info, false)
+            for (let i in _this.toolItemChart) {
+              _this.insertEChartTool(JSON.parse(_this.toolItemChart[i].standby), false)
             }
             _this.autoSaveReportInfo()
             let _len = getLuckysheetConfig() ? getLuckysheetConfig().length : 0
@@ -887,7 +933,7 @@ export default {
             this.dialogDataItemConfigClose()
             this.dialogDataItemConfigVisible = false
             this.selectionDataItems = []
-            this.bomItemKey ++
+            this.bomItemKey++
           })
         }
       })
@@ -921,7 +967,7 @@ export default {
       if (this.isSelectAllItem) {
         // this.$refs.itemTree.setCheckedNodes(this.itemDataListByTree)
         let arr = traverseVisible(data)
-        let ids = Array.from(arr, ({ id }) => id)
+        let ids = Array.from(arr, ({id}) => id)
         this.$refs.itemTree.setCheckedKeys(ids)
       } else {
         this.$refs.itemTree.setCheckedNodes([])
@@ -1000,14 +1046,14 @@ export default {
       this.checkToItemTable()
       let result = {
         'option': option,
-        'data': _data,
-        'charts': this.toolChart
+        'data': _data
       }
       let data = {
         'templateType': this.templateReportType,
         'templateName': templateName,
         'templateData': JSON.stringify(result),
-        'tableTemplateItemList': this.toolItemTable
+        'tableTemplateItemList': this.toolItemTable,
+        'tableTemplateChartList': this.toolItemChart
       }
       // 事件驱动模板
       if (this.templateReportType == 2) {
@@ -1056,7 +1102,7 @@ export default {
         this.templateVersion = null
         this.templateName = ''
       }
-      this.toolChart = []
+      this.toolItemChart = []
       this.toolItemTable = []
       luckysheet.destroy()
       let option = JSON.parse(JSON.stringify(this.luckysheetOption))
@@ -1139,9 +1185,36 @@ export default {
       return prefix + '_' + mid + '_' + time
     },
     /** 向 Excel 插入图表 */
-    insertEChartTool(info, flag, item, legendType) {
+    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
@@ -1159,18 +1232,8 @@ export default {
         } catch (e) {
           console.error(e)
         }
-        // 保存图表信息
-        if (flag) {
-          let chart = {
-            'info': info,
-            'legendType': legendType,
-            'item': item
-          }
-          if (!_this.toolChart) _this.toolChart = []
-          _this.toolChart.push(chart)
-        }
         // 图表事件监听
-        $('.' + info.className).mousedown(function(e) {
+        $('.' + info.className).mousedown(function (e) {
           if (3 == e.which) {
             _this.closeMenu()
             _this.menuTop = e.pageY
@@ -1185,9 +1248,10 @@ export default {
       }, 200)
     },
     /** 获取右侧数据组列表 */
-    getDataGroupList() {
+    getDataGroupList(callback) {
       getAllItemGroup().then(res => {
         this.dataGroupList = res.data
+        if (callback) callback()
       }).catch((e) => {
         showAlertWin(this, null, e)
       })
@@ -1220,7 +1284,7 @@ export default {
         let tempList = flag ? this.chooseItemData : this.chooseGroupItemList
         if (this.$refs.itemTree) this.$refs.itemTree.setCheckedKeys([])
         if (tempList.length > 0) {
-          let idList = Array.from(tempList, ({ id }) => id)
+          let idList = Array.from(tempList, ({id}) => id)
           setTimeout(() => {
             if (this.$refs.itemTree) {
               if (flag) this.$refs.itemTree.setCheckedKeys([])
@@ -1231,7 +1295,7 @@ export default {
             } else {
               this.isSelectAllItem = false
             }
-          },100)
+          }, 100)
         }
         this.dialogDataItemVisible = true
       }).catch((e) => {
@@ -1264,7 +1328,7 @@ export default {
     },
     initGroupItem() {
       let group = null
-      for (let i = 0; i < this.dataGroupList.length; i ++) {
+      for (let i = 0; i < this.dataGroupList.length; i++) {
         if (this.dataGroupList[i].id == this.chooseDataGroup) {
           group = this.dataGroupList[i]
           break
@@ -1274,12 +1338,12 @@ export default {
         return item.itemGroupId != group.id;
       })
 
-      for (let j = 0; j < this.chooseItemData.length; j ++) {
+      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) {
+      this.chooseGroupItemList = this.chooseGroupItemList.reduce(function (item, next) {
         obj[next.id] ? '' : obj[next.id] = true && item.push(next)
         return item;
       }, [])
@@ -1330,7 +1394,7 @@ export default {
       }
       this.$nextTick(() => {
         this.itemDataListByCalc[this.chooseDataItemIndex].rule = item
-        this.bomCheckKey ++
+        this.bomCheckKey++
       })
       this.dialogDataModelVisible = false
     },
@@ -1434,7 +1498,7 @@ export default {
         luckysheet.destroy()
         let option = JSON.parse(JSON.stringify(_this.luckysheetOption))
         option.data = JSON.parse(locItem).data
-        this.toolChart = JSON.parse(locItem).charts
+        this.toolItemChart = JSON.parse(locItem).charts
         option.hook = {
           workbookCreateAfter() {
             loading.close()
@@ -1510,7 +1574,7 @@ export default {
         if (this.templateReportType != 2
             && (item.valueTakingMode == null || item.bucketType == null
                 || item.bucketValue == null)) {
-          condCount ++
+          condCount++
         }
       })
       if (condCount > 0) {
@@ -1528,7 +1592,7 @@ export default {
         r = rangeWithFlatten[0].r
       }
       // 值显示数量
-      for (let n = 0; n < this.itemShowParams.valLine; n ++) {
+      for (let n = 0; n < this.itemShowParams.valLine; n++) {
         this.chooseGroupItemList.forEach((item, i) => {
           let groupId = item.itemGroupId
           let name = item.itemName
@@ -1602,7 +1666,7 @@ export default {
     /** 检查数据项设置的字段值是否被改变 */
     checkToItemTable() {
       let i = this.toolItemTable.length
-      while (i --) {
+      while (i--) {
         let info = this.toolItemTable[i]
         let v = luckysheet.getCellValue(info.xaxis, info.yaxis)
         console.log(v, info.placeHolder)
@@ -1611,7 +1675,7 @@ export default {
         }
       }
     },
-    uniqueFunc(arr, uniId){
+    uniqueFunc(arr, uniId) {
       try {
         const res = new Map()
         return arr.filter((item) => !res.has(item.showType[uniId]) && res.set(item.showType[uniId], 1))
@@ -1628,6 +1692,20 @@ export default {
         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) {
@@ -1684,8 +1762,7 @@ export default {
         this.barChartOption.xAxis = {
           data: this.barChartForm.xAxisData
         }
-        this.barChartOption.yAxis = {
-        }
+        this.barChartOption.yAxis = {}
         // 图表图例类型:1 数据项 0 值
         if (this.barChartForm.legendType == '1') {
           let legendNameList = []
@@ -1751,7 +1828,7 @@ export default {
         chart: null, // 创建的 eCharts 实例
         option: this.barChartOption // eCharts 图形配置选项
       }
-      this.insertEChartTool(info, true, this.chooseItemData, this.barChartForm.legendType)
+      this.insertEChartTool(info, true, this.chooseItemData, this.barChartForm)
       this.chooseDataGroup = null
       if (flag == 0) {
         setTimeout(() => {
@@ -1773,23 +1850,28 @@ export default {
     },
     /** 图表修改 */
     updateChartItem() {
-      this.getDataGroupList()
       let chartInfo = {}
-      for (let i in this.toolChart) {
-        if (this.toolChart[i].info.className == this.chooseChartClz) {
-          chartInfo = this.toolChart[i]
+      for (let i in this.toolItemChart) {
+        if (JSON.parse(this.toolItemChart[i].standby).className == this.chooseChartClz) {
+          chartInfo = this.toolItemChart[i]
         }
       }
-      let temp = chartInfo.info.option
+      let temp = JSON.parse(chartInfo.standby).option
       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 = chartInfo.legendType
-      this.chooseItemData = chartInfo.item
-      this.chooseDataGroup = chartInfo.item[0].itemGroupId
+      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
     },
     /** 图表删除 */
@@ -1799,9 +1881,9 @@ export default {
       }
       $('.' + this.chooseChartClz).remove()
       luckysheet.cancelRangeMerge()
-      for (let i in this.toolChart) {
-        if (this.toolChart[i].info.className == this.chooseChartClz) {
-          this.toolChart.splice(i, 1)
+      for (let i in this.toolItemChart) {
+        if (JSON.parse(this.toolItemChart[i].standby).className == this.chooseChartClz) {
+          this.toolItemChart.splice(i, 1)
         }
       }
     },
@@ -1814,7 +1896,7 @@ export default {
       let time = setInterval(() => {
         if (!this.templateId) {
           let result = {
-            'charts': _this.toolChart,
+            'charts': _this.toolItemChart,
             'tables': _this.toolItemTable,
             'data': JSON.parse(getLuckysheetConfig())
           }
@@ -1844,15 +1926,15 @@ export default {
         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
-        this.toolChart = JSON.parse(templateData).charts
         option.hook = {
           workbookCreateAfter() {
-            for (let i in _this.toolChart) {
-              _this.insertEChartTool(_this.toolChart[i].info, false)
+            for (let i in _this.toolItemChart) {
+              _this.insertEChartTool(JSON.parse(_this.toolItemChart[i].standby), false)
             }
             // 报表模板导出
             if (type === 'export' && type === localStorage.getItem('__export')) {
@@ -1896,7 +1978,7 @@ export default {
       this.clearRt()
 
       this.commTemplate = null
-      if (typeof(done) === 'function') {
+      if (typeof (done) === 'function') {
         done()
       } else {
         this.dialogBarChartVisible = false
@@ -1911,7 +1993,7 @@ export default {
     dialogItemClose(done) {
       this.itemDataListByTree = []
       this.filterItemData = ''
-      if (typeof(done) === 'function') {
+      if (typeof (done) === 'function') {
         done()
       } else {
         this.dialogDataItemVisible = false
@@ -1919,7 +2001,7 @@ export default {
     },
     /** 弹出层关闭事件 */
     dialogDataModelClose() {
-      if (typeof(done) === 'function') {
+      if (typeof (done) === 'function') {
         done()
       } else {
         this.dialogDataModelVisible = false
@@ -1928,7 +2010,7 @@ export default {
     /** 弹出层关闭事件 */
     dialogBaseDataClose() {
       this.chooseBaseData = null
-      if (typeof(done) === 'function') {
+      if (typeof (done) === 'function') {
         done()
       } else {
         this.dialogBaseDataVisible = false
@@ -1943,7 +2025,7 @@ export default {
         bucketValue: 1, // 时段值
         dateRange: [], // 取值时间范围,手动报表必填
       }
-      if (typeof(done) === 'function') {
+      if (typeof (done) === 'function') {
         done()
       } else {
         this.dialogDataItemConfigVisible = false
@@ -2054,6 +2136,6 @@ export default {
 }
 
 .el-transfer-panel {
- width: 300px !important;
+  width: 300px !important;
 }
 </style>