'chart'

src/expendPlugins/chart/plugin.js

@@ -26,14 +26,14 @@ const dependScripts = [
     'https://unpkg.com/vuex@3.4.0',
     'https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/index.js',
     'https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js',
-    'expendPlugins/chart/chartmix.umd.js'
+    // 'expendPlugins/chart/chartmix.umd.js'
-    // 'http://26.26.26.1:8000/chartmix.umd.js'
+    'http://26.26.26.1:8000/chartmix.umd.js'
 ]
 
 const dependLinks = [
     'https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/theme-chalk/index.css',
-    'expendPlugins/chart/chartmix.css'
+    // 'expendPlugins/chart/chartmix.css'
-    // 'http://26.26.26.1:8000/chartmix.css'
+    'http://26.26.26.1:8000/chartmix.css'
 ]
 
 // Initialize the chart component
@@ -966,7 +966,7 @@ function createLuckyChart(width, height, left, top) {
     let chart_id_c = chart_id + '_c'
 
     let modelChartShowHTML =
-        '<div id="${id}"class="luckysheet-modal-dialog luckysheet-modal-dialog-chart ${addclass}"tabindex="0"role="dialog"aria-labelledby=":41e"dir="ltr"><div class="luckysheet-modal-dialog-resize"><div class="luckysheet-modal-dialog-resize-item luckysheet-modal-dialog-resize-item-lt"data-type="lt"></div><div class="luckysheet-modal-dialog-resize-item luckysheet-modal-dialog-resize-item-mt"data-type="mt"></div><div class="luckysheet-modal-dialog-resize-item luckysheet-modal-dialog-resize-item-lm"data-type="lm"></div><div class="luckysheet-modal-dialog-resize-item luckysheet-modal-dialog-resize-item-rm"data-type="rm"></div><div class="luckysheet-modal-dialog-resize-item luckysheet-modal-dialog-resize-item-rt"data-type="rt"></div><div class="luckysheet-modal-dialog-resize-item luckysheet-modal-dialog-resize-item-lb"data-type="lb"></div><div class="luckysheet-modal-dialog-resize-item luckysheet-modal-dialog-resize-item-mb"data-type="mb"></div><div class="luckysheet-modal-dialog-resize-item luckysheet-modal-dialog-resize-item-rb"data-type="rb"></div></div><div class="luckysheet-modal-dialog-controll"><span class="luckysheet-modal-controll-btn luckysheet-modal-controll-update"role="button"tabindex="0"aria-label="修改图表"title="修改图表"><i class="fa fa-pencil"aria-hidden="true"></i></span><span class="luckysheet-modal-controll-btn luckysheet-modal-controll-max"role="butluckysheet_chartIns_indexton"tabindex="0"aria-label="最大化"title="最大化"><i class="fa fa-window-maximize"aria-hidden="true"></i></span><span class="luckysheet-modal-controll-btn luckysheet-modal-controll-del"role="button"tabindex="0"aria-label="删除"title="删除"><i class="fa fa-trash"aria-hidden="true"></i></span></div><div class="luckysheet-modal-dialog-content">${content}</div></div>'
+        '<div id="${id}" class="luckysheet-modal-dialog luckysheet-modal-dialog-chart ${addclass}"tabindex="0"role="dialog"aria-labelledby=":41e"dir="ltr"><div class="luckysheet-modal-dialog-resize"><div class="luckysheet-modal-dialog-resize-item luckysheet-modal-dialog-resize-item-lt"data-type="lt"></div><div class="luckysheet-modal-dialog-resize-item luckysheet-modal-dialog-resize-item-mt"data-type="mt"></div><div class="luckysheet-modal-dialog-resize-item luckysheet-modal-dialog-resize-item-lm"data-type="lm"></div><div class="luckysheet-modal-dialog-resize-item luckysheet-modal-dialog-resize-item-rm"data-type="rm"></div><div class="luckysheet-modal-dialog-resize-item luckysheet-modal-dialog-resize-item-rt"data-type="rt"></div><div class="luckysheet-modal-dialog-resize-item luckysheet-modal-dialog-resize-item-lb"data-type="lb"></div><div class="luckysheet-modal-dialog-resize-item luckysheet-modal-dialog-resize-item-mb"data-type="mb"></div><div class="luckysheet-modal-dialog-resize-item luckysheet-modal-dialog-resize-item-rb"data-type="rb"></div></div><div class="luckysheet-modal-dialog-controll"><span class="luckysheet-modal-controll-btn luckysheet-modal-controll-update"role="button"tabindex="0"aria-label="修改图表"title="修改图表"><i class="fa fa-pencil"aria-hidden="true"></i></span><span class="luckysheet-modal-controll-btn luckysheet-modal-controll-max"role="butluckysheet_chartIns_indexton"tabindex="0"aria-label="最大化"title="最大化"><i class="fa fa-window-maximize"aria-hidden="true"></i></span><span class="luckysheet-modal-controll-btn luckysheet-modal-controll-del"role="button"tabindex="0"aria-label="删除"title="删除"><i class="fa fa-trash"aria-hidden="true"></i></span></div><div class="luckysheet-modal-dialog-content">${content}</div></div>'
 
     let $t = $(
         replaceHtml(modelChartShowHTML, {
@@ -1021,9 +1021,10 @@ function createLuckyChart(width, height, left, top) {
         delChart(chart_id)
     })
 
-    // chartInfo.chartparam.luckysheetCurrentChartMoveObj = $(`#${chart_id}_c `)
+     // max current chart
-    // chartInfo.chartparam.luckysheetCurrentChartResizeObj = $(`#${chart_id}_c `)
+    $(`#${chart_id}_c .luckysheet-modal-controll-max`).click(function (e) {
-    // chartInfo.chartparam.luckysheetCurrentChartActive = true
+        maxChart(chart_id)
+    })
 
     $t.children('.luckysheet-modal-dialog-content').mousedown(function (e) {
         if (!chartInfo.chartparam.luckysheetCurrentChartMaxState) {
@@ -1038,8 +1039,7 @@ function createLuckyChart(width, height, left, top) {
                 .find('.jfgrid-modal-controll-update')
                 .click()
         } else {
-            // TODO：全屏关闭
+            $('.luckysheet-modal-controll-max-close').click();
-            // closebtn.click()
         }
         e.stopPropagation()
     })
@@ -1142,6 +1142,73 @@ function createLuckyChart(width, height, left, top) {
 
         }
     })
+    .end()
+    .find('.jfgrid-modal-controll-update')
+    .click(function () {
+      generator.ini(chartMixConfig)
+
+      jfgrid.chartparam.jfgridcurrentChart = chart_id
+      generator.editorChart(chart_id)
+      //修改为统一方法 //editorChart中切换图表时已不执行切换，在showChartSettingComponent中切换
+      generator.showChartSettingComponent(null, chart_id)
+
+      $('body .jfgrid-cols-menu').hide()
+    })
+    .end()
+    .find('.jfgrid-modal-controll-code')
+    .click(function () {
+      jfgrid.chartparam.jfgridcurrentChart = chart_id
+
+      //得到chartMix格式的option后，使用转换引擎转换成对应的chart option
+
+      var chartJson = store.state.chartSetting.chartList[chart_id],
+        chartJsonTranslate
+      var chartAllType = chartJson.chartAllType
+      var chartAllTypeArray = chartAllType.split('|')
+
+      var chartPro = chartAllTypeArray[0],
+        chartType = chartAllTypeArray[1],
+        chartStyle = chartAllTypeArray[2]
+      if (chartPro == 'highcharts') {
+        // chartJson = generator.highchartsEngine(generator.getOptionByRouter(store.state.chartSetting));
+        chartJsonTranslate = generator.highchartsEngine(
+          chartJson.defaultOption,
+          chartAllType,
+          document.getElementById(chartJson.chart_id)
+        )
+      }
+
+      var chartDialogShowJson = Vue.extend({
+        //局部定义组件
+        props: ['chartJson', 'isShow'],
+        data: function () {
+          return {
+            dialogShowJsonVisible: this.isShow
+          }
+        },
+        template: `<el-dialog title="查看图表配置" :visible.sync="dialogShowJsonVisible" :fullscreen="false" class="dialogShowChartJson">
+						  <el-input type="textarea" v-model="chartJson"></el-input>
+						  <div slot="footer" class="dialog-footer">
+						    <el-button @click="dialogShowJsonVisible = false">取 消</el-button>
+						    <el-button type="primary" @click="dialogShowJsonVisible = false">确 定</el-button>
+						  </div>
+						</el-dialog>`
+      })
+
+      // chartJson = JSON.stringify(chartJson, null, "\t"); // 缩进一个tab
+      chartJsonTranslate = JSON.stringify(chartJsonTranslate, null, 4) // 缩进4个空格
+      var chartJsonObject = {
+        propsData: {
+          chartJson: chartJsonTranslate,
+          isShow: true
+        }
+      }
+
+      var chartDialogShowJsonObject = new chartDialogShowJson(
+        chartJsonObject
+      ).$mount()
+      $('body').append(chartDialogShowJsonObject.$el)
+    })
 }
 
 // delete chart
@@ -1160,6 +1227,68 @@ function delChart(chart_id) {
     chartInfo.deleteChart(chart_id)
 }
 
+// max chart container
+function maxChart(chart_id) {
+
+    let $t = $(`.luckysheet-cell-main #${chart_id}_c`);
+
+    const t_origin = [
+        $t.css('left'),
+        $t.css('top'),
+        $t.height(),
+        $t.width(),
+        $t.css('z-index')
+      ]
+      $t.css({
+        position: 'fixed',
+        left: '20px',
+        top: '20px',
+        height: $(window).height() - 42 - 40,
+        width: $(window).width() - 22 - 40,
+        'z-index': 1006
+      })
+      setTimeout(function () {
+        $t.find('.jfgrid-modal-dialog-resize').hide()
+        $t.find('.jfgrid-modal-dialog-controll').hide()
+
+        //$("#jfgrid-cell-main").find(".jfgrid-datavisual-selection-set div").remove();
+        chartInfo.chartparam.luckysheetCurrentChartActive = false
+      }, 1)
+
+      chartInfo.chartparam.luckysheetCurrentChart = chart_id
+      chartInfo.resizeChart(chart_id)
+
+      $('#luckysheet-modal-dialog-mask').show()
+      
+      let closebtn = $(
+        '<div class="luckysheet-modal-controll-max-close" title="还原图表大小"><i class="fa fa-times" aria-hidden="true"></i></div>'
+      ).appendTo('body')
+
+      chartInfo.chartparam.luckysheetCurrentChartMaxState = true
+
+      closebtn.click(function () {
+
+        $t.css({
+          position: 'absolute',
+          left: t_origin[0],
+          top: t_origin[1],
+          height: t_origin[2],
+          width: t_origin[3],
+          'z-index': t_origin[4]
+        })
+
+        closebtn.remove()
+
+        chartInfo.resizeChart(chart_id)
+
+        $('#luckysheet-modal-dialog-mask').hide()
+        chartInfo.chartparam.luckysheetCurrentChartMaxState = false
+
+      })
+
+}
+
+// 
 //设置某个图表的高亮区域状态为显示,处理当前页的所有图表，只取一个图表设置为显示，其他隐藏，其他页不管
 function showNeedRangeShow(chart_id) {
     

src/store/index.js

@@ -86,7 +86,7 @@ const Store = {
     highlightChart: '',
     zIndex: 15,
     chartparam: {
-        luckysheetCurrentChart: null,
+        luckysheetCurrentChart: null, //current chart_id
         luckysheetCurrentChartActive: false,
         luckysheetCurrentChartMove: null, // Debounce state
         luckysheetCurrentChartMoveTimeout: null,//拖动图表框的节流定时器