update

report-ui/src/mixins/access.js

@@ -88,11 +88,6 @@ export default {
         return result
       }
     },
-    //深拷贝
-    deepClone(obj){
-		  var temp = JSON.stringify(obj);
-		  return JSON.parse(temp);
-    },
     
 		//从所有字典中，取某个字典的列表
 		getDict(dictname){

report-ui/src/mixins/common.js

@@ -4,6 +4,14 @@ export default {
     }
   },
   computed: {
+    // 网页高度
+    bodyWidth() {
+      return document.body.clientWidth
+    },
+    // 网页宽度
+    bodyHeight() {
+      return document.body.clientHeight
+    },
   },
   created () {
   },
@@ -86,22 +94,41 @@ export default {
         }
       }
     },
-    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]
-        }
+    // 获取对象类型
+    getObjectType(obj) {
+      var toString = Object.prototype.toString
+      var map = {
+        '[object Boolean]': 'boolean',
+        '[object Number]': 'number',
+        '[object String]': 'string',
+        '[object Function]': 'function',
+        '[object Array]': 'array',
+        '[object Date]': 'date',
+        '[object RegExp]': 'regExp',
+        '[object Undefined]': 'undefined',
+        '[object Null]': 'null',
+        '[object Object]': 'object',
       }
-      return tmpData
+      if (obj instanceof Element) {
+        return 'element'
+      }
+      return map[toString.call(obj)]
+    },
+    isNumber(obj) {
+      return this.getObjectType(obj) == 'number'
+    },
+    isString(obj) {
+      return this.getObjectType(obj) == 'string'
     },
-    isNotNull (val) {
+
+    hasOwn(obj, key) {
+      return Object.prototype.hasOwnProperty.call(obj, key)
+    },
+
+    isNotNull(val) {
       return !this.isNull(val)
     },
-    isNull (val) {
+    isNull(val) {
       // 特殊判断
       if (val && parseInt(val) === 0) return false
       const list = ['$parent']
@@ -125,5 +152,108 @@ export default {
       }
       return false
     },
+
+    // 对象深拷贝
+    deepClone(data) {
+      var type = this.getObjectType(data)
+      var obj
+      if (type === 'array') {
+        obj = []
+      } else if (type === 'object') {
+        obj = {}
+      } else {
+        // 不再具有下一层次
+        return data
+      }
+      if (type === 'array') {
+        for (var i = 0, len = data.length; i < len; i++) {
+          data[i] = (() => {
+            if (data[i] === 0) {
+              return data[i]
+            }
+            return data[i]
+          })()
+          if (data[i]) {
+            delete data[i].$parent
+          }
+          obj.push(this.deepClone(data[i]))
+        }
+      } else if (type === 'object') {
+        for (var key in data) {
+          if (data) {
+            delete data.$parent
+          }
+          obj[key] = this.deepClone(data[key])
+        }
+      }
+      return obj
+    },
+
+    // 合并json
+    mergeObject() {
+      var target = arguments[0] || {}
+      var deep = false
+      var arr = Array.prototype.slice.call(arguments)
+      var i = 1
+      var options, src, key, copy
+      var isArray = false
+      if (typeof target === 'boolean') {
+        deep = target
+        i++
+        target = arguments[1]
+      }
+      for (; i < arr.length; i++) {
+        // 循环传入的对象数组
+        if ((options = arr[i]) != null) {
+          // 如果当前值不是null，如果是null不做处理
+          for (key in options) {
+            // for in循环对象中key
+            copy = options[key]
+            src = target[key]
+            // 如果对象中value值任然是一个引用类型
+            if (deep && (toString.call(copy) === '[object Object]' || (isArray = toString.call(copy) == '[object Array]'))) {
+              if (isArray) {
+                // 如果引用类型是数组
+                // 如果目标对象target存在当前key，且数据类型是数组，那就还原此值，如果不是就定义成一个空数组;
+                src = toString.call(src) === '[object Array]' ? src : []
+              } else {
+                // 如果目标对象target存在当前key，且数据类型是对象，那就还原此值，如果不是就定义成一个空对象;
+                src = toString.call(src) === '[object Object]' ? src : {}
+              }
+              // 引用类型就再次调用extend，递归，直到此时copy是一个基本类型的值。
+              target[key] = this.mergeObject(deep, src, copy)
+            } else if (copy !== undefined && copy !== src) {
+              // 如果这个值是基本值类型，且不是undefined
+              target[key] = copy
+            }
+          }
+        }
+      }
+      return target
+    },
+
+    // 获取dom在屏幕中的top和left
+    getDomTopLeftById(id) {
+      var dom = document.getElementById(id)
+      var top = 0
+      var left = 0
+      if (dom != null) {
+        top = dom.getBoundingClientRect().top
+        left = dom.getBoundingClientRect().left
+      }
+      return { top: top, left: left }
+    },
+    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
+    },
   }
 }

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

@@ -1,11 +1,6 @@
 <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>
@@ -14,11 +9,11 @@ export default {
     styleObj: Object,
     visible: Boolean,
   },
-  data () {
+  data() {
     return {}
   },
   watch: {
-    visible (value) {
+    visible(value) {
       if (value) {
         document.body.addEventListener('click', this.closeMenu)
       } else {
@@ -27,10 +22,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,121 +1,134 @@
 <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>
 </template>
 <script>
 export default {
-  name: 'CustomColorComponents',
+  name: "CustomColorComponents",
   model: {
-    prop: 'formData',
-    event: 'input',
+    prop: "formData",
+    event: "input"
   },
   props: {
-    formData: Array,
+    formData: Array
   },
-  data () {
+  data() {
     return {
-      predefineColors: ['#ff4500', '#ff8c00', '#ffd700', '#90ee90', '#00ced1', '#1e90ff', '#c71585'],
-      colorValue: '',
+      predefineColors: [
+        "#ff4500",
+        "#ff8c00",
+        "#ffd700",
+        "#90ee90",
+        "#00ced1",
+        "#1e90ff",
+        "#c71585"
+      ],
+      colorValue: "",
       dialogVisible: false,
       flag: true, // true 新增， false 编辑
-      indexEditor: -1, // 编辑第几个数据
-    }
+      indexEditor: -1 // 编辑第几个数据
+    };
   },
-  mounted () { },
+  mounted() {},
   methods: {
     // 弹出框关闭
-    handleClose () {
-      this.dialogVisible = false
-      this.colorValue = ''
+    handleClose() {
+      this.dialogVisible = false;
+      this.colorValue = "";
     },
     // 新增
-    handleAddClick () {
-      this.colorValue = ''
-      this.flag = true
-      this.dialogVisible = true
+    handleAddClick() {
+      this.colorValue = "";
+      this.flag = true;
+      this.dialogVisible = true;
     },
     // 确定
-    handleSaveClick () {
+    handleSaveClick() {
       if (this.flag) {
         // 新增
         const obj = {
-          color: this.colorValue,
-        }
-        this.formData.push(obj)
-        this.dialogVisible = false
+          color: this.colorValue
+        };
+        this.formData.push(obj);
+        this.dialogVisible = false;
       } else {
         // 编辑
-        this.formData[this.indexEditor].color = this.colorValue
-        this.dialogVisible = false
+        this.formData[this.indexEditor].color = this.colorValue;
+        this.dialogVisible = false;
       }
-      this.$emit('input', this.formData)
+      this.$emit("input", this.formData);
     },
     // 编辑
-    handleEditorClick (index, row) {
-      this.flag = false
-      this.colorValue = row.color
-      this.dialogVisible = true
-      this.indexEditor = index
+    handleEditorClick(index, row) {
+      this.flag = false;
+      this.colorValue = row.color;
+      this.dialogVisible = true;
+      this.indexEditor = index;
     },
     // 删除
-    handleDeleteClick (index) {
-      this.formData.splice(index, 1)
-    },
-  },
-}
+    handleDeleteClick(index) {
+      this.formData.splice(index, 1);
+    }
+  }
+};
 </script>
 <style lang="scss" scoped>
 .color-box {

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

@@ -6,20 +6,15 @@
  !-->
 <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" /> -->1
+                <svg-icon :icon-class="widget.icon" />
               </span>
               <span class="tools-item-text">{{ widget.label }}</span>
             </div>
@@ -27,11 +22,9 @@
         </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" /> -->2
+              <svg-icon :icon-class="item.icon" />
             </span>
             <span class="tools-item-text">{{ item.label }}</span>
           </div>
@@ -39,90 +32,47 @@
       </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" /> -->3
+          <el-tooltip class="item" effect="dark" content="保存" placement="bottom">
+            <svg-icon icon-class="report" @click="saveData" />
           </el-tooltip>
         </span>
         <span class="btn">
-          <el-tooltip class="item"
-                      effect="dark"
-                      content="预览"
-                      placement="bottom">
-            <!-- <svg-icon icon-class="eye-open" @click="viewScreen" /> -->4
+          <el-tooltip class="item" effect="dark" content="预览" placement="bottom">
+            <svg-icon icon-class="eye-open" @click="viewScreen" />
           </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)" />
+    <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>
 
@@ -143,7 +93,7 @@ export default {
     dynamicForm,
     contentMenu,
   },
-  data () {
+  data() {
     return {
       widgetTools: widgetTools, // 左侧工具栏的组件图标，将js变量加入到当前作用域
       widthLeftForTools: 200, // 左侧工具栏宽度
@@ -209,7 +159,7 @@ export default {
   },
   computed: {
     // 左侧折叠切换时，动态计算中间区的宽度
-    middleWidth () {
+    middleWidth() {
       var widthLeftAndRight = 0
       if (this.toolIsShow) {
         widthLeftAndRight += this.widthLeftForTools // 左侧工具栏宽度
@@ -220,26 +170,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))
@@ -247,7 +197,7 @@ export default {
       return layerWidgetArr
     },
   },
-  mounted () {
+  mounted() {
     // 一进入时，加载屏幕配置属性
     this.setOptionsOnClickScreen()
 
@@ -256,7 +206,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
@@ -265,7 +215,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) {
@@ -283,7 +233,7 @@ export default {
         width: data.width,
       }
     },
-    handleInitEchartsData (data) {
+    handleInitEchartsData(data) {
       console.log(data)
       const widgets = data.dashboard.widgets
       const widgetsData = []
@@ -304,7 +254,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) {
@@ -342,7 +292,7 @@ export default {
       return option
     },
     // 保存数据
-    async saveData () {
+    async saveData() {
       if (!this.widgets || this.widgets.length == 0) {
         this.$message.error('请添加组件')
         return
@@ -362,7 +312,7 @@ export default {
       if (code != '200') return
     },
     // 预览
-    viewScreen () {
+    viewScreen() {
       var routeUrl = this.$router.resolve({
         path: '/report/bigscreen/viewer',
         query: { reportCode: this.$route.query.reportCode },
@@ -370,12 +320,12 @@ export default {
       window.open(routeUrl.href, '_blank')
     },
     // 在缩放模式下的大小
-    getPXUnderScale (px) {
+    getPXUnderScale(px) {
       return this.bigscreenScaleInWorkbench * px
     },
 
     // 拖动一个组件放到工作区中去，在拖动结束时，放到工作区对应的坐标点上去
-    widgetOnDragged (evt, widgetCode) {
+    widgetOnDragged(evt, widgetCode) {
       var widgetType = widgetCode
 
       // 获取结束坐标和列名
@@ -417,7 +367,7 @@ export default {
     },
 
     // 对组件默认值处理
-    handleDefaultValue (widgetJson) {
+    handleDefaultValue(widgetJson) {
       for (const key in widgetJson) {
         if (key == 'options') {
           // collapse、data、position、setup
@@ -457,7 +407,7 @@ export default {
     },
 
     // 如果是点击大屏设计器中的底层，加载大屏底层属性
-    setOptionsOnClickScreen () {
+    setOptionsOnClickScreen() {
       this.screenCode = 'screen'
       // 选中不同的组件 右侧都显示第一栏
       this.activeName = 'first'
@@ -465,7 +415,7 @@ export default {
     },
 
     // 如果是点击某个组件，获取该组件的配置项
-    setOptionsOnClickWidget (index) {
+    setOptionsOnClickWidget(index) {
       // 选中不同的组件 右侧都显示第一栏
       this.activeName = 'first'
       this.screenCode = ''
@@ -484,7 +434,7 @@ export default {
     },
 
     // 将当前选中的组件，右侧属性值更新
-    widgetValueChanged (key, val) {
+    widgetValueChanged(key, val) {
       /* 更新指定 this.widgets 中第 this.widgetIndex 个组件的value
       widgets: [{
         type: 'widget-text',
@@ -505,7 +455,7 @@ export default {
         }
       }
     },
-    rightClick (event, index) {
+    rightClick(event, index) {
       this.rightClickIndex = index
       const left = event.clientX
       const top = event.clientY
@@ -519,10 +469,10 @@ export default {
       this.visibleContentMenu = true
       return false
     },
-    deletelayer () {
+    deletelayer() {
       this.widgets.splice(this.rightClickIndex, 1)
     },
-    setDefaultValue (options, val) {
+    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) {

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

@@ -7,9 +7,7 @@
 <template>
   <div class="main-layout">
     <el-row :gutter="20">
-      <el-col v-for="item in list"
-              :key="item.id"
-              :span="6">
+      <el-col v-for="item in list" :key="item.id" :span="6">
         <div class="bg">
           <div class="rgba" />
           <div class="content">
@@ -17,14 +15,18 @@
             <footer>
               {{ item.time }}
               <div class="operation">
-                <el-button icon="el-icon-view"
-                           class="view"
-                           type="text"
-                           @click="viewDesign(item.id)" />
-                <el-button icon="el-icon-edit"
-                           class="edit"
-                           type="text"
-                           @click="openDesign(item.id)" />
+                <el-button
+                  icon="el-icon-view"
+                  class="view"
+                  type="text"
+                  @click="viewDesign(item.id)"
+                />
+                <el-button
+                  icon="el-icon-edit"
+                  class="edit"
+                  type="text"
+                  @click="openDesign(item.id)"
+                />
               </div>
             </footer>
           </div>
@@ -36,51 +38,57 @@
 
 <script>
 export default {
-  name: 'Login',
+  name: "Login",
   components: {},
-  data () {
+  data() {
     return {
       list: [
         {
           id: 1,
-          name: '货物在途大屏',
-          time: '2021-3-19 17:54:00',
+          name: "货物在途大屏",
+          time: "2021-3-19 17:54:00"
         },
         {
           id: 2,
-          name: '仓库库容大屏',
-          time: '2021-3-19 17:54:00',
+          name: "仓库库容大屏",
+          time: "2021-3-19 17:54:00"
         },
         {
           id: 3,
-          name: '运输时效大屏',
-          time: '2021-3-19 17:54:00',
+          name: "运输时效大屏",
+          time: "2021-3-19 17:54:00"
         },
         {
           id: 4,
-          name: '运输时效大屏1',
-          time: '2021-3-19 17:54:00',
+          name: "运输时效大屏1",
+          time: "2021-3-19 17:54:00"
         },
         {
           id: 5,
-          name: '运输时效大屏2',
-          time: '2021-3-19 17:54:00',
-        },
-      ],
-    }
+          name: "运输时效大屏2",
+          time: "2021-3-19 17:54:00"
+        }
+      ]
+    };
   },
-  mounted () { },
+  mounted() {},
   methods: {
-    openDesign (reportId) {
-      var routeUrl = this.$router.resolve({ path: '/bigscreen/designer', query: { reportId: reportId } })
-      window.open(routeUrl.href, '_blank')
+    openDesign(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: '/bigscreen/viewer', query: { reportId: reportId } })
-      window.open(routeUrl.href, '_blank')
-    },
-  },
-}
+    viewDesign(reportId) {
+      var routeUrl = this.$router.resolve({
+        path: "/bigscreen/viewer",
+        query: { reportId: reportId }
+      });
+      window.open(routeUrl.href, "_blank");
+    }
+  }
+};
 </script>
 
 <style scoped lang="scss">

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

@@ -7,10 +7,7 @@
 <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>
@@ -23,7 +20,7 @@ export default {
   components: {
     widget,
   },
-  data () {
+  data() {
     return {
       list: [
         {
@@ -97,11 +94,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