大屏显示

report-ui/package.json

@@ -27,9 +27,14 @@
     "nprogress": "0.2.0",
     "sortablejs": "^1.10.2",
     "uninstall": "0.0.0",
+    "v-chart": "^1.0.0",
     "vue": "2.6.11",
     "vue-codemirror": "^4.0.6",
+    "vue-color": "^2.8.1",
+    "vue-drag-resize": "^1.5.4",
+    "vue-echarts": "^5.0.0-beta.0",
     "vue-router": "3.0.1",
+    "vue-ruler-tool": "^1.2.4",
     "vuedraggable": "^2.24.1",
     "vuex": "3.0.1"
   },

report-ui/src/main.js

@@ -14,6 +14,13 @@ import router from './router'
 import store from './store'
 import * as filter from './filter'
 import mixins from '@/mixins'
+import echarts from 'echarts';
+// 全局定义echarts
+import ECharts from 'vue-echarts'
+import 'echarts/lib/chart/bar'
+import 'echarts/lib/component/tooltip'
+// import 'echarts-gl'
+Vue.component('v-chart', ECharts)
 
 // permission control
 import '@/permission'

report-ui/src/mixins/common.js

@@ -1,24 +1,24 @@
 export default {
-  data() {
+  data () {
     return {
     }
   },
   computed: {
   },
-  created() {
+  created () {
   },
-  mounted() {
+  mounted () {
   },
-  destroyed() {
+  destroyed () {
   },
   methods: {
-    goBack() {
+    goBack () {
       this.$router.go(-1)
     },
-    refresh() {
+    refresh () {
       this.$router.go(0)
     },
-    parseString(object) {
+    parseString (object) {
       if (typeof object === 'undefined' || object == null) {
         return ''
       }
@@ -33,7 +33,7 @@ export default {
       }
       return ''
     },
-    isBlank(val) {
+    isBlank (val) {
       if (typeof val === 'undefined') {
         return true
       }
@@ -42,49 +42,88 @@ export default {
       }
       return false
     },
-		// 封装定制删除数组中的值
-		contains(a, obj) {
-			var i = a.length
-			while (i--) {
-				if (a[i] === obj) {
-					return i
-				}
-			}
-			return false
-		},
-		//获取url后边参数
-    getUrlKey: function(name) {
-			return (
-				decodeURIComponent(
-					(new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ''])[1].replace(
-						/\+/g,
-						'%20'
-					)
-				) || null
-			)
+    // 封装定制删除数组中的值
+    contains (a, obj) {
+      var i = a.length
+      while (i--) {
+        if (a[i] === obj) {
+          return i
+        }
+      }
+      return false
+    },
+    //获取url后边参数
+    getUrlKey: function (name) {
+      return (
+        decodeURIComponent(
+          (new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ''])[1].replace(
+            /\+/g,
+            '%20'
+          )
+        ) || null
+      )
     },
     /**
      * 
      */
-    resetForm(data) {
+    resetForm (data) {
       let formKeys = Object.keys(data)
       for (let k of formKeys) {
         data[k] = null
       }
     },
-    sortArray(propertyName){
-      return function(object1,object2){
+    sortArray (propertyName) {
+      return function (object1, object2) {
         var value1 = object1[propertyName];
         var value2 = object2[propertyName];
-        
-        if(value1 < value2){
+
+        if (value1 < value2) {
           return -1;
-        }else if(value1 > value2){
+        } else if (value1 > value2) {
           return 1;
-        }else{
+        } else {
           return 0;
         }
       }
-    }
+    },
+    objToOne (obj) {
+      var tmpData = {}
+      for (var index in obj) {
+        if (typeof obj[index] == 'object') {
+          var resObj = this.objToOne(obj[index])
+          Object.assign(tmpData, resObj) // 这里使用对象合并
+        } else {
+          tmpData[index] = obj[index]
+        }
+      }
+      return tmpData
+    },
+    isNotNull (val) {
+      return !this.isNull(val)
+    },
+    isNull (val) {
+      // 特殊判断
+      if (val && parseInt(val) === 0) return false
+      const list = ['$parent']
+      if (val instanceof Date || typeof val === 'boolean' || typeof val === 'number') return false
+      if (val instanceof Array) {
+        if (val.length === 0) return true
+      } else if (val instanceof Object) {
+        val = this.deepClone(val)
+        list.forEach((ele) => {
+          delete val[ele]
+        })
+        for (var o in val) {
+          return false
+        }
+        return true
+      } else {
+        if (val === 'null' || val == null || val === 'undefined' || val === undefined || val === '') {
+          return true
+        }
+        return false
+      }
+      return false
+    },
   }
 }

report-ui/src/router/index.js

@@ -83,8 +83,12 @@ export const constantRouterMap = [
     meta: { title: '大屏报表', icon: 'iconnavicon-ywcs' },
     children: [
       { path: 'bigscreen', name: 'bigscreen', component: () => import('@/views/report/bigscreen/index'), meta: { title: '大屏报表', icon: 'iconchufaqipeizhi-hui', keepAlive: true, isBack: true } },
+      // { path: '/bigscreen/viewer', name: 'bigscreenViewer', component: () => import('@/views/report/bigscreen/viewer'), meta: { title: '预览', icon: 'i', keepAlive: false, isBack: true } },
+      // { path: '/bigscreen/designer', name: 'bigscreenDesigner', component: () => import('@/views/report/bigscreen/designer'), meta: { title: '设计', icon: 'i', keepAlive: false, isBack: true } },
     ]
   },
+  { path: '/bigscreen/viewer', component: () => import('@/views/report/bigscreen/viewer'), hidden: true },
+  { path: '/bigscreen/designer', component: () => import('@/views/report/bigscreen/designer'), hidden: true },
   // {
   //   path: '/report',
   //   component: Layout,

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

@@ -1,6 +1,11 @@
 <template>
-  <div v-show="visible" class="contentmenu" :style="styleObj">
-    <div class="contentmenu__item" @click="deleteLayer"><svg-icon icon-class="guanbi" /> 删除图层</div>
+  <div v-show="visible"
+       class="contentmenu"
+       :style="styleObj">
+    <div class="contentmenu__item"
+         @click="deleteLayer">
+      <!-- <svg-icon icon-class="guanbi" />  -->删除图层
+    </div>
   </div>
 </template>
 <script>
@@ -9,11 +14,11 @@ export default {
     styleObj: Object,
     visible: Boolean,
   },
-  data() {
+  data () {
     return {}
   },
   watch: {
-    visible(value) {
+    visible (value) {
       if (value) {
         document.body.addEventListener('click', this.closeMenu)
       } else {
@@ -22,10 +27,10 @@ export default {
     },
   },
   methods: {
-    closeMenu() {
+    closeMenu () {
       this.$emit('update:visible', false)
     },
-    deleteLayer() {
+    deleteLayer () {
       this.$confirm('是否删除所选图层?', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',

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

@@ -1,37 +1,56 @@
 <template>
   <div>
-    <el-button type="primary" icon="el-icon-plus" plain @click="handleAddClick">新增</el-button>
-    <el-table :data="formData" style="width: 100%">
-      <el-table-column prop="color" label="颜色" align="center">
+    <el-button type="primary"
+               icon="el-icon-plus"
+               plain
+               @click="handleAddClick">新增</el-button>
+    <el-table :data="formData"
+              style="width: 100%">
+      <el-table-column prop="color"
+                       label="颜色"
+                       align="center">
         <template slot-scope="scope">
-          <span class="color-box" :style="{ background: scope.row.color }" />
+          <span class="color-box"
+                :style="{ background: scope.row.color }" />
         </template>
       </el-table-column>
-      <el-table-column label="位置" align="center">
+      <el-table-column label="位置"
+                       align="center">
         <template slot-scope="scope">
-          <span class="editor" @click="handleEditorClick(scope.$index, scope.row)"> <i class="el-icon-edit" /> 编辑 </span>
+          <span class="editor"
+                @click="handleEditorClick(scope.$index, scope.row)"> <i class="el-icon-edit" /> 编辑 </span>
         </template>
       </el-table-column>
-      <el-table-column label="操作" align="center">
+      <el-table-column label="操作"
+                       align="center">
         <template slot-scope="scope">
-          <span class="editor" @click="handleDeleteClick(scope.$index, scope.row)"> <i class="el-icon-delete" /> 删除 </span>
+          <span class="editor"
+                @click="handleDeleteClick(scope.$index, scope.row)"> <i class="el-icon-delete" /> 删除 </span>
         </template>
       </el-table-column>
     </el-table>
 
-    <el-dialog title="新增" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
+    <el-dialog title="新增"
+               :visible.sync="dialogVisible"
+               width="30%"
+               :before-close="handleClose">
       <el-form>
         <el-form-item label="颜色">
-          <el-input v-model="colorValue" style="width: 200px" placeholder="请输入颜色">
+          <el-input v-model="colorValue"
+                    style="width: 200px"
+                    placeholder="请输入颜色">
             <template slot="append">
-              <el-color-picker v-model="colorValue" :predefine="predefineColors" />
+              <el-color-picker v-model="colorValue"
+                               :predefine="predefineColors" />
             </template>
           </el-input>
         </el-form-item>
       </el-form>
-      <span slot="footer" class="dialog-footer">
+      <span slot="footer"
+            class="dialog-footer">
         <el-button @click="dialogVisible = false">取 消</el-button>
-        <el-button type="primary" @click="handleSaveClick">确 定</el-button>
+        <el-button type="primary"
+                   @click="handleSaveClick">确 定</el-button>
       </span>
     </el-dialog>
   </div>
@@ -46,7 +65,7 @@ export default {
   props: {
     formData: Array,
   },
-  data() {
+  data () {
     return {
       predefineColors: ['#ff4500', '#ff8c00', '#ffd700', '#90ee90', '#00ced1', '#1e90ff', '#c71585'],
       colorValue: '',
@@ -55,21 +74,21 @@ export default {
       indexEditor: -1, // 编辑第几个数据
     }
   },
-  mounted() {},
+  mounted () { },
   methods: {
     // 弹出框关闭
-    handleClose() {
+    handleClose () {
       this.dialogVisible = false
       this.colorValue = ''
     },
     // 新增
-    handleAddClick() {
+    handleAddClick () {
       this.colorValue = ''
       this.flag = true
       this.dialogVisible = true
     },
     // 确定
-    handleSaveClick() {
+    handleSaveClick () {
       if (this.flag) {
         // 新增
         const obj = {
@@ -85,20 +104,20 @@ export default {
       this.$emit('input', this.formData)
     },
     // 编辑
-    handleEditorClick(index, row) {
+    handleEditorClick (index, row) {
       this.flag = false
       this.colorValue = row.color
       this.dialogVisible = true
       this.indexEditor = index
     },
     // 删除
-    handleDeleteClick(index) {
+    handleDeleteClick (index) {
       this.formData.splice(index, 1)
     },
   },
 }
 </script>
-<style lang="less" scoped>
+<style lang="scss" scoped>
 .color-box {
   .title {
     display: flex;

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

@@ -1,80 +0,0 @@
-<template>
-  <el-collapse accordion>
-    <el-collapse-item
-      v-for="(item, index) in options"
-      :key="index"
-      :title="item.name"
-      :name="index"
-    >
-      <dynamicForm
-        :options="item.list"
-        @onChanged="onChanged"
-      />
-    </el-collapse-item>
-  </el-collapse>
-</template>
-<script>
-import dynamicForm from './dynamicForm'
-export default {
-  name: 'WidgetTemp',
-  components: {
-    dynamicForm,
-  },
-  props: {
-    options: Array,
-  },
-  data() {
-    return {
-      formData: {},
-    }
-  },
-  watch: {
-    options(val) {
-      console.log(val)
-    }
-  },
-  mounted() {
-    this.handlerOptions()
-  },
-  methods: {
-    onChanged(val) {
-      console.log(val)
-      for (const i in val) {
-        this.formData[i] = this.deepClone(val[i])
-      }
-      this.$emit('onChanged', this.formData)
-    },
-    handlerOptions() {
-      for (let i = 0; i < this.options.length; i++) {
-        const item = this.options[i]
-        for (let j = 0; j < item.list.length; j++) {
-          this.formData[item.list[j].name] = item.list[j].value
-        }
-      }
-    },
-  },
-}
-</script>
-
-<style scoped lang="scss">
-.el-collapse {
-  border-top: none;
-  border-bottom: none;
-}
-/deep/.el-collapse-item__header {
-  height: 40px;
-  line-height: 40px;
-  background: transparent;
-  color: #bcc9d4;
-  font-weight: 300;
-  font-size: 12px;
-  border-color: #282e3a;
-}
-/deep/.el-collapse-item__wrap {
-  background: transparent;
-  border: none;
-}
-/deep/.el-collapse-item__content {
-  padding-bottom: 0;
-}
-</style>

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

@@ -36,7 +36,6 @@ export default {
   data() {
     return {
       dataSetValue: '',
-
       dataSet: [], // 数据集
       userNameList: [], // 用户
       setParamList: [], // 对应的不同的图形数据参数

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

@@ -1,3 +1,4 @@
+/* eslint-disable vue/valid-v-for */
 <!--
  * @Author: lide1202@hotmail.com
  * @Date: 2021-4-6 11:04:24
@@ -8,130 +9,74 @@
   <div class="collapse-input-style">
     <el-form label-width="80px" label-position="left">
       <template v-for="(item, index) in options">
-        <el-form-item v-if="inputShow[item.name]" :key="index" :label="item.label" :prop="item.name" :required="item.required">
-          <el-input-number
-            v-if="item.type == 'el-input-number'"
-            v-model="formData[item.name]"
-            controls-position="right"
-            :placeholder="item.placeholder"
-            @change="changed($event, item.name)"
-          />
+        <div v-if="isShowForm(item, '[object Object]')" :key="index">
+          <el-form-item v-if="inputShow[item.name]" :label="item.label" :prop="item.name" :required="item.required">
+            <el-input-number v-if="item.type == 'el-input-number'" v-model="formData[item.name]" controls-position="right" :placeholder="item.placeholder" @change="changed($event, item.name)" />
 
-          <el-input
-            v-if="item.type == 'el-input-text'"
-            v-model.trim="formData[item.name]"
-            type="text"
-            placeholder="请输入内容"
-            clearable
-            @change="changed($event, item.name)"
-          />
+            <el-input v-if="item.type == 'el-input-text'" v-model.trim="formData[item.name]" type="text" placeholder="请输入内容" clearable @change="changed($event, item.name)" />
 
-          <el-input
-            v-if="item.type == 'el-input-textarea'"
-            v-model.trim="formData[item.name]"
-            type="textarea"
-            rows="2"
-            placeholder="请输入内容"
-            @change="changed($event, item.name)"
-          />
+            <el-input v-if="item.type == 'el-input-textarea'" v-model.trim="formData[item.name]" type="textarea" rows="2" placeholder="请输入内容" @change="changed($event, item.name)" />
 
-          <el-switch
-            v-if="item.type == 'el-switch'"
-            v-model="formData[item.name]"
-            placeholder="请输入内容"
-            @change="changed($event, item.name)"
-          />
+            <el-switch v-if="item.type == 'el-switch'" v-model="formData[item.name]" placeholder="请输入内容" @change="changed($event, item.name)" />
 
-          <ColorPicker
-            v-if="item.type == 'vue-color'"
-            v-model="formData[item.name]"
-            @change="(val) => changed(val, item.name)"
-          />
+            <ColorPicker v-if="item.type == 'vue-color'" v-model="formData[item.name]" @change="(val) => changed(val, item.name)" />
 
-          <el-upload
-            v-if="item.type == 'el-upload-picture'"
-            action="https://jsonplaceholder.typicode.com/posts/"
-            list-type="picture-card"
-          />
+            <el-upload v-if="item.type == 'el-upload-picture'" action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card" />
 
-          <el-radio-group
-            v-if="item.type == 'el-radio-group'"
-            v-model="formData[item.name]"
-            @change="(val) => changed(val, item.name)"
-          >
-            <el-radio
-              v-for="itemChild in item.selectOptions"
-              :key="itemChild.code"
-              :label="itemChild.code"
-            >{{ itemChild.name }}</el-radio>
-          </el-radio-group>
+            <el-radio-group v-if="item.type == 'el-radio-group'" v-model="formData[item.name]" @change="(val) => changed(val, item.name)">
+              <el-radio v-for="itemChild in item.selectOptions" :key="itemChild.code" :label="itemChild.code">{{ itemChild.name }}</el-radio>
+            </el-radio-group>
 
-          <el-select
-            v-if="item.type == 'el-select'"
-            v-model="formData[item.name]"
-            clearable
-            placeholder="请选择"
-            @change="(val) => changed(val, item.name)"
-          >
-            <el-option
-              v-for="itemChild in item.selectOptions"
-              :key="itemChild.code"
-              :label="itemChild.name"
-              :value="itemChild.code"
-            />
-          </el-select>
+            <el-select v-if="item.type == 'el-select'" v-model="formData[item.name]" clearable placeholder="请选择" @change="(val) => changed(val, item.name)">
+              <el-option v-for="itemChild in item.selectOptions" :key="itemChild.code" :label="itemChild.name" :value="itemChild.code" />
+            </el-select>
 
-          <el-slider
-            v-if="item.type == 'el-slider'"
-            v-model="formData[item.name]"
-            @change="(val) => changed(val, item.name)"
-          />
+            <el-slider v-if="item.type == 'el-slider'" v-model="formData[item.name]" @change="(val) => changed(val, item.name)" />
 
-          <el-button
-            v-if="item.type == 'el-button'"
-            type="primary"
-            plain
-            @click="addStaticData"
-          >编辑</el-button>
+            <el-button v-if="item.type == 'el-button'" type="primary" plain @click="addStaticData">编辑</el-button>
 
-          <!-- 弹窗 -->
-          <el-dialog
-            title="代码编辑"
-            :visible.sync="dialogVisibleStaticData"
-            width="50%"
-            :before-close="handleClose"
-          >
-            <codemirror
-              v-model.trim="formData[item.name]"
-              class="code-mirror"
-              :options="optionsJavascript"
-              style="height: 190px"
-            />
-            <span
-              slot="footer"
-              class="dialog-footer"
-            >
-              <el-button @click="dialogVisibleStaticData = false">取 消</el-button>
-              <el-button
-                type="primary"
-                @click="saveData"
-              >确 定</el-button>
-            </span>
-          </el-dialog>
-        </el-form-item>
-      </template>
-      <!-- 自定义组件 -->
-      <template v-for="item in options">
-        <div :key="item.name">
-          <dynamicComponents
-            v-if="item.type == 'dycustComponents' && inputShow[item.name]"
-            v-model="formData[item.name]"
-            :chart-type="item.chartType"
-          />
-          <customColorComponents
-            v-if="item.type == 'customColor' && inputShow[item.name]"
-            v-model="formData[item.name]"
-          />
+            <!-- 弹窗 -->
+            <el-dialog title="代码编辑" :visible.sync="dialogVisibleStaticData" width="50%" :before-close="handleClose">
+              <codemirror v-model.trim="formData[item.name]" class="code-mirror" :options="optionsJavascript" style="height: 190px" />
+              <span slot="footer" class="dialog-footer">
+                <el-button @click="dialogVisibleStaticData = false">取 消</el-button>
+                <el-button type="primary" @click="saveData">确 定</el-button>
+              </span>
+            </el-dialog>
+          </el-form-item>
+          <dynamicComponents v-if="item.type == 'dycustComponents' && inputShow[item.name]" v-model="formData[item.name]" :chart-type="item.chartType" />
+        </div>
+        <div v-else-if="isShowForm(item, '[object Array]')" :key="'a-' + index">
+          <el-collapse accordion>
+            <el-collapse-item v-for="(itemChild, indexChild) in item" :key="indexChild" :title="itemChild.name" :name="indexChild">
+              <template v-for="(itemChildList, idx) in itemChild.list">
+                <el-form-item :key="idx" :label="itemChildList.label" :prop="itemChildList.name" :required="itemChildList.required">
+                  <el-input-number v-if="itemChildList.type == 'el-input-number'" v-model="formData[itemChildList.name]" controls-position="right" :placeholder="itemChildList.placeholder" @change="changed($event, itemChildList.name)" />
+
+                  <el-input v-if="itemChildList.type == 'el-input-text'" v-model.trim="formData[itemChildList.name]" type="text" placeholder="请输入内容" clearable @change="changed($event, itemChildList.name)" />
+
+                  <el-input v-if="itemChildList.type == 'el-input-textarea'" v-model.trim="formData[itemChildList.name]" type="textarea" rows="2" placeholder="请输入内容" @change="changed($event, itemChildList.name)" />
+
+                  <el-switch v-if="itemChildList.type == 'el-switch'" v-model="formData[itemChildList.name]" placeholder="请输入内容" @change="changed($event, itemChildList.name)" />
+
+                  <ColorPicker v-if="itemChildList.type == 'vue-color'" v-model="formData[itemChildList.name]" @change="(val) => changed(val, itemChildList.name)" />
+
+                  <el-upload v-if="itemChildList.type == 'el-upload-picture'" action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card" />
+
+                  <el-radio-group v-if="itemChildList.type == 'el-radio-group'" v-model="formData[itemChildList.name]" @change="(val) => changed(val, itemChildList.name)">
+                    <el-radio v-for="it in itemChildList.selectOptions" :key="it.code" :label="it.code">{{ it.name }}</el-radio>
+                  </el-radio-group>
+
+                  <el-select v-if="itemChildList.type == 'el-select'" v-model="formData[itemChildList.name]" clearable placeholder="请选择" @change="(val) => changed(val, itemChildList.name)">
+                    <el-option v-for="it in itemChildList.selectOptions" :key="it.code" :label="it.name" :value="it.code" />
+                  </el-select>
+
+                  <el-slider v-if="itemChildList.type == 'el-slider'" v-model="formData[itemChildList.name]" @change="(val) => changed(val, itemChildList.name)" />
+                </el-form-item>
+                <customColorComponents v-if="itemChildList.type == 'customColor'" :key="'b-' + idx" v-model="formData[itemChildList.name]" />
+              </template>
+            </el-collapse-item>
+          </el-collapse>
         </div>
       </template>
     </el-form>
@@ -150,7 +95,6 @@ import 'codemirror/mode/sql/sql.js'
 import 'codemirror/mode/shell/shell.js'
 import dynamicComponents from './dynamicComponents.vue'
 import customColorComponents from './customColorComponents'
-import vueJsonEditor from 'vue-json-editor'
 export default {
   name: 'DynamicForm',
   components: {
@@ -158,8 +102,6 @@ export default {
     codemirror,
     dynamicComponents,
     customColorComponents,
-    // eslint-disable-next-line vue/no-unused-components
-    vueJsonEditor
   },
   model: {
     prop: 'value',
@@ -169,7 +111,7 @@ export default {
     options: Array,
     value: {
       type: [Object],
-      default: () => { },
+      default: () => {},
     },
   },
   data() {
@@ -194,7 +136,6 @@ export default {
   },
   watch: {
     value(newValue, oldValue) {
-      console.log(newValue)
       this.formData = newValue || {}
     },
     options() {
@@ -265,11 +206,25 @@ export default {
     setDefaultValue() {
       if (this.options && this.options.length > 0) {
         for (let i = 0; i < this.options.length; i++) {
-          this.formData[this.options[i].name] = this.deepClone(this.options[i].value)
+          const obj = this.options[i]
+          if (Object.prototype.toString.call(obj) == '[object Object]') {
+            this.formData[this.options[i].name] = this.deepClone(this.options[i].value)
+          } else if (Object.prototype.toString.call(obj) == '[object Array]') {
+            for (let j = 0; j < obj.length; j++) {
+              const list = obj[j].list
+              list.forEach((el) => {
+                this.formData[el.name] = el.value
+              })
+            }
+          }
         }
         this.formData = Object.assign({}, this.formData)
       }
     },
+    // 是否显示 那种格式
+    isShowForm(val, type) {
+      return Object.prototype.toString.call(val) == type
+    },
   },
 }
 </script>
@@ -283,4 +238,24 @@ export default {
   width: 100%;
   height: 100% !important;
 }
+.el-collapse {
+  border-top: none;
+  border-bottom: none;
+}
+/deep/.el-collapse-item__header {
+  height: 40px;
+  line-height: 40px;
+  background: transparent;
+  color: #bcc9d4;
+  font-weight: 300;
+  font-size: 12px;
+  border-color: #282e3a;
+}
+/deep/.el-collapse-item__wrap {
+  background: transparent;
+  border: none;
+}
+/deep/.el-collapse-item__content {
+  padding-bottom: 0;
+}
 </style>

report-ui/src/views/report/bigscreen/designer/index.vue

@@ -6,15 +6,20 @@
  !-->
 <template>
   <div class="layout">
-    <div v-if="toolIsShow" class="layout-left" :style="{ width: widthLeftForTools + 'px' }">
-      <el-tabs type="border-card" :stretch="true">
+    <div v-if="toolIsShow"
+         class="layout-left"
+         :style="{ width: widthLeftForTools + 'px' }">
+      <el-tabs type="border-card"
+               :stretch="true">
         <!-- 左侧组件栏-->
         <el-tab-pane label="工具栏">
           <!-- <el-divider content-position="center">html</el-divider>-->
-          <draggable v-for="widget in widgetTools" :key="widget.code" @end="(evt) => widgetOnDragged(evt, widget.code)">
+          <draggable v-for="widget in widgetTools"
+                     :key="widget.code"
+                     @end="(evt) => widgetOnDragged(evt, widget.code)">
             <div class="tools-item">
               <span class="tools-item-icon">
-                <svg-icon :icon-class="widget.icon" />
+                <!-- <svg-icon :icon-class="widget.icon" /> -->1
               </span>
               <span class="tools-item-text">{{ widget.label }}</span>
             </div>
@@ -22,9 +27,11 @@
         </el-tab-pane>
         <!-- 左侧图层-->
         <el-tab-pane label="图层">
-          <div v-for="(item, index) in layerWidget" :key="index" class="tools-item">
+          <div v-for="(item, index) in layerWidget"
+               :key="index"
+               class="tools-item">
             <span class="tools-item-icon">
-              <svg-icon :icon-class="item.icon" />
+              <!-- <svg-icon :icon-class="item.icon" /> -->2
             </span>
             <span class="tools-item-text">{{ item.label }}</span>
           </div>
@@ -32,48 +39,90 @@
       </el-tabs>
     </div>
 
-    <div class="layout-left-fold" :style="{ width: widthLeftForToolsHideButton + 'px' }" @click="toolIsShow = !toolIsShow">
+    <div class="layout-left-fold"
+         :style="{ width: widthLeftForToolsHideButton + 'px' }"
+         @click="toolIsShow = !toolIsShow">
       <i class="iconfont iconfold" />
     </div>
 
-    <div class="layout-middle" :style="{ width: middleWidth + 'px', height: middleHeight + 'px' }">
+    <div class="layout-middle"
+         :style="{ width: middleWidth + 'px', height: middleHeight + 'px' }">
       <div class="top-button">
         <span class="btn">
-          <el-tooltip class="item" effect="dark" content="保存" placement="bottom">
-            <svg-icon icon-class="report" @click="saveData" />
+          <el-tooltip class="item"
+                      effect="dark"
+                      content="保存"
+                      placement="bottom">
+            <!-- <svg-icon icon-class="report" @click="saveData" /> -->3
           </el-tooltip>
         </span>
         <span class="btn">
-          <el-tooltip class="item" effect="dark" content="预览" placement="bottom">
-            <svg-icon icon-class="eye-open" @click="viewScreen" />
+          <el-tooltip class="item"
+                      effect="dark"
+                      content="预览"
+                      placement="bottom">
+            <!-- <svg-icon icon-class="eye-open" @click="viewScreen" /> -->4
           </el-tooltip>
         </span>
       </div>
-      <div class="workbench-container" :style="{ width: bigscreenWidthInWorkbench + 'px', height: bigscreenHeightInWorkbench + 'px' }">
-        <vue-ruler-tool v-model="dashboard.presetLine" class="vueRuler" :step-length="50" :parent="true" :position="'relative'" :is-scale-revise="true" :visible.sync="dashboard.presetLineVisible">
-          <div id="workbench" class="workbench" :style="{ transform: workbenchTransform, width: bigscreenWidth + 'px', height: bigscreenHeight + 'px', 'background-color': dashboard.backgroundColor, 'background-image': 'url(' + dashboard.backgroundImage + ')', 'background-position': '0% 0%', 'background-size': '100% 100%', 'background-repeat': 'initial', 'background-attachment': 'initial', 'background-origin': 'initial', 'background-clip': 'initial' }" @click="setOptionsOnClickScreen">
-            <widget v-for="(widget, index) in widgets" :key="index" v-model="widget.value" :index="index" :type="widget.type" :bigscreen="{ bigscreenWidth, bigscreenHeight }" @onActivated="setOptionsOnClickWidget" @contextmenu.prevent.native="rightClick($event, index)" />
+      <div class="workbench-container"
+           :style="{ width: bigscreenWidthInWorkbench + 'px', height: bigscreenHeightInWorkbench + 'px' }">
+        <vue-ruler-tool v-model="dashboard.presetLine"
+                        class="vueRuler"
+                        :step-length="50"
+                        :parent="true"
+                        :position="'relative'"
+                        :is-scale-revise="true"
+                        :visible.sync="dashboard.presetLineVisible">
+          <div id="workbench"
+               class="workbench"
+               :style="{ transform: workbenchTransform, width: bigscreenWidth + 'px', height: bigscreenHeight + 'px', 'background-color': dashboard.backgroundColor, 'background-image': 'url(' + dashboard.backgroundImage + ')', 'background-position': '0% 0%', 'background-size': '100% 100%', 'background-repeat': 'initial', 'background-attachment': 'initial', 'background-origin': 'initial', 'background-clip': 'initial' }"
+               @click="setOptionsOnClickScreen">
+            <widget v-for="(widget, index) in widgets"
+                    :key="index"
+                    v-model="widget.value"
+                    :index="index"
+                    :type="widget.type"
+                    :bigscreen="{ bigscreenWidth, bigscreenHeight }"
+                    @onActivated="setOptionsOnClickWidget"
+                    @contextmenu.prevent.native="rightClick($event, index)" />
           </div>
         </vue-ruler-tool>
       </div>
     </div>
 
-    <div class="layout-right" :style="{ width: widthLeftForOptions + 'px' }">
-      <el-tabs v-model="activeName" type="border-card" :stretch="true">
-        <el-tab-pane v-if="isNotNull(widgetOptions.setup) || isNotNull(widgetOptions.collapse)" name="first" label="配置">
-          <dynamicForm ref="formData" :options="widgetOptions.setup" @onChanged="(val) => widgetValueChanged('setup', val)" />
-          <dynamicCollapseForm v-if="widgetOptions.collapse && widgetOptions.collapse.length > 0" ref="formData" :options="widgetOptions.collapse" @onChanged="(val) => widgetValueChanged('collapse', val)" />
+    <div class="layout-right"
+         :style="{ width: widthLeftForOptions + 'px' }">
+      <el-tabs v-model="activeName"
+               type="border-card"
+               :stretch="true">
+        <el-tab-pane v-if="isNotNull(widgetOptions.setup) || isNotNull(widgetOptions.collapse)"
+                     name="first"
+                     label="配置">
+          <dynamicForm ref="formData"
+                       :options="widgetOptions.setup"
+                       @onChanged="(val) => widgetValueChanged('setup', val)" />
         </el-tab-pane>
-        <el-tab-pane v-if="isNotNull(widgetOptions.data)" name="second" label="数据">
-          <dynamicForm ref="formData" :options="widgetOptions.data" @onChanged="(val) => widgetValueChanged('data', val)" />
+        <el-tab-pane v-if="isNotNull(widgetOptions.data)"
+                     name="second"
+                     label="数据">
+          <dynamicForm ref="formData"
+                       :options="widgetOptions.data"
+                       @onChanged="(val) => widgetValueChanged('data', val)" />
         </el-tab-pane>
-        <el-tab-pane v-if="isNotNull(widgetOptions.position)" name="third" label="坐标">
-          <dynamicForm ref="formData" :options="widgetOptions.position" @onChanged="(val) => widgetValueChanged('position', val)" />
+        <el-tab-pane v-if="isNotNull(widgetOptions.position)"
+                     name="third"
+                     label="坐标">
+          <dynamicForm ref="formData"
+                       :options="widgetOptions.position"
+                       @onChanged="(val) => widgetValueChanged('position', val)" />
         </el-tab-pane>
       </el-tabs>
     </div>
 
-    <content-menu :visible.sync="visibleContentMenu" :style-obj="styleObj" @deletelayer="deletelayer" />
+    <content-menu :visible.sync="visibleContentMenu"
+                  :style-obj="styleObj"
+                  @deletelayer="deletelayer" />
   </div>
 </template>
 
@@ -82,7 +131,6 @@ import { insertDashboard, detailDashboard } from '@/api/bigscreen'
 import { widgetTools, getToolByCode } from './tools'
 import widget from './widget/widget.vue'
 import dynamicForm from './form/dynamicForm.vue'
-import dynamicCollapseForm from './form/dynamicCollapseForm.vue'
 import draggable from 'vuedraggable'
 import VueRulerTool from 'vue-ruler-tool' // 大屏设计页面的标尺插件
 import contentMenu from './form/contentMenu'
@@ -93,10 +141,9 @@ export default {
     VueRulerTool,
     widget,
     dynamicForm,
-    dynamicCollapseForm,
     contentMenu,
   },
-  data() {
+  data () {
     return {
       widgetTools: widgetTools, // 左侧工具栏的组件图标，将js变量加入到当前作用域
       widthLeftForTools: 200, // 左侧工具栏宽度
@@ -147,7 +194,6 @@ export default {
       // 当前激活组件右侧配置属性
       widgetOptions: {
         setup: [], // 配置
-        collapse: [],
         data: [], // 数据
         position: [], // 坐标
       },
@@ -163,7 +209,7 @@ export default {
   },
   computed: {
     // 左侧折叠切换时，动态计算中间区的宽度
-    middleWidth() {
+    middleWidth () {
       var widthLeftAndRight = 0
       if (this.toolIsShow) {
         widthLeftAndRight += this.widthLeftForTools // 左侧工具栏宽度
@@ -174,26 +220,26 @@ export default {
       var middleWidth = this.bodyWidth - widthLeftAndRight
       return middleWidth
     },
-    middleHeight() {
+    middleHeight () {
       return this.bodyHeight
     },
     // 设计台按大屏的缩放比例
-    bigscreenScaleInWorkbench() {
+    bigscreenScaleInWorkbench () {
       var widthScale = this.middleWidth / this.bigscreenWidth
       var heightScale = this.middleHeight / this.bigscreenHeight
       return Math.min(widthScale, heightScale)
     },
-    workbenchTransform() {
+    workbenchTransform () {
       return `scale(${this.bigscreenScaleInWorkbench}, ${this.bigscreenScaleInWorkbench})`
     },
     // 大屏在设计模式的大小
-    bigscreenWidthInWorkbench() {
+    bigscreenWidthInWorkbench () {
       return this.getPXUnderScale(this.bigscreenWidth)
     },
-    bigscreenHeightInWorkbench() {
+    bigscreenHeightInWorkbench () {
       return this.getPXUnderScale(this.bigscreenHeight)
     },
-    layerWidget() {
+    layerWidget () {
       const layerWidgetArr = []
       for (let i = 0; i < this.widgets.length; i++) {
         layerWidgetArr.push(getToolByCode(this.widgets[i].type))
@@ -201,7 +247,7 @@ export default {
       return layerWidgetArr
     },
   },
-  mounted() {
+  mounted () {
     // 一进入时，加载屏幕配置属性
     this.setOptionsOnClickScreen()
 
@@ -210,7 +256,7 @@ export default {
     this.widgets = []
   },
   methods: {
-    async initEchartData() {
+    async initEchartData () {
       const reportCode = this.$route.query.reportCode
       const { code, data } = await detailDashboard(reportCode)
       if (code != 200) return
@@ -219,7 +265,7 @@ export default {
       this.widgets = processData
       this.dashboard = screenData
     },
-    handleBigScreen(data) {
+    handleBigScreen (data) {
       const optionScreen = this.deepClone(getToolByCode('screen').options)
       const setup = optionScreen.setup
       for (const key in data) {
@@ -237,7 +283,8 @@ export default {
         width: data.width,
       }
     },
-    handleInitEchartsData(data) {
+    handleInitEchartsData (data) {
+      console.log(data)
       const widgets = data.dashboard.widgets
       const widgetsData = []
       for (let i = 0; i < widgets.length; i++) {
@@ -257,7 +304,7 @@ export default {
       }
       return widgetsData
     },
-    handleOptionsData(data, option) {
+    handleOptionsData (data, option) {
       for (const key in data.setup) {
         for (let i = 0; i < option.setup.length; i++) {
           if (key == option.setup[i].name) {
@@ -281,21 +328,21 @@ export default {
           }
         }
       }
-      // collapse
-      for (const key in data.collapse) {
-        for (let i = 0; i < option.collapse.length; i++) {
-          const itemList = option.collapse[i].list
-          for (let j = 0; j < itemList.length; j++) {
-            if (key == itemList[j].name) {
-              itemList[j].value = data.collapse[key]
-            }
-          }
-        }
-      }
+      // // collapse
+      // for (const key in data.collapse) {
+      //   for (let i = 0; i < option.collapse.length; i++) {
+      //     const itemList = option.collapse[i].list
+      //     for (let j = 0; j < itemList.length; j++) {
+      //       if (key == itemList[j].name) {
+      //         itemList[j].value = data.collapse[key]
+      //       }
+      //     }
+      //   }
+      // }
       return option
     },
     // 保存数据
-    async saveData() {
+    async saveData () {
       if (!this.widgets || this.widgets.length == 0) {
         this.$message.error('请添加组件')
         return
@@ -311,23 +358,24 @@ export default {
         },
         widgets: this.widgets,
       }
-      console.log(this.dashboard)
-      console.log(screenData)
       const { code, data } = await insertDashboard(screenData)
       if (code != '200') return
     },
     // 预览
-    viewScreen() {
-      var routeUrl = this.$router.resolve({ path: '/report/bigscreen/viewer', query: { reportCode: this.$route.query.reportCode }})
+    viewScreen () {
+      var routeUrl = this.$router.resolve({
+        path: '/report/bigscreen/viewer',
+        query: { reportCode: this.$route.query.reportCode },
+      })
       window.open(routeUrl.href, '_blank')
     },
     // 在缩放模式下的大小
-    getPXUnderScale(px) {
+    getPXUnderScale (px) {
       return this.bigscreenScaleInWorkbench * px
     },
 
     // 拖动一个组件放到工作区中去，在拖动结束时，放到工作区对应的坐标点上去
-    widgetOnDragged(evt, widgetCode) {
+    widgetOnDragged (evt, widgetCode) {
       var widgetType = widgetCode
 
       // 获取结束坐标和列名
@@ -344,13 +392,11 @@ export default {
 
       // 复制一个组件
       var tool = getToolByCode(widgetType)
-
       var widgetJson = {
         type: widgetType,
         value: {
           setup: {},
           data: {},
-          collapse: {},
           position: {
             width: 0,
             height: 0,
@@ -361,29 +407,32 @@ export default {
         },
         options: tool.options,
       }
-
       // 处理默认值
       const widgetJsonValue = this.handleDefaultValue(widgetJson)
-
       // 将选中的复制组件，放到工作区中去
-
       this.widgets.push(this.deepClone(widgetJsonValue))
-      console.log(this.widgets)
 
       // 激活新组件的配置属性
       this.setOptionsOnClickWidget(this.widgets.length - 1)
     },
 
     // 对组件默认值处理
-    handleDefaultValue(widgetJson) {
+    handleDefaultValue (widgetJson) {
       for (const key in widgetJson) {
         if (key == 'options') {
           // collapse、data、position、setup
           // setup 处理
           for (let i = 0; i < widgetJson.options.setup.length; i++) {
             const item = widgetJson.options.setup[i]
-            if (item.value) {
+            if (Object.prototype.toString.call(item) == '[object Object]') {
               widgetJson.value.setup[item.name] = item.value
+            } else if (Object.prototype.toString.call(item) == '[object Array]') {
+              for (let j = 0; j < item.length; j++) {
+                const list = item[j].list
+                list.forEach((el) => {
+                  widgetJson.value.setup[el.name] = el.value
+                })
+              }
             }
           }
           // position
@@ -393,18 +442,6 @@ export default {
               widgetJson.value.position[item.name] = item.value
             }
           }
-          // collapse 处理
-          if (widgetJson.options.collapse && widgetJson.options.collapse.length > 0) {
-            for (let i = 0; i < widgetJson.options.collapse.length; i++) {
-              const itemList = widgetJson.options.collapse[i].list
-              for (let j = 0; j < itemList.length; j++) {
-                const itemChildList = itemList[j]
-                if (itemChildList.value) {
-                  widgetJson.value.collapse[itemChildList.name] = itemChildList.value
-                }
-              }
-            }
-          }
           // data 处理
           if (widgetJson.options.data && widgetJson.options.data.length > 0) {
             for (let i = 0; i < widgetJson.options.data.length; i++) {
@@ -420,7 +457,7 @@ export default {
     },
 
     // 如果是点击大屏设计器中的底层，加载大屏底层属性
-    setOptionsOnClickScreen() {
+    setOptionsOnClickScreen () {
       this.screenCode = 'screen'
       // 选中不同的组件 右侧都显示第一栏
       this.activeName = 'first'
@@ -428,7 +465,7 @@ export default {
     },
 
     // 如果是点击某个组件，获取该组件的配置项
-    setOptionsOnClickWidget(index) {
+    setOptionsOnClickWidget (index) {
       // 选中不同的组件 右侧都显示第一栏
       this.activeName = 'first'
       this.screenCode = ''
@@ -437,6 +474,7 @@ export default {
           return
         }
         this.widgetIndex = index
+        console.log(this.deepClone(this.widgets[index]['options']))
         this.widgetOptions = this.deepClone(this.widgets[index]['options'])
         return
       } else {
@@ -446,7 +484,7 @@ export default {
     },
 
     // 将当前选中的组件，右侧属性值更新
-    widgetValueChanged(key, val) {
+    widgetValueChanged (key, val) {
       /* 更新指定 this.widgets 中第 this.widgetIndex 个组件的value
       widgets: [{
         type: 'widget-text',
@@ -456,19 +494,18 @@ export default {
           position: {}
         }
       }]*/
-      
       if (this.screenCode == 'screen') {
         this.dashboard = this.deepClone(val)
       }
+
       for (let i = 0; i < this.widgets.length; i++) {
         if (this.widgetIndex == i) {
           this.widgets[i].value[key] = this.deepClone(val)
-          this.setDefaultValue(this.widgets[i].options[key], key, val)
+          this.setDefaultValue(this.widgets[i].options[key], val)
         }
       }
-      // console.log(this.widgets)
     },
-    rightClick(event, index) {
+    rightClick (event, index) {
       this.rightClickIndex = index
       const left = event.clientX
       const top = event.clientY
@@ -482,33 +519,31 @@ export default {
       this.visibleContentMenu = true
       return false
     },
-    deletelayer() {
+    deletelayer () {
       this.widgets.splice(this.rightClickIndex, 1)
     },
-    setDefaultValue(options, type, val) {
-      // type: setup、collapse、data、position
-      const optionsArr = options
-      if (type == 'collapse') {
-        for (let i = 0; i < optionsArr.length; i++) {
-          const list = optionsArr[i].list
-          for (let j = 0; j < list.length; j++) {
-            for (const k in val) {
-              if (list[j].name == k) {
-                list[j].value = val[k]
-              } 
+    setDefaultValue (options, val) {
+      for (let i = 0; i < options.length; i++) {
+        if (Object.prototype.toString.call(options[i]) == '[object Object]') {
+          for (const k in val) {
+            if (options[i].name == k) {
+              options[i].value = val[k]
             }
           }
-        }
-      } else {
-        for (let i = 0; i < optionsArr.length; i++) {
-          for (const k in val) {
-            if (optionsArr[i].name == k) {
-              optionsArr[i].value = val[k]
-            } 
+        } else if (Object.prototype.toString.call(options[i]) == '[object Array]') {
+          for (let j = 0; j < options[i].length; j++) {
+            const list = options[i][j].list
+            for (let z = 0; z < list.length; z++) {
+              for (const k in val) {
+                if (list[z].name == k) {
+                  list[z].value = val[k]
+                }
+              }
+            }
           }
         }
       }
-    }
+    },
   },
 }
 </script>

report-ui/src/views/report/bigscreen/designer/widget/widgetBarchart.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: {
         grid: {},
@@ -48,49 +47,51 @@ export default {
             type: 'bar',
             barGap: '0%',
             itemStyle: {
-              borderRadius: null
-            }
+              borderRadius: null,
+            },
           },
         ],
       },
       optionsStyle: {}, // 样式
       optionsData: {}, // 数据
-      optionsCollapse: {}, // 图标属性
+      optionsSetup: {},
     }
   },
   computed: {
-    styleObj () {
+    styleObj() {
       return {
         position: this.ispreview ? 'absolute' : 'static',
         width: this.optionsStyle.width + 'px',
         height: this.optionsStyle.height + 'px',
         left: this.optionsStyle.left + 'px',
         top: this.optionsStyle.top + 'px',
+        background: this.optionsSetup.background,
       }
     },
   },
   watch: {
     value: {
-      handler (val) {
+      handler(val) {
+        console.log(val)
         this.optionsStyle = val.position
         this.optionsData = val.data
-        this.optionsCollapse = val.collapse
+        this.optionsCollapse = val.setup
         this.optionsSetup = val.setup
         this.editorOptions()
       },
       deep: true,
     },
   },
-  mounted () {
+  mounted() {
     this.optionsStyle = this.value.position
     this.optionsData = this.value.data
-    this.optionsCollapse = this.value.collapse
+    this.optionsCollapse = this.value.setup
     this.optionsSetup = this.value.setup
     this.editorOptions()
   },
   methods: {
     // 修改图标options属性
-    editorOptions () {
+    editorOptions() {
       this.setOptionsTitle()
       this.setOptionsX()
       this.setOptionsY()
@@ -102,11 +103,12 @@ export default {
       this.setOptionsData()
     },
     // 标题修改
-    setOptionsTitle () {
-      const optionsCollapse = this.optionsCollapse
+    setOptionsTitle() {
+      const optionsCollapse = this.optionsSetup
       const title = {}
       title.text = optionsCollapse.titleText
-      title.textAlign = optionsCollapse.textAlign
+      title.show = optionsCollapse.isNoTitle
+      title.left = optionsCollapse.textAlign
       title.textStyle = {
         color: optionsCollapse.textColor,
         fontSize: optionsCollapse.textFontSize,
@@ -122,8 +124,8 @@ export default {
       this.options.title = title
     },
     // X轴设置
-    setOptionsX () {
-      const optionsCollapse = this.optionsCollapse
+    setOptionsX() {
+      const optionsCollapse = this.optionsSetup
       const xAxis = {
         type: 'category',
         show: optionsCollapse.hideX, // 坐标轴是否显示
@@ -136,19 +138,25 @@ export default {
         inverse: optionsCollapse.reversalX, // 轴反转
         axisLabel: {
           show: true,
-          interval: optionsCollapse.textInterval,// 文字角度
-          rotate: optionsCollapse.textAngle,// 文字角度
+          interval: optionsCollapse.textInterval, // 文字角度
+          rotate: optionsCollapse.textAngle, // 文字角度
           textStyle: {
             color: optionsCollapse.Xcolor, // x轴 坐标文字颜色
             fontSize: optionsCollapse.fontSizeX,
           },
         },
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: '#fff',
+          },
+        },
       }
       this.options.xAxis = xAxis
     },
     // Y轴设置
-    setOptionsY () {
-      const optionsCollapse = this.optionsCollapse
+    setOptionsY() {
+      const optionsCollapse = this.optionsSetup
       const yAxis = {
         type: 'value',
         show: optionsCollapse.isShowY, // 坐标轴是否显示
@@ -165,13 +173,22 @@ export default {
             fontSize: optionsCollapse.fontSizeY,
           },
         },
+        splitLine: {
+          show: false,
+        },
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: '#fff',
+          },
+        },
       }
 
       this.options.yAxis = yAxis
     },
     // 数值设定 or 柱体设置
-    setOptionsTop () {
-      const optionsCollapse = this.optionsCollapse
+    setOptionsTop() {
+      const optionsCollapse = this.optionsSetup
       const series = this.options.series
 
       for (const key in series) {
@@ -191,8 +208,8 @@ export default {
       this.options.series = series
     },
     // tooltip 设置
-    setOptionsTooltip () {
-      const optionsCollapse = this.optionsCollapse
+    setOptionsTooltip() {
+      const optionsCollapse = this.optionsSetup
       const tooltip = {
         trigger: 'item',
         show: true,
@@ -203,21 +220,21 @@ export default {
       }
       this.options.tooltip = tooltip
     },
-    //边距设置
-    setOptionsMargin () {
-      const optionsCollapse = this.optionsCollapse
+    // 边距设置
+    setOptionsMargin() {
+      const optionsCollapse = this.optionsSetup
       const grid = {
         left: optionsCollapse.marginLeft,
         right: optionsCollapse.marginRight,
         bottom: optionsCollapse.marginBottom,
         top: optionsCollapse.marginTop,
-        containLabel: true
+        containLabel: true,
       }
       this.options.grid = grid
     },
     // 图例操作 legend
-    setOptionsLegend () {
-      const optionsCollapse = this.optionsCollapse
+    setOptionsLegend() {
+      const optionsCollapse = this.optionsSetup
       const legend = this.options.legend
       legend.show = optionsCollapse.isShowLegend
       legend.left = optionsCollapse.lateralPosition == 'left' ? 0 : 'auto'
@@ -232,23 +249,23 @@ export default {
       legend.itemWidth = optionsCollapse.lengedWidth
     },
     // 图例颜色修改
-    setOptionsColor () {
-      const optionsCollapse = this.optionsCollapse
+    setOptionsColor() {
+      const optionsCollapse = this.optionsSetup
       const customColor = optionsCollapse.customColor
       if (!customColor) return
-      let arrColor = []
+      const arrColor = []
       for (let i = 0; i < customColor.length; i++) {
         arrColor.push(customColor[i].color)
       }
-      let itemStyle = {
+      const itemStyle = {
         normal: {
           color: (params) => {
             return arrColor[params.dataIndex]
           },
-          barBorderRadius: optionsCollapse.radius
-        }
+          barBorderRadius: optionsCollapse.radius,
+        },
       }
-      for (let key in this.options.series) {
+      for (const key in this.options.series) {
         if (this.options.series[key].type == 'bar') {
           this.options.series[key].itemStyle = itemStyle
         }
@@ -256,13 +273,15 @@ export default {
       this.options = Object.assign({}, this.options)
     },
     // 数据解析
-    setOptionsData () {
+    setOptionsData() {
       const optionsSetup = this.optionsSetup
+      console.log(optionsSetup)
       const optionsData = this.optionsData // 数据类型 静态 or 动态
+      console.log(optionsData)
       optionsData.dataType == 'staticData' ? this.staticDataFn(optionsData.staticData, optionsSetup) : this.dynamicDataFn(optionsData.dynamicData, optionsSetup)
     },
     // 静态数据
-    staticDataFn (val, optionsSetup) {
+    staticDataFn(val, optionsSetup) {
       const staticData = JSON.parse(val)
       // x轴
       if (optionsSetup.verticalShow) {
@@ -278,14 +297,15 @@ export default {
       }
       // series
       const series = this.options.series
-      for (let i in series) {
+      for (const i in series) {
         if (series[i].type == 'bar') {
           series[i].data = staticData.series[0].data
         }
       }
     },
     // 动态数据
-    dynamicDataFn (val, optionsSetup) {
+    dynamicDataFn(val, optionsSetup) {
+      console.log(val)
       if (!val) return
       // x轴
       if (optionsSetup.verticalShow) {
@@ -302,7 +322,7 @@ export default {
 
       // series
       const series = this.options.series
-      for (let i in series) {
+      for (const i in series) {
         if (series[i].type == 'bar') {
           series[i].data = val.series[i].data
         }

report-ui/src/views/report/bigscreen/designer/widget/widgetBarlinechart.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: {
         color: [],
@@ -32,7 +31,7 @@ export default {
           textStyle: {
             color: '#fff',
           },
-          data: ["货运量", "货运总量"]
+          data: ['货运量', '货运总量'],
         },
         xAxis: [
           {
@@ -80,54 +79,58 @@ export default {
             type: 'bar',
             data: [],
             itemStyle: {
-              barBorderRadius: null
-            }
+              barBorderRadius: null,
+            },
           },
           {
             name: '',
             type: 'line',
             yAxisIndex: 1,
             data: [],
-            itemStyle: {}
+            itemStyle: {},
           },
         ],
       },
       optionsStyle: {}, // 样式
       optionsData: {}, // 数据
       optionsCollapse: {}, // 图标属性
+      optionsSetup: {},
     }
   },
   computed: {
-    styleObj () {
+    styleObj() {
       return {
         position: this.ispreview ? 'absolute' : 'static',
         width: this.optionsStyle.width + 'px',
         height: this.optionsStyle.height + 'px',
         left: this.optionsStyle.left + 'px',
         top: this.optionsStyle.top + 'px',
+        background: this.optionsSetup.background,
       }
     },
   },
   watch: {
     value: {
-      handler (val) {
+      handler(val) {
         this.optionsStyle = val.position
         this.optionsData = val.data
         this.optionsCollapse = val.collapse
+        this.optionsSetup = val.setup
         this.editorOptions()
       },
       deep: true,
     },
   },
-  created () {
+  created() {
     this.optionsStyle = this.value.position
     this.optionsData = this.value.data
     this.optionsCollapse = this.value.collapse
+    this.optionsSetup = this.value.setup
     this.editorOptions()
   },
   methods: {
     // 修改图标options属性
-    editorOptions () {
+    editorOptions() {
       this.setOptionsTitle()
       this.setOptionsX()
       this.setOptionsY()
@@ -140,11 +143,12 @@ export default {
       this.setOptionsColor()
     },
     // 标题修改
-    setOptionsTitle () {
-      const optionsCollapse = this.optionsCollapse
+    setOptionsTitle() {
+      const optionsCollapse = this.optionsSetup
       const title = {}
       title.text = optionsCollapse.titleText
-      title.textAlign = optionsCollapse.textAlign
+      title.show = optionsCollapse.isNoTitle
+      title.left = optionsCollapse.textAlign
       title.textStyle = {
         color: optionsCollapse.textColor,
         fontSize: optionsCollapse.textFontSize,
@@ -160,9 +164,8 @@ export default {
       this.options.title = title
     },
     // X轴设置
-    setOptionsX () {
-      const optionsCollapse = this.optionsCollapse
-      console.log(optionsCollapse)
+    setOptionsX() {
+      const optionsCollapse = this.optionsSetup
       const xAxis = {
         type: 'category',
         show: optionsCollapse.hideX, // 坐标轴是否显示
@@ -175,19 +178,25 @@ export default {
         inverse: optionsCollapse.reversalX, // 轴反转
         axisLabel: {
           show: true,
-          interval: optionsCollapse.textInterval,// 文字角度
-          rotate: optionsCollapse.textAngle,// 文字角度
+          interval: optionsCollapse.textInterval, // 文字角度
+          rotate: optionsCollapse.textAngle, // 文字角度
           textStyle: {
             color: optionsCollapse.Xcolor, // x轴 坐标文字颜色
             fontSize: optionsCollapse.fontSizeX,
           },
         },
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: '#fff',
+          },
+        },
       }
       this.options.xAxis = xAxis
     },
     // Y轴设置
-    setOptionsY () {
-      const optionsCollapse = this.optionsCollapse
+    setOptionsY() {
+      const optionsCollapse = this.optionsSetup
       const yAxis = [
         {
           type: 'value',
@@ -205,6 +214,15 @@ export default {
               fontSize: optionsCollapse.fontSizeY,
             },
           },
+          splitLine: {
+            show: false,
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: '#fff',
+            },
+          },
         },
         {
           type: 'value',
@@ -222,14 +240,23 @@ export default {
               fontSize: optionsCollapse.fontSizeY,
             },
           },
+          splitLine: {
+            show: false,
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: '#fff',
+            },
+          },
         },
       ]
 
       this.options.yAxis = yAxis
     },
     // 折线设置
-    setOptionsTop () {
-      const optionsCollapse = this.optionsCollapse
+    setOptionsTop() {
+      const optionsCollapse = this.optionsSetup
       const series = this.options.series
       for (const key in series) {
         if (series[key].type == 'line') {
@@ -261,8 +288,8 @@ export default {
       }
       this.options.series = series
     },
-    setOptionsBar () {
-      const optionsCollapse = this.optionsCollapse
+    setOptionsBar() {
+      const optionsCollapse = this.optionsSetup
       const series = this.options.series
       for (const key in series) {
         if (series[key].type == 'bar') {
@@ -282,8 +309,8 @@ export default {
       this.options.series = series
     },
     // tooltip 设置
-    setOptionsTooltip () {
-      const optionsCollapse = this.optionsCollapse
+    setOptionsTooltip() {
+      const optionsCollapse = this.optionsSetup
       const tooltip = {
         trigger: 'item',
         show: true,
@@ -294,21 +321,21 @@ export default {
       }
       this.options.tooltip = tooltip
     },
-    //边距设置
-    setOptionsMargin () {
-      const optionsCollapse = this.optionsCollapse
+    // 边距设置
+    setOptionsMargin() {
+      const optionsCollapse = this.optionsSetup
       const grid = {
         left: optionsCollapse.marginLeft,
         right: optionsCollapse.marginRight,
         bottom: optionsCollapse.marginBottom,
         top: optionsCollapse.marginTop,
-        containLabel: true
+        containLabel: true,
       }
       this.options.grid = grid
     },
     // 图例操作 legend
-    setOptionsLegend () {
-      const optionsCollapse = this.optionsCollapse
+    setOptionsLegend() {
+      const optionsCollapse = this.optionsSetup
       const legend = this.options.legend
       legend.show = optionsCollapse.isShowLegend
       legend.left = optionsCollapse.lateralPosition == 'left' ? 0 : 'auto'
@@ -323,11 +350,11 @@ export default {
       legend.itemWidth = optionsCollapse.lengedWidth
     },
     // 图例颜色修改
-    setOptionsColor () {
-      const optionsCollapse = this.optionsCollapse
+    setOptionsColor() {
+      const optionsCollapse = this.optionsSetup
       const customColor = optionsCollapse.customColor
       if (!customColor) return
-      let arrColor = []
+      const arrColor = []
       for (let i = 0; i < customColor.length; i++) {
         arrColor.push(customColor[i].color)
       }
@@ -335,32 +362,32 @@ export default {
       this.options = Object.assign({}, this.options)
     },
     // 数据处理
-    setOptionsData () {
+    setOptionsData() {
       const optionsData = this.optionsData // 数据类型 静态 or 动态
       optionsData.dataType == 'staticData' ? this.staticDataFn(optionsData.staticData) : this.dynamicDataFn(optionsData.dynamicData)
     },
-    staticDataFn (val) {
+    staticDataFn(val) {
       const staticData = JSON.parse(val)
       // x轴
       this.options.xAxis.data = staticData.xAxis
       // series
       const series = this.options.series
-      for (let i in series) {
-        for (let j in staticData.series) {
+      for (const i in series) {
+        for (const j in staticData.series) {
           if (series[i].type == staticData.series[j].type) {
             series[i].data = staticData.series[j].data
           }
         }
       }
     },
-    dynamicDataFn (val) {
+    dynamicDataFn(val) {
       if (!val) return
       // x轴
       this.options.xAxis.data = val.xAxis
       // series
       const series = this.options.series
-      for (let i in series) {
-        for (let j in val.series) {
+      for (const i in series) {
+        for (const j in val.series) {
           if (series[i].type == val.series[j].type) {
             series[i].data = val.series[j].data
           }

report-ui/src/views/report/bigscreen/designer/widget/widgetFunnel.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: {
         color: [],
@@ -75,39 +74,43 @@ export default {
       optionsStyle: {}, // 样式
       optionsData: {}, // 数据
       optionsCollapse: {}, // 图标属性
+      optionsSetup: {},
     }
   },
   computed: {
-    styleObj () {
+    styleObj() {
       return {
         position: this.ispreview ? 'absolute' : 'static',
         width: this.optionsStyle.width + 'px',
         height: this.optionsStyle.height + 'px',
         left: this.optionsStyle.left + 'px',
         top: this.optionsStyle.top + 'px',
+        background: this.optionsSetup.background,
       }
     },
   },
   watch: {
     value: {
-      handler (val) {
+      handler(val) {
         this.optionsStyle = val.position
         this.optionsData = val.data
         this.optionsCollapse = val.collapse
+        this.optionsSetup = val.setup
         this.editorOptions()
       },
       deep: true,
     },
   },
-  created () {
+  created() {
     this.optionsStyle = this.value.position
     this.optionsData = this.value.data
     this.optionsCollapse = this.value.collapse
+    this.optionsSetup = this.value.setup
     this.editorOptions()
   },
   methods: {
     // 修改图标options属性
-    editorOptions () {
+    editorOptions() {
       this.setOptionsText()
       this.setOptionsTitle()
       this.setOptionsTooltip()
@@ -116,8 +119,8 @@ export default {
       this.setOptionsData()
     },
     // 文字设置
-    setOptionsText () {
-      const optionsCollapse = this.optionsCollapse
+    setOptionsText() {
+      const optionsCollapse = this.optionsSetup
       const series = this.options.series
 
       for (const key in series) {
@@ -132,12 +135,12 @@ export default {
       }
     },
     // 标题修改
-    setOptionsTitle () {
-      const optionsCollapse = this.optionsCollapse
+    setOptionsTitle() {
+      const optionsCollapse = this.optionsSetup
       const title = {}
       title.show = optionsCollapse.isNoTitle
       title.text = optionsCollapse.titleText
-      title.textAlign = optionsCollapse.textAlign
+      title.left = optionsCollapse.textAlign
       title.textStyle = {
         color: optionsCollapse.textColor,
         fontSize: optionsCollapse.textFontSize,
@@ -153,8 +156,8 @@ export default {
       this.options.title = title
     },
     // 提示语设置 tooltip
-    setOptionsTooltip () {
-      const optionsCollapse = this.optionsCollapse
+    setOptionsTooltip() {
+      const optionsCollapse = this.optionsSetup
       const tooltip = {
         trigger: 'item',
         show: true,
@@ -166,8 +169,8 @@ export default {
       this.options.tooltip = tooltip
     },
     // 图例操作 legend
-    setOptionsLegend () {
-      const optionsCollapse = this.optionsCollapse
+    setOptionsLegend() {
+      const optionsCollapse = this.optionsSetup
       const legend = this.options.legend
       legend.show = optionsCollapse.isShowLegend
       legend.left = optionsCollapse.lateralPosition == 'left' ? 0 : 'auto'
@@ -182,32 +185,32 @@ export default {
       legend.itemWidth = optionsCollapse.lengedWidth
     },
     // 图例颜色修改
-    setOptionsColor () {
-      const optionsCollapse = this.optionsCollapse
+    setOptionsColor() {
+      const optionsCollapse = this.optionsSetup
       const customColor = optionsCollapse.customColor
       if (!customColor) return
-      let arrColor = []
+      const arrColor = []
       for (let i = 0; i < customColor.length; i++) {
         arrColor.push(customColor[i].color)
       }
       this.options.color = arrColor
       this.options = Object.assign({}, this.options)
     },
-    setOptionsData () {
+    setOptionsData() {
       const optionsData = this.optionsData // 数据类型 静态 or 动态
       optionsData.dataType == 'staticData' ? this.staticDataFn(optionsData.staticData) : this.dynamicDataFn(optionsData.dynamicData)
     },
-    staticDataFn (val) {
+    staticDataFn(val) {
       const staticData = JSON.parse(val)
-      for (let key in this.options.series) {
+      for (const key in this.options.series) {
         if (this.options.series[key].type == 'funnel') {
           this.options.series[key].data = staticData
         }
       }
     },
-    dynamicDataFn (val) {
+    dynamicDataFn(val) {
       if (!val) return
-      for (let key in this.options.series) {
+      for (const key in this.options.series) {
         if (this.options.series[key].type == 'funnel') {
           this.options.series[key].data = val
         }

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

@@ -61,6 +61,7 @@ export default {
         height: this.optionsStyle.height + 'px',
         left: this.optionsStyle.left + 'px',
         top: this.optionsStyle.top + 'px',
+        background: this.optionsSetup.background,
       }
     },
   },
@@ -106,7 +107,7 @@ export default {
     staticDataFn(val) {
       const unit = JSON.parse(val).unit
       const series = this.options.series
-      for (let key in series) {
+      for (const key in series) {
         series[key].detail.formatter = `{value}${unit}`
         series[key].data[0] = {
           value: JSON.parse(val).value,
@@ -117,7 +118,7 @@ export default {
     dynamicDataFn(val) {
       if (!val) return
       const series = this.options.series
-      for (let key in series) {
+      for (const key in series) {
         series[key].detail.formatter = `{value}${val.unit}`
         series[key].data[0] = {
           value: val.value,

report-ui/src/views/report/bigscreen/designer/widget/widgetHollowPiechart.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: {
         color: [],
@@ -53,39 +52,43 @@ export default {
       optionsStyle: {}, // 样式
       optionsData: {}, // 数据
       optionsCollapse: {}, // 图标属性
+      optionsSetup: {},
     }
   },
   computed: {
-    styleObj () {
+    styleObj() {
       return {
         position: this.ispreview ? 'absolute' : 'static',
         width: this.optionsStyle.width + 'px',
         height: this.optionsStyle.height + 'px',
         left: this.optionsStyle.left + 'px',
         top: this.optionsStyle.top + 'px',
+        background: this.optionsSetup.background,
       }
     },
   },
   watch: {
     value: {
-      handler (val) {
+      handler(val) {
         this.optionsStyle = val.position
         this.optionsData = val.data
         this.optionsCollapse = val.collapse
+        this.optionsSetup = val.setup
         this.editorOptions()
       },
       deep: true,
     },
   },
-  created () {
+  created() {
     this.optionsStyle = this.value.position
     this.optionsData = this.value.data
     this.optionsCollapse = this.value.collapse
+    this.optionsSetup = this.value.setup
     this.editorOptions()
   },
   methods: {
     // 修改图标options属性
-    editorOptions () {
+    editorOptions() {
       this.setOptionsTitle()
       this.setOptionsValue()
       this.setOptionsTooltip()
@@ -94,12 +97,12 @@ export default {
       this.setOptionsData()
     },
     // 标题设置
-    setOptionsTitle () {
-      const optionsCollapse = this.optionsCollapse
+    setOptionsTitle() {
+      const optionsCollapse = this.optionsSetup
       const title = {}
       title.show = optionsCollapse.isNoTitle
       title.text = optionsCollapse.titleText
-      title.textAlign = optionsCollapse.textAlign
+      title.left = optionsCollapse.textAlign
       title.textStyle = {
         color: optionsCollapse.textColor,
         fontSize: optionsCollapse.textFontSize,
@@ -115,8 +118,8 @@ export default {
       this.options.title = title
     },
     // 数值设定
-    setOptionsValue () {
-      const optionsCollapse = this.optionsCollapse
+    setOptionsValue() {
+      const optionsCollapse = this.optionsSetup
       const series = this.options.series
       const numberValue = optionsCollapse.numberValue ? '{c}' : ''
       const percentage = optionsCollapse.percentage ? '({d})%' : ''
@@ -143,8 +146,8 @@ export default {
       }
     },
     // 提示语设置 tooltip
-    setOptionsTooltip () {
-      const optionsCollapse = this.optionsCollapse
+    setOptionsTooltip() {
+      const optionsCollapse = this.optionsSetup
       const tooltip = {
         trigger: 'item',
         show: true,
@@ -156,8 +159,8 @@ export default {
       this.options.tooltip = tooltip
     },
     // 图例操作 legend
-    setOptionsLegend () {
-      const optionsCollapse = this.optionsCollapse
+    setOptionsLegend() {
+      const optionsCollapse = this.optionsSetup
       const legend = this.options.legend
       legend.show = optionsCollapse.isShowLegend
       legend.left = optionsCollapse.lateralPosition == 'left' ? 0 : 'auto'
@@ -172,32 +175,32 @@ export default {
       legend.itemWidth = optionsCollapse.lengedWidth
     },
     // 图例颜色修改
-    setOptionsColor () {
-      const optionsCollapse = this.optionsCollapse
+    setOptionsColor() {
+      const optionsCollapse = this.optionsSetup
       const customColor = optionsCollapse.customColor
       if (!customColor) return
-      let arrColor = []
+      const arrColor = []
       for (let i = 0; i < customColor.length; i++) {
         arrColor.push(customColor[i].color)
       }
       this.options.color = arrColor
       this.options = Object.assign({}, this.options)
     },
-    setOptionsData () {
+    setOptionsData() {
       const optionsData = this.optionsData // 数据类型 静态 or 动态
       optionsData.dataType == 'staticData' ? this.staticDataFn(optionsData.staticData) : this.dynamicDataFn(optionsData.dynamicData)
     },
-    staticDataFn (val) {
+    staticDataFn(val) {
       const staticData = JSON.parse(val)
-      for (let key in this.options.series) {
+      for (const key in this.options.series) {
         if (this.options.series[key].type == 'pie') {
           this.options.series[key].data = staticData
         }
       }
     },
-    dynamicDataFn (val) {
+    dynamicDataFn(val) {
       if (!val) return
-      for (let key in this.options.series) {
+      for (const key in this.options.series) {
         if (this.options.series[key].type == 'pie') {
           this.options.series[key].data = val
         }

report-ui/src/views/report/bigscreen/designer/widget/widgetLinechart.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: {
         grid: {},
@@ -62,39 +61,43 @@ export default {
       optionsStyle: {}, // 样式
       optionsData: {}, // 数据
       optionsCollapse: {}, // 图标属性
+      optionsSetup: {},
     }
   },
   computed: {
-    styleObj () {
+    styleObj() {
       return {
         position: this.ispreview ? 'absolute' : 'static',
         width: this.optionsStyle.width + 'px',
         height: this.optionsStyle.height + 'px',
         left: this.optionsStyle.left + 'px',
         top: this.optionsStyle.top + 'px',
+        background: this.optionsSetup.background,
       }
     },
   },
   watch: {
     value: {
-      handler (val) {
+      handler(val) {
         this.optionsStyle = val.position
         this.optionsData = val.data
         this.optionsCollapse = val.collapse
+        this.optionsSetup = val.setup
         this.editorOptions()
       },
       deep: true,
     },
   },
-  created () {
+  created() {
     this.optionsStyle = this.value.position
     this.optionsData = this.value.data
     this.optionsCollapse = this.value.collapse
+    this.optionsSetup = this.value.setup
     this.editorOptions()
   },
   methods: {
     // 修改图标options属性
-    editorOptions () {
+    editorOptions() {
       this.setOptionsTitle()
       this.setOptionsX()
       this.setOptionsY()
@@ -106,12 +109,12 @@ export default {
       this.setOptionsColor()
     },
     // 标题修改
-    setOptionsTitle () {
-      const optionsCollapse = this.optionsCollapse
+    setOptionsTitle() {
+      const optionsCollapse = this.optionsSetup
       const title = {}
       title.text = optionsCollapse.titleText
       title.show = optionsCollapse.isNoTitle
-      title.textAlign = optionsCollapse.textAlign
+      title.left = optionsCollapse.textAlign
       title.textStyle = {
         color: optionsCollapse.textColor,
         fontSize: optionsCollapse.textFontSize,
@@ -127,8 +130,8 @@ export default {
       this.options.title = title
     },
     // X轴设置
-    setOptionsX () {
-      const optionsCollapse = this.optionsCollapse
+    setOptionsX() {
+      const optionsCollapse = this.optionsSetup
       const xAxis = {
         type: 'category',
         show: optionsCollapse.hideX, // 坐标轴是否显示
@@ -141,19 +144,25 @@ export default {
         inverse: optionsCollapse.reversalX, // 轴反转
         axisLabel: {
           show: true,
-          interval: optionsCollapse.textInterval,// 文字角度
-          rotate: optionsCollapse.textAngle,// 文字角度
+          interval: optionsCollapse.textInterval, // 文字角度
+          rotate: optionsCollapse.textAngle, // 文字角度
           textStyle: {
             color: optionsCollapse.Xcolor, // x轴 坐标文字颜色
             fontSize: optionsCollapse.fontSizeX,
           },
         },
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: '#fff',
+          },
+        },
       }
       this.options.xAxis = xAxis
     },
     // Y轴设置
-    setOptionsY () {
-      const optionsCollapse = this.optionsCollapse
+    setOptionsY() {
+      const optionsCollapse = this.optionsSetup
       const yAxis = {
         type: 'value',
         show: optionsCollapse.isShowY, // 坐标轴是否显示
@@ -170,13 +179,22 @@ export default {
             fontSize: optionsCollapse.fontSizeY,
           },
         },
+        splitLine: {
+          show: false,
+        },
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: '#fff',
+          },
+        },
       }
 
       this.options.yAxis = yAxis
     },
     // 折线设置
-    setOptionsTop () {
-      const optionsCollapse = this.optionsCollapse
+    setOptionsTop() {
+      const optionsCollapse = this.optionsSetup
       const series = this.options.series
       for (const key in series) {
         if (series[key].type == 'line') {
@@ -209,8 +227,8 @@ export default {
       this.options.series = series
     },
     // tooltip 设置
-    setOptionsTooltip () {
-      const optionsCollapse = this.optionsCollapse
+    setOptionsTooltip() {
+      const optionsCollapse = this.optionsSetup
       const tooltip = {
         trigger: 'item',
         show: true,
@@ -221,21 +239,21 @@ export default {
       }
       this.options.tooltip = tooltip
     },
-    //边距设置
-    setOptionsMargin () {
-      const optionsCollapse = this.optionsCollapse
+    // 边距设置
+    setOptionsMargin() {
+      const optionsCollapse = this.optionsSetup
       const grid = {
         left: optionsCollapse.marginLeft,
         right: optionsCollapse.marginRight,
         bottom: optionsCollapse.marginBottom,
         top: optionsCollapse.marginTop,
-        containLabel: true
+        containLabel: true,
       }
       this.options.grid = grid
     },
     // 图例操作 legend
-    setOptionsLegend () {
-      const optionsCollapse = this.optionsCollapse
+    setOptionsLegend() {
+      const optionsCollapse = this.optionsSetup
       const legend = this.options.legend
       legend.show = optionsCollapse.isShowLegend
       legend.left = optionsCollapse.lateralPosition == 'left' ? 0 : 'auto'
@@ -251,11 +269,11 @@ export default {
       console.log(legend)
     },
     // 图例颜色修改
-    setOptionsColor () {
-      const optionsCollapse = this.optionsCollapse
+    setOptionsColor() {
+      const optionsCollapse = this.optionsSetup
       const customColor = optionsCollapse.customColor
       if (!customColor) return
-      let arrColor = []
+      const arrColor = []
       for (let i = 0; i < customColor.length; i++) {
         arrColor.push(customColor[i].color)
       }
@@ -263,29 +281,29 @@ export default {
       this.options = Object.assign({}, this.options)
     },
     // 处理数据
-    setOptionsData () {
+    setOptionsData() {
       const optionsData = this.optionsData // 数据类型 静态 or 动态
       optionsData.dataType == 'staticData' ? this.staticDataFn(optionsData.staticData) : this.dynamicDataFn(optionsData.dynamicData)
     },
-    staticDataFn (val) {
+    staticDataFn(val) {
       const staticData = JSON.parse(val)
       // x轴
       this.options.xAxis.data = staticData.categories
       // series
       const series = this.options.series
-      for (let i in series) {
+      for (const i in series) {
         if (series[i].type == 'line') {
           series[i].data = staticData.series[0].data
         }
       }
     },
-    dynamicDataFn (val) {
+    dynamicDataFn(val) {
       if (!val) return
       // x轴
       this.options.xAxis.data = val.xAxis
       // series
       const series = this.options.series
-      for (let i in series) {
+      for (const i in series) {
         if (series[i].type == 'line') {
           series[i].data = val.series[i].data
         }

report-ui/src/views/report/bigscreen/designer/widget/widgetPiechart.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: {
         title: {
@@ -48,39 +47,43 @@ export default {
       optionsStyle: {}, // 样式
       optionsData: {}, // 数据
       optionsCollapse: {}, // 图标属性
+      optionsSetup: {},
     }
   },
   computed: {
-    styleObj () {
+    styleObj() {
       return {
         position: this.ispreview ? 'absolute' : 'static',
         width: this.optionsStyle.width + 'px',
         height: this.optionsStyle.height + 'px',
         left: this.optionsStyle.left + 'px',
         top: this.optionsStyle.top + 'px',
+        background: this.optionsSetup.background,
       }
     },
   },
   watch: {
     value: {
-      handler (val) {
+      handler(val) {
         this.optionsStyle = val.position
         this.optionsData = val.data
         this.optionsCollapse = val.collapse
+        this.optionsSetup = val.setup
         this.editorOptions()
       },
       deep: true,
     },
   },
-  created () {
+  created() {
     this.optionsStyle = this.value.position
     this.optionsData = this.value.data
     this.optionsCollapse = this.value.collapse
+    this.optionsSetup = this.value.setup
     this.editorOptions()
   },
   methods: {
     // 修改图标options属性
-    editorOptions () {
+    editorOptions() {
       this.setOptionsTitle()
       this.setOptionsValue()
       this.setOptionsTooltip()
@@ -89,12 +92,12 @@ export default {
       this.setOptionsData()
     },
     // 标题设置
-    setOptionsTitle () {
-      const optionsCollapse = this.optionsCollapse
+    setOptionsTitle() {
+      const optionsCollapse = this.optionsSetup
       const title = {}
       title.show = optionsCollapse.isNoTitle
       title.text = optionsCollapse.titleText
-      title.textAlign = optionsCollapse.textAlign
+      title.left = optionsCollapse.textAlign
       title.textStyle = {
         color: optionsCollapse.textColor,
         fontSize: optionsCollapse.textFontSize,
@@ -110,8 +113,8 @@ export default {
       this.options.title = title
     },
     // 数值设定
-    setOptionsValue () {
-      const optionsCollapse = this.optionsCollapse
+    setOptionsValue() {
+      const optionsCollapse = this.optionsSetup
       const series = this.options.series
       const numberValue = optionsCollapse.numberValue ? '{c}' : ''
       const percentage = optionsCollapse.percentage ? '({d})%' : ''
@@ -138,8 +141,8 @@ export default {
       }
     },
     // 提示语设置 tooltip
-    setOptionsTooltip () {
-      const optionsCollapse = this.optionsCollapse
+    setOptionsTooltip() {
+      const optionsCollapse = this.optionsSetup
       const tooltip = {
         trigger: 'item',
         show: true,
@@ -151,8 +154,8 @@ export default {
       this.options.tooltip = tooltip
     },
     // 图例操作 legend
-    setOptionsLegend () {
-      const optionsCollapse = this.optionsCollapse
+    setOptionsLegend() {
+      const optionsCollapse = this.optionsSetup
       const legend = this.options.legend
       legend.show = optionsCollapse.isShowLegend
       legend.left = optionsCollapse.lateralPosition == 'left' ? 0 : 'auto'
@@ -167,32 +170,32 @@ export default {
       legend.itemWidth = optionsCollapse.lengedWidth
     },
     // 图例颜色修改
-    setOptionsColor () {
-      const optionsCollapse = this.optionsCollapse
+    setOptionsColor() {
+      const optionsCollapse = this.optionsSetup
       const customColor = optionsCollapse.customColor
       if (!customColor) return
-      let arrColor = []
+      const arrColor = []
       for (let i = 0; i < customColor.length; i++) {
         arrColor.push(customColor[i].color)
       }
       this.options.color = arrColor
       this.options = Object.assign({}, this.options)
     },
-    setOptionsData () {
+    setOptionsData() {
       const optionsData = this.optionsData // 数据类型 静态 or 动态
       optionsData.dataType == 'staticData' ? this.staticDataFn(optionsData.staticData) : this.dynamicDataFn(optionsData.dynamicData)
     },
-    staticDataFn (val) {
+    staticDataFn(val) {
       const staticData = JSON.parse(val)
-      for (let key in this.options.series) {
+      for (const key in this.options.series) {
         if (this.options.series[key].type == 'pie') {
           this.options.series[key].data = staticData
         }
       }
     },
-    dynamicDataFn (val) {
+    dynamicDataFn(val) {
       if (!val) return
-      for (let key in this.options.series) {
+      for (const key in this.options.series) {
         if (this.options.series[key].type == 'pie') {
           this.options.series[key].data = val
         }

report-ui/src/views/report/bigscreen/index.vue

@@ -72,11 +72,11 @@ export default {
   mounted () { },
   methods: {
     openDesign (reportId) {
-      var routeUrl = this.$router.resolve({ path: '/report/bigscreen/designer', query: { reportId: reportId } })
+      var routeUrl = this.$router.resolve({ path: '/bigscreen/designer', query: { reportId: reportId } })
       window.open(routeUrl.href, '_blank')
     },
     viewDesign (reportId) {
-      var routeUrl = this.$router.resolve({ path: '/report/bigscreen/viewer', query: { reportId: reportId } })
+      var routeUrl = this.$router.resolve({ path: '/bigscreen/viewer', query: { reportId: reportId } })
       window.open(routeUrl.href, '_blank')
     },
   },
@@ -102,11 +102,11 @@ export default {
   }
 
   .bg::before {
-    content: '';
+    content: "";
     position: absolute;
     width: 100%;
     height: 100%;
-    background-image: url('../../../assets/images/charts.jpg');
+    background-image: url("../../../assets/images/charts.jpg");
     background-size: 100% 100%;
     background-repeat: no-repeat;
     background-position: left top;

report-ui/src/views/report/bigscreen/viewer/index.vue

@@ -7,7 +7,10 @@
 <template>
   <div class="layout">
     <div :style="bigScreenStyle">
-      <widget v-for="(widget, index) in widgets" :key="index" v-model="widget.value" :type="widget.type" />
+      <widget v-for="(widget, index) in widgets"
+              :key="index"
+              v-model="widget.value"
+              :type="widget.type" />
     </div>
   </div>
 </template>
@@ -20,7 +23,7 @@ export default {
   components: {
     widget,
   },
-  data() {
+  data () {
     return {
       list: [
         {
@@ -94,11 +97,11 @@ export default {
       widgets: [],
     }
   },
-  mounted() {
+  mounted () {
     this.getData()
   },
   methods: {
-    async getData() {
+    async getData () {
       const reportCode = this.$route.query.reportCode
       const { code, data } = await detailDashboard(reportCode)
       if (code != 200) return

report-ui/src/views/report/report/index.vue

@@ -340,7 +340,7 @@ export default {
         window.open(routeUrl.href, '_blank')
       } else {
         // eslint-disable-next-line no-redeclare
-        var routeUrl = this.$router.resolve({ path: '/report/bigscreen/viewer', query: { reportCode: val.reportCode } })
+        var routeUrl = this.$router.resolve({ path: '/bigscreen/viewer', query: { reportCode: val.reportCode } })
         window.open(routeUrl.href, '_blank')
       }
     },
@@ -351,7 +351,7 @@ export default {
         window.open(routeUrl.href, '_blank')
       } else {
         // eslint-disable-next-line no-redeclare
-        var routeUrl = this.$router.resolve({ path: '/report/bigscreen/designer', query: { reportCode: val.reportCode, reportId: val.id, accessKey: val.accessKey } })
+        var routeUrl = this.$router.resolve({ path: '/bigscreen/designer', query: { reportCode: val.reportCode, reportId: val.id, accessKey: val.accessKey } })
         window.open(routeUrl.href, '_blank')
       }
     },