update

report-ui/src/views/report/bigscreen/designer/form/dynamicForm.vue

@@ -331,6 +331,12 @@ export default {
   },
   mounted() {},
   methods: {
+    onJsonChange(val) {
+      console.log(val);
+    },
+    onJsonSave(val) {
+      console.log(val);
+    },
     // 无论哪个输入框改变 都需要触发事件 将值回传
     changed(val, key) {
       if (val.extend) {

report-ui/src/views/report/bigscreen/designer/tools.js

@@ -1822,7 +1822,7 @@ const widgetTools = [
           placeholder: 'px',
           relactiveDom: 'dataType',
           relactiveDomValue: 'staticData',
-          value: '{"categories": ["苹果","三星","小米","oppo","vivo"],"series": [{"name": "手机品牌","data": [1000,2229,3879,2379,4079]}]}',
+          value: {"categories": ["苹果","三星","小米","oppo","vivo"],"series": [{"name": "手机品牌","data": [1000,2229,3879,2379,4079]}]},
         },
         {
           type: 'dycustComponents',
@@ -2360,7 +2360,7 @@ const widgetTools = [
           placeholder: 'px',
           relactiveDom: 'dataType',
           relactiveDomValue: 'staticData',
-          value: '{"categories": ["苹果","三星","小米","oppo","vivo"],"series": [{"name": "手机品牌","data": [1000,2229,3879,2379,4079]}]}',
+          value: {"categories": ["苹果","三星","小米","oppo","vivo"],"series": [{"name": "手机品牌","data": [1000,2229,3879,2379,4079]}]},
         },
         {
           type: 'dycustComponents',
@@ -3003,7 +3003,7 @@ const widgetTools = [
           placeholder: 'px',
           relactiveDom: 'dataType',
           relactiveDomValue: 'staticData',
-          value: '{"categories": ["苹果","三星","小米","oppo","vivo"],"series": [{"name": "手机品牌","data": [1009,3409,2309,5409,3409]}]}',
+          value: {"categories": ["苹果","三星","小米","oppo","vivo"],"series": [{"name": "手机品牌","data": [1009,3409,2309,5409,3409]}]},
         },
         {
           type: 'dycustComponents',
@@ -3628,7 +3628,7 @@ const widgetTools = [
           placeholder: 'px',
           relactiveDom: 'dataType',
           relactiveDomValue: 'staticData',
-          value: '{"xAxis": ["1月", "2月", "3月", "4月", "5月","6月", "7月", "8月","9月","10月","11月","12月"],"series": [{"type": "bar","name": "货运量","data": [2.6,5.9,9,26.4,28.7,70.7,175.6,182.2,48.7,18.8,6,2.3]},{"type": "line","name": "货运总量","yAxisIndex": 1,"data": [2,2.2,3.3,4.5,6.3,10.2,20.3,23.4,23,16.5,12,6.2]}]}',
+          value: {"xAxis": ["1月", "2月", "3月", "4月", "5月","6月", "7月", "8月","9月","10月","11月","12月"],"series": [{"type": "bar","name": "货运量","data": [2.6,5.9,9,26.4,28.7,70.7,175.6,182.2,48.7,18.8,6,2.3]},{"type": "line","name": "货运总量","yAxisIndex": 1,"data": [2,2.2,3.3,4.5,6.3,10.2,20.3,23.4,23,16.5,12,6.2]}]},
         },
         {
           type: 'dycustComponents',
@@ -4021,7 +4021,7 @@ const widgetTools = [
           placeholder: 'px',
           relactiveDom: 'dataType',
           relactiveDomValue: 'staticData',
-          value: '[{"value": 1048,"name": "搜索引擎"},{"value": 735, "name": "直接访问"},{"value": 580, "name": "邮件营销"},{"value": 484,"name":"联盟广告"},{"value":300,"name":"视频广告"}]',
+          value: [{"value": 1048,"name": "搜索引擎"},{"value": 735, "name": "直接访问"},{"value": 580, "name": "邮件营销"},{"value": 484,"name":"联盟广告"},{"value":300,"name":"视频广告"}]
         },
         {
           type: 'dycustComponents',
@@ -4395,7 +4395,7 @@ const widgetTools = [
           placeholder: 'px',
           relactiveDom: 'dataType',
           relactiveDomValue: 'staticData',
-          value: '[{"value": 60,"name": "访问"},{"value": 40, "name": "咨询"},{"value": 20, "name": "订单"},{"value": 80,"name":"点击"},{"value":100,"name":"展现"}]',
+          value: [{"value": 60,"name": "访问"},{"value": 40, "name": "咨询"},{"value": 20, "name": "订单"},{"value": 80,"name":"点击"},{"value":100,"name":"展现"}],
         },
         {
           type: 'dycustComponents',
@@ -4548,7 +4548,7 @@ const widgetTools = [
           placeholder: 'px',
           relactiveDom: 'dataType',
           relactiveDomValue: 'staticData',
-          value: '{"value": 50, "name": "名称", "unit": "%"}',
+          value: {value: 50, name: "名称", unit: "%"},
         },
         {
           type: 'dycustComponents',
@@ -4995,7 +4995,7 @@ const widgetTools = [
           placeholder: 'px',
           relactiveDom: 'dataType',
           relactiveDomValue: 'staticData',
-          value: '[{"value": 1048,"name": "搜索引擎"},{"value": 735, "name": "直接访问"},{"value": 580, "name": "邮件营销"},{"value": 484,"name":"联盟广告"},{"value":300,"name":"视频广告"}]',
+          value: [{"value": 1048,"name": "搜索引擎"},{"value": 735, "name": "直接访问"},{"value": 580, "name": "邮件营销"},{"value": 484,"name":"联盟广告"},{"value":300,"name":"视频广告"}],
         },
         {
           type: 'dycustComponents',

report-ui/src/views/report/bigscreen/designer/widget/bar/widgetGradientColorBarchart.vue

@@ -95,7 +95,12 @@ export default {
             barWidth: "20px",
             itemStyle: {
               normal: {
-                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
                     {
                       offset: 0,
                       color: "rgba(0,244,255,1)" // 0% 处的颜色
@@ -115,9 +120,9 @@ export default {
             label: {
               normal: {
                 show: true,
-                position: ['-10', '-30'],
+                position: ["-10", "-30"],
                 distance: 1,
-                formatter: '{a|{c}}',
+                formatter: "{a|{c}}",
                 rich: {
                   a: {
                     fontSize: 15,
@@ -326,11 +331,16 @@ export default {
       legend.itemWidth = optionsCollapse.lengedWidth;
     },
     // 渐变色
-    setOptionsColor(){
+    setOptionsColor() {
       const optionsCollapse = this.optionsSetup;
-      const itemStyle = this.options.series[0]['itemStyle']
+      const itemStyle = this.options.series[0]["itemStyle"];
       const normal = {
-        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        color: new echarts.graphic.LinearGradient(
+          0,
+          0,
+          0,
+          1,
+          [
             {
               offset: 0,
               color: optionsCollapse.bar0color // 0% 处的颜色
@@ -345,8 +355,8 @@ export default {
         barBorderRadius: optionsCollapse.radius, //圆角
         shadowColor: optionsCollapse.shadowColor, // 阴影颜色
         shadowBlur: optionsCollapse.shadowBlur //模糊系数
-      }
-      itemStyle['normal'] = normal
+      };
+      itemStyle["normal"] = normal;
     },
     // 数据解析
     setOptionsData() {
@@ -362,7 +372,7 @@ export default {
     },
     // 静态数据
     staticDataFn(val, optionsSetup) {
-      const staticData = JSON.parse(val);
+      const staticData = typeof val == "string" ? JSON.parse(val) : val;
       // x轴
       if (optionsSetup.verticalShow) {
         this.options.xAxis.data = [];

report-ui/src/views/report/bigscreen/designer/widget/pie/widgetPieNightingaleRose.vue

@@ -1,7 +1,6 @@
 <template>
   <div :style="styleObj">
-    <v-chart :options="options"
-             autoresize />
+    <v-chart :options="options" autoresize />
   </div>
 </template>
 
@@ -13,7 +12,7 @@ export default {
     value: Object,
     ispreview: Boolean
   },
-  data () {
+  data() {
     return {
       options: {
         legend: {
@@ -46,7 +45,7 @@ export default {
     };
   },
   computed: {
-    styleObj () {
+    styleObj() {
       return {
         position: this.ispreview ? "absolute" : "static",
         width: this.optionsStyle.width + "px",
@@ -59,7 +58,7 @@ export default {
   },
   watch: {
     value: {
-      handler (val) {
+      handler(val) {
         console.log(val);
         this.optionsStyle = val.position;
         this.optionsData = val.data;
@@ -70,7 +69,7 @@ export default {
       deep: true
     }
   },
-  mounted () {
+  mounted() {
     this.optionsStyle = this.value.position;
     this.optionsData = this.value.data;
     this.optionsCollapse = this.value.setup;
@@ -79,7 +78,7 @@ export default {
   },
   methods: {
     // 修改图标options属性
-    editorOptions () {
+    editorOptions() {
       this.setOptionsTitle();
       this.setOptionsValue();
       this.setOptionsTooltip();
@@ -89,11 +88,11 @@ export default {
       this.setOptionsRosetype();
     },
     // 饼图模式 面积模式"area" 半径模式"radius"
-    setOptionsRosetype () {
-      this.options.series[0]['roseType'] = this.optionsSetup.nightingleRosetype
+    setOptionsRosetype() {
+      this.options.series[0]["roseType"] = this.optionsSetup.nightingleRosetype;
     },
     // 标题修改
-    setOptionsTitle () {
+    setOptionsTitle() {
       const optionsCollapse = this.optionsSetup;
       const title = {};
       title.text = optionsCollapse.titleText;
@@ -141,7 +140,7 @@ export default {
       }
     },
     // tooltip 设置
-    setOptionsTooltip () {
+    setOptionsTooltip() {
       const optionsCollapse = this.optionsSetup;
       const tooltip = {
         trigger: "item",
@@ -154,7 +153,7 @@ export default {
       this.options.tooltip = tooltip;
     },
     // 边距设置
-    setOptionsMargin () {
+    setOptionsMargin() {
       const optionsCollapse = this.optionsSetup;
       const grid = {
         left: optionsCollapse.marginLeft,
@@ -166,7 +165,7 @@ export default {
       this.options.grid = grid;
     },
     // 图例操作 legend
-    setOptionsLegend () {
+    setOptionsLegend() {
       const optionsCollapse = this.optionsSetup;
       const legend = this.options.legend;
       legend.show = optionsCollapse.isShowLegend;
@@ -202,7 +201,7 @@ export default {
         : this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
     },
     staticDataFn(val) {
-      const staticData = JSON.parse(val);
+      const staticData = typeof val == "string" ? JSON.parse(val) : val;
       for (const key in this.options.series) {
         if (this.options.series[key].type == "pie") {
           this.options.series[key].data = staticData;

report-ui/src/views/report/bigscreen/designer/widget/widgetBarchart.vue

@@ -296,7 +296,7 @@ export default {
     },
     // 静态数据
     staticDataFn(val, optionsSetup) {
-      const staticData = JSON.parse(val);
+      const staticData = typeof val == "string" ? JSON.parse(val) : val;
       // x轴
       if (optionsSetup.verticalShow) {
         this.options.xAxis.data = [];

report-ui/src/views/report/bigscreen/designer/widget/widgetBarlinechart.vue

@@ -383,7 +383,7 @@ export default {
         : this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
     },
     staticDataFn(val) {
-      const staticData = JSON.parse(val);
+      const staticData = typeof val == "string" ? JSON.parse(val) : val;
       // x轴
       this.options.xAxis.data = staticData.xAxis;
       // series

report-ui/src/views/report/bigscreen/designer/widget/widgetFunnel.vue

@@ -204,7 +204,7 @@ export default {
         : this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
     },
     staticDataFn(val) {
-      const staticData = JSON.parse(val);
+      const staticData = typeof val == "string" ? JSON.parse(val) : val;
       for (const key in this.options.series) {
         if (this.options.series[key].type == "funnel") {
           this.options.series[key].data = staticData;

report-ui/src/views/report/bigscreen/designer/widget/widgetGauge.vue

@@ -102,24 +102,22 @@ export default {
     },
     setOptionsData() {
       const optionsData = this.optionsData; // 数据类型 静态 or 动态
-      console.log(optionsData);
       optionsData.dataType == "staticData"
         ? this.staticDataFn(optionsData.staticData)
         : this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
     },
     staticDataFn(val) {
-      const unit = JSON.parse(val).unit;
+      const staticData = typeof val == "string" ? JSON.parse(val) : val;
       const series = this.options.series;
       for (const key in series) {
-        series[key].detail.formatter = `{value}${unit}`;
+        series[key].detail.formatter = `{value}${staticData.unit}`;
         series[key].data[0] = {
-          value: JSON.parse(val).value,
-          name: JSON.parse(val).name
+          value: staticData.value,
+          name: staticData.name
         };
       }
     },
     dynamicDataFn(val, refreshTime) {
-      console.log(val);
       if (!val) return;
       if (this.ispreview) {
         this.getEchartData(val);

report-ui/src/views/report/bigscreen/designer/widget/widgetLinechart.vue

@@ -297,7 +297,7 @@ export default {
         : this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
     },
     staticDataFn(val) {
-      const staticData = JSON.parse(val);
+      const staticData = typeof val == "string" ? JSON.parse(val) : val;
       // x轴
       this.options.xAxis.data = staticData.categories;
       // series

report-ui/src/views/report/bigscreen/designer/widget/widgetPiechart.vue

@@ -93,12 +93,13 @@ export default {
       this.setOptionsPiechartStyle();
     },
     // 饼图样式
-    setOptionsPiechartStyle(){
+    setOptionsPiechartStyle() {
       if (this.optionsSetup.piechartStyle == "shixin") {
-        this.options.series[0]['radius'] = "50%"
-      }else if (this.optionsSetup.piechartStyle == "kongxin"){
-        this.options.series[0]['radius'] = ["40%", "70%"]
-      }else {}
+        this.options.series[0]["radius"] = "50%";
+      } else if (this.optionsSetup.piechartStyle == "kongxin") {
+        this.options.series[0]["radius"] = ["40%", "70%"];
+      } else {
+      }
     },
     // 标题设置
     setOptionsTitle() {
@@ -197,7 +198,7 @@ export default {
         : this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
     },
     staticDataFn(val) {
-      const staticData = JSON.parse(val);
+      const staticData = typeof val == "string" ? JSON.parse(val) : val;
       for (const key in this.options.series) {
         if (this.options.series[key].type == "pie") {
           this.options.series[key].data = staticData;