!7 merge

Merge pull request !7 from Raod/dev

report-ui/src/main.js

@@ -41,9 +41,6 @@ import Avue from '@smallwei/avue';
 import '@smallwei/avue/lib/index.css';
 Vue.use(Avue);
 
-import VueSuperSlide from 'vue-superslide'
-Vue.use(VueSuperSlide)
-
 // enable element zh-cn
 Vue.use(ElementUI, { zhLocale })
 

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

@@ -7010,7 +7010,7 @@ const widgetTools = [
     code: 'widgetBarCompareChart',
     type: 'chart',
     label: '柱状对比图',
-    icon: 'iconbianzu23',
+    icon: 'iconduibitupu',
     options: {
       // 配置
       setup: [
@@ -7022,14 +7022,6 @@ const widgetTools = [
           placeholder: '',
           value: '柱状对比图',
         },
-        {
-          type: 'el-switch',
-          label: '竖展示',
-          name: 'verticalShow',
-          required: false,
-          placeholder: '',
-          value: false,
-        },
         {
           type: 'vue-color',
           label: '背景颜色',
@@ -7048,7 +7040,7 @@ const widgetTools = [
                 name: 'maxWidth',
                 required: false,
                 placeholder: '',
-                value: 20,
+                value: 15,
               },
               {
                 type: 'el-slider',
@@ -7122,47 +7114,9 @@ const widgetTools = [
                 ],
                 value: 'center'
               },
-              {
-                type: 'el-input-text',
-                label: '副标题',
-                name: 'subText',
-                required: false,
-                placeholder: '',
-                value: ''
-              },
-              {
-                type: 'vue-color',
-                label: '字体颜色',
-                name: 'subTextColor',
-                required: false,
-                placeholder: '',
-                value: 'rgba(30, 144, 255, 1)'
-              },
-              {
-                type: 'el-select',
-                label: '字体粗细',
-                name: 'subTextFontWeight',
-                required: false,
-                placeholder: '',
-                selectOptions: [
-                  {code: 'normal', name: '正常'},
-                  {code: 'bold', name: '粗体'},
-                  {code: 'bolder', name: '特粗体'},
-                  {code: 'lighter', name: '细体'}
-                ],
-                value: 'normal'
-              },
-              {
-                type: 'el-input-number',
-                label: '字体大小',
-                name: 'subTextFontSize',
-                required: false,
-                placeholder: '',
-                value: 20
-              },
             ],
           },
-          {
+          /*{
             name: 'X轴设置',
             list: [
               {
@@ -7263,8 +7217,8 @@ const widgetTools = [
 
               }
             ],
-          },
+          },*/
-          {
+          /*{
             name: 'Y轴设置',
             list: [
               {
@@ -7355,7 +7309,7 @@ const widgetTools = [
 
               }
             ],
-          },
+          },*/
           {
             name: '数值设定',
             list: [
@@ -7365,7 +7319,7 @@ const widgetTools = [
                 name: 'isShow',
                 required: false,
                 placeholder: '',
-                value: false
+                value: true
               },
               {
                 type: 'el-input-number',
@@ -7419,7 +7373,7 @@ const widgetTools = [
               },
             ],
           },
-          {
+          /*{
             name: '坐标轴边距设置',
             list: [
               {
@@ -7452,7 +7406,7 @@ const widgetTools = [
                 value: 10,
               },
             ],
-          },
+          },*/
           {
             name: '图例操作',
             list: [
@@ -7535,7 +7489,7 @@ const widgetTools = [
                 label: '',
                 name: 'customColor',
                 required: false,
-                value: [{color: '#ff7f50'}, {color: '#87cefa'}],
+                value: [{color: '#36c5e7'}, {color: '#e68b55'}],
               },
             ],
           },

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

@@ -17,7 +17,7 @@ export default {
     return {
       options: {
         title: {
-          text: '柱状对比图',
+          //text: '柱状对比图',
           x: 'center',
           textStyle: {
             color: '#ffffff',
@@ -28,7 +28,7 @@ export default {
             show: false,
             left: '4%',
             top: 60,
-            bottom: 60,
+            bottom: 10,
             containLabel: true,
             width: '40%'
           },
@@ -43,7 +43,7 @@ export default {
             show: false,
             right: '4%',
             top: 60,
-            bottom: 60,
+            bottom: 10,
             containLabel: true,
             width: '40%'
           },
@@ -61,8 +61,8 @@ export default {
           //itemWidth: 0
         },
         xAxis: [
-          {
+          {// 左
-            splitNumber: 2,//左间隔
+            splitNumber: 2,
             type: 'value',
             inverse: true,
             axisLine: {
@@ -72,14 +72,14 @@ export default {
               show: false,
             },
             position: 'bottom',
-            axisLabel: {
+            axisLabel: { // x轴
               show: true,
               textStyle: {
                 color: '#ffffff',
                 fontSize: 12
               }
             },
-            splitLine: {
+            splitLine: { // 分割线
               show: true,
               lineStyle: {
                 color: '#57617f',
@@ -92,7 +92,7 @@ export default {
             gridIndex: 1,
             show: false,
           },
-          {
+          {// 右
             gridIndex: 2,
             type: 'value',
             axisLine: {
@@ -177,7 +177,7 @@ export default {
             name: '',
             type: 'bar',
             barGap: 20,
-            barWidth: '80%',
+            barWidth: 15,
             label: {
               normal: {
                 show: true,
@@ -207,7 +207,7 @@ export default {
             name: '',
             type: 'bar',
             barGap: 20,
-            barWidth: '80%',
+            barWidth: 15,
             xAxisIndex: 2,
             yAxisIndex: 2,
             label: {
@@ -256,7 +256,7 @@ export default {
       handler(val) {
         this.optionsStyle = val.position;
         this.optionsData = val.data;
-        this.optionsCollapse = val.setup;
+        this.optionsSetup = val.setup;
         this.optionsSetup = val.setup;
         this.editorOptions();
       },
@@ -273,8 +273,109 @@ export default {
   methods: {
     // 修改图标options属性
     editorOptions() {
+      this.setOptionsTitle();
+      this.setOptionsTop();
+      this.setOptionsLegend();
+      this.setOptionsColor();
       this.setOptionsData();
     },
+    // 标题修改
+    setOptionsTitle() {
+      const optionsCollapse = this.optionsSetup;
+      const title = {};
+      title.text = optionsCollapse.titleText;
+      title.show = optionsCollapse.isNoTitle;
+      title.left = optionsCollapse.textAlign;
+      title.textStyle = {
+        color: optionsCollapse.textColor,
+        fontSize: optionsCollapse.textFontSize,
+        fontWeight: optionsCollapse.textFontWeight
+      };
+      this.options.title = title;
+    },
+    // 数值设定、柱体设置
+    setOptionsTop() {
+      const optionsSetup = this.optionsSetup;
+      const series = this.options.series;
+      for (const key in series) {
+        if (series[key].type == "bar") {
+          series[0].label = {
+            normal: {
+              show: optionsSetup.isShow,
+              //color: 'red',
+              position: 'insideLeft',
+              textStyle: {
+                fontSize: optionsSetup.fontSize,
+                color: optionsSetup.subTextColor,
+                fontWeight: optionsSetup.fontWeight
+              }
+            },
+            emphasis: {
+              show: false,
+            },
+          },
+            series[1].label = {
+              normal: {
+                show: optionsSetup.isShow,
+                color: 'red',
+                position: 'insideRight',
+                textStyle: {
+                  fontSize: optionsSetup.fontSize,
+                  color: optionsSetup.subTextColor,
+                  fontWeight: optionsSetup.fontWeight
+                }
+              },
+              emphasis: {
+                show: false,
+              },
+            },
+            series[key].barWidth = optionsSetup.maxWidth;
+        }
+      }
+      this.options.series = series;
+    },
+    // 图例操作
+    setOptionsLegend() {
+      const optionsSetup = this.optionsSetup;
+      const legend = this.options.legend;
+      legend.show = optionsSetup.isShowLegend;
+      legend.left = optionsSetup.lateralPosition;
+      legend.top = optionsSetup.longitudinalPosition == "top" ? 0 : "auto";
+      legend.bottom =
+        optionsSetup.longitudinalPosition == "bottom" ? 0 : "auto";
+      legend.orient = optionsSetup.layoutFront;
+      legend.textStyle = {
+        color: optionsSetup.lengedColor,
+        fontSize: optionsSetup.lengedFontSize
+      };
+      legend.itemWidth = optionsSetup.lengedWidth;
+    },
+    // 颜色修改、圆角修改
+    setOptionsColor() {
+      const optionsSetup = this.optionsSetup;
+      const customColor = optionsSetup.customColor;
+      if (!customColor) return;
+      const itemStyleLeft = {
+        normal: {
+          color: customColor[0].color,
+          barBorderRadius: [optionsSetup.radius, 0, 0, optionsSetup.radius]
+        },
+        emphasis: {
+          show: false,
+        },
+      }
+      const itemStyleRight = {
+        normal: {
+          color: customColor[1].color,
+          barBorderRadius: [0, optionsSetup.radius, optionsSetup.radius, 0]
+        },
+        emphasis: {
+          show: false,
+        },
+      }
+      this.options.series[0].itemStyle = itemStyleLeft;
+      this.options.series[1].itemStyle = itemStyleRight;
+    },
     // 数据解析
     setOptionsData() {
       const optionsSetup = this.optionsSetup;
@@ -335,7 +436,6 @@ export default {
       this.options.series[1]['name'] = arrayList[1].name
       this.options.series[1]['data'] = arrayList[1].data
       this.options.yAxis[1]['data'] = xAxisList
-
       /*if (optionsSetup.verticalShow) {
         this.options.xAxis.data = [];
         this.options.yAxis.data = xAxisList;

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

@@ -27,7 +27,11 @@
   </div>
 </template>
 <script>
+import VueSuperSlide from "vue-superslide";
 export default {
+  components: {
+    VueSuperSlide
+  },
   props: {
     value: Object,
     ispreview: Boolean