update

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

@@ -6,21 +6,23 @@
  !-->
 <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">
-                <i class="iconfont"
-                   :class="widget.icon"></i>
+                <i class="iconfont" :class="widget.icon"></i>
               </span>
               <span class="tools-item-text">{{ widget.label }}</span>
             </div>
@@ -28,12 +30,13 @@
         </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">
-              <i class="iconfont"
-                 :class="item.icon"></i>
+              <i class="iconfont" :class="item.icon"></i>
             </span>
             <span class="tools-item-text">{{ item.label }}</span>
           </div>
@@ -41,113 +44,155 @@
       </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 iconzhankai" />
     </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">
-            <i class="iconfont iconsave"
-               @click="saveData"></i>
+          <el-tooltip
+            class="item"
+            effect="dark"
+            content="保存"
+            placement="bottom"
+          >
+            <i class="iconfont iconsave" @click="saveData"></i>
           </el-tooltip>
         </span>
         <span class="btn">
-          <el-tooltip class="item"
-                      effect="dark"
-                      content="预览"
-                      placement="bottom">
-            <i class="iconfont iconyulan"
-               @click="viewScreen"></i>
+          <el-tooltip
+            class="item"
+            effect="dark"
+            content="预览"
+            placement="bottom"
+          >
+            <i class="iconfont iconyulan" @click="viewScreen"></i>
           </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>
 
 <script>
-import { insertDashboard, detailDashboard } from '@/api/bigscreen'
-import { widgetTools, getToolByCode } from './tools'
-import widget from './widget/widget.vue'
-import dynamicForm from './form/dynamicForm.vue'
-import draggable from 'vuedraggable'
-import VueRulerTool from 'vue-ruler-tool' // 大屏设计页面的标尺插件
-import contentMenu from './form/contentMenu'
+import { insertDashboard, detailDashboard } from "@/api/bigscreen";
+import { widgetTools, getToolByCode } from "./tools";
+import widget from "./widget/widget.vue";
+import dynamicForm from "./form/dynamicForm.vue";
+import draggable from "vuedraggable";
+import VueRulerTool from "vue-ruler-tool"; // 大屏设计页面的标尺插件
+import contentMenu from "./form/contentMenu";
 export default {
-  name: 'Login',
+  name: "Login",
   components: {
     draggable,
     VueRulerTool,
     widget,
     dynamicForm,
-    contentMenu,
+    contentMenu
   },
-  data () {
+  data() {
     return {
       widgetTools: widgetTools, // 左侧工具栏的组件图标，将js变量加入到当前作用域
       widthLeftForTools: 200, // 左侧工具栏宽度
@@ -161,22 +206,22 @@ export default {
       // 工作台大屏画布，保存到表gaea_report_dashboard中
       dashboard: {
         id: null,
-        title: '', // 大屏页面标题
+        title: "", // 大屏页面标题
         width: 1920, // 大屏设计宽度
         height: 1080, // 大屏设计高度
-        backgroundColor: '', // 大屏背景色
-        backgroundImage: '', // 大屏背景图片
+        backgroundColor: "", // 大屏背景色
+        backgroundImage: "", // 大屏背景图片
         refreshSeconds: null, // 大屏刷新时间间隔
         presetLine: [], // 辅助线
-        presetLineVisible: true, // 辅助线是否显示
+        presetLineVisible: true // 辅助线是否显示
       },
       // 大屏的标记
-      screenCode: '',
+      screenCode: "",
       // 大屏画布中的组件
       widgets: [
         {
           // type和value最终存到数据库中去，保存到gaea_report_dashboard_widget中
-          type: 'widget-text',
+          type: "widget-text",
           value: {
             setup: {},
             data: {},
@@ -185,12 +230,12 @@ export default {
               height: 100,
               left: 0,
               top: 0,
-              zIndex: 0,
-            },
+              zIndex: 0
+            }
           },
           // options属性是从工具栏中拿到的tools中拿到
-          options: [],
-        },
+          options: []
+        }
       ], // 工作区中拖放的组件
 
       // 当前激活组件
@@ -199,83 +244,85 @@ export default {
       widgetOptions: {
         setup: [], // 配置
         data: [], // 数据
-        position: [], // 坐标
+        position: [] // 坐标
       },
       flagWidgetClickStopPropagation: false, // 点击组件时阻止事件冒泡传递到画布click事件上
       styleObj: {
         left: 0,
-        top: 0,
+        top: 0
       },
       visibleContentMenu: false,
       rightClickIndex: -1,
-      activeName: 'first',
-    }
+      activeName: "first"
+    };
   },
   computed: {
     // 左侧折叠切换时，动态计算中间区的宽度
-    middleWidth () {
-      var widthLeftAndRight = 0
+    middleWidth() {
+      var widthLeftAndRight = 0;
       if (this.toolIsShow) {
-        widthLeftAndRight += this.widthLeftForTools // 左侧工具栏宽度
+        widthLeftAndRight += this.widthLeftForTools; // 左侧工具栏宽度
       }
-      widthLeftAndRight += this.widthLeftForToolsHideButton // 左侧工具栏折叠按钮宽度
-      widthLeftAndRight += this.widthLeftForOptions // 右侧配置栏宽度
+      widthLeftAndRight += this.widthLeftForToolsHideButton; // 左侧工具栏折叠按钮宽度
+      widthLeftAndRight += this.widthLeftForOptions; // 右侧配置栏宽度
 
-      var middleWidth = this.bodyWidth - widthLeftAndRight
-      return middleWidth
+      var middleWidth = this.bodyWidth - widthLeftAndRight;
+      return middleWidth;
     },
-    middleHeight () {
-      return this.bodyHeight
+    middleHeight() {
+      return this.bodyHeight;
     },
     // 设计台按大屏的缩放比例
-    bigscreenScaleInWorkbench () {
-      var widthScale = this.middleWidth / this.bigscreenWidth
-      var heightScale = this.middleHeight / this.bigscreenHeight
-      return Math.min(widthScale, heightScale)
+    bigscreenScaleInWorkbench() {
+      var widthScale = this.middleWidth / this.bigscreenWidth;
+      var heightScale = this.middleHeight / this.bigscreenHeight;
+      return Math.min(widthScale, heightScale);
     },
-    workbenchTransform () {
-      return `scale(${this.bigscreenScaleInWorkbench}, ${this.bigscreenScaleInWorkbench})`
+    workbenchTransform() {
+      return `scale(${this.bigscreenScaleInWorkbench}, ${
+        this.bigscreenScaleInWorkbench
+      })`;
     },
     // 大屏在设计模式的大小
-    bigscreenWidthInWorkbench () {
-      return this.getPXUnderScale(this.bigscreenWidth)
+    bigscreenWidthInWorkbench() {
+      return this.getPXUnderScale(this.bigscreenWidth);
     },
-    bigscreenHeightInWorkbench () {
-      return this.getPXUnderScale(this.bigscreenHeight)
+    bigscreenHeightInWorkbench() {
+      return this.getPXUnderScale(this.bigscreenHeight);
     },
-    layerWidget () {
-      const layerWidgetArr = []
+    layerWidget() {
+      const layerWidgetArr = [];
       for (let i = 0; i < this.widgets.length; i++) {
-        layerWidgetArr.push(getToolByCode(this.widgets[i].type))
+        layerWidgetArr.push(getToolByCode(this.widgets[i].type));
       }
-      return layerWidgetArr
-    },
+      return layerWidgetArr;
+    }
   },
-  mounted () {
+  mounted() {
     // 一进入时，加载屏幕配置属性
-    this.setOptionsOnClickScreen()
+    this.setOptionsOnClickScreen();
 
     // 如果是新的设计工作台
-    this.initEchartData()
-    this.widgets = []
+    this.initEchartData();
+    this.widgets = [];
   },
   methods: {
-    async initEchartData () {
-      const reportCode = this.$route.query.reportCode
-      const { code, data } = await detailDashboard(reportCode)
-      if (code != 200) return
-      const processData = this.handleInitEchartsData(data)
-      const screenData = this.handleBigScreen(data.dashboard)
-      this.widgets = processData
-      this.dashboard = screenData
+    async initEchartData() {
+      const reportCode = this.$route.query.reportCode;
+      const { code, data } = await detailDashboard(reportCode);
+      if (code != 200) return;
+      const processData = this.handleInitEchartsData(data);
+      const screenData = this.handleBigScreen(data.dashboard);
+      this.widgets = processData;
+      this.dashboard = screenData;
     },
-    handleBigScreen (data) {
-      const optionScreen = this.deepClone(getToolByCode('screen').options)
-      const setup = optionScreen.setup
+    handleBigScreen(data) {
+      const optionScreen = this.deepClone(getToolByCode("screen").options);
+      const setup = optionScreen.setup;
       for (const key in data) {
         for (let i = 0; i < setup.length; i++) {
           if (key == setup[i].name) {
-            setup[i].value = data[key]
+            setup[i].value = data[key];
           }
         }
       }
@@ -284,35 +331,46 @@ export default {
         backgroundImage: data.backgroundImage,
         height: data.height,
         title: data.title,
-        width: data.width,
-      }
+        width: data.width
+      };
     },
-    handleInitEchartsData (data) {
-      console.log(data)
-      const widgets = data.dashboard.widgets
-      const widgetsData = []
+    handleInitEchartsData(data) {
+      const widgets = data.dashboard.widgets;
+      const widgetsData = [];
       for (let i = 0; i < widgets.length; i++) {
-        var obj = {}
-        obj.type = widgets[i].type
+        var obj = {};
+        obj.type = widgets[i].type;
         obj.value = {
           setup: widgets[i].value.setup,
           data: widgets[i].value.data,
           collapse: widgets[i].value.collapse,
-          position: widgets[i].value.position,
-        }
-        const tool = this.deepClone(getToolByCode(widgets[i].type))
-        const option = tool.options
-        const options = this.handleOptionsData(widgets[i].value, option)
-        obj.options = options
-        widgetsData.push(obj)
-      }
-      return widgetsData
+          position: widgets[i].value.position
+        };
+        const tool = this.deepClone(getToolByCode(widgets[i].type));
+        const option = tool.options;
+        const options = this.handleOptionsData(widgets[i].value, option);
+        obj.options = options;
+        widgetsData.push(obj);
+      }
+      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) {
-            option.setup[i].value = data.setup[key]
+          let item = option.setup[i];
+          if (Object.prototype.toString.call(item) == "[object Object]") {
+            if (key == option.setup[i].name) {
+              option.setup[i].value = data.setup[key];
+            }
+          } 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 => {
+                if (key == el.name) {
+                  el.value = data.setup[key];
+                }
+              });
+            }
           }
         }
       }
@@ -320,7 +378,7 @@ export default {
       for (const key in data.position) {
         for (let i = 0; i < option.position.length; i++) {
           if (key == option.position[i].name) {
-            option.position[i].value = data.position[key]
+            option.position[i].value = data.position[key];
           }
         }
       }
@@ -328,28 +386,17 @@ export default {
       for (const key in data.data) {
         for (let i = 0; i < option.data.length; i++) {
           if (key == option.data[i].name) {
-            option.data[i].value = data.data[key]
+            option.data[i].value = data.data[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
+      return option;
     },
     // 保存数据
-    async saveData () {
+    async saveData() {
       if (!this.widgets || this.widgets.length == 0) {
-        this.$message.error('请添加组件')
-        return
+        this.$message.error("请添加组件");
+        return;
       }
       const screenData = {
         reportCode: this.$route.query.reportCode,
@@ -358,44 +405,46 @@ export default {
           width: this.dashboard.width,
           height: this.dashboard.height,
           backgroundColor: this.dashboard.backgroundColor,
-          backgroundImage: this.dashboard.backgroundImage,
+          backgroundImage: this.dashboard.backgroundImage
         },
-        widgets: this.widgets,
+        widgets: this.widgets
+      };
+      const { code, data } = await insertDashboard(screenData);
+      if (code == "200") {
+        this.$message.success("保存成功！");
       }
-      const { code, data } = await insertDashboard(screenData)
-      if (code != '200') return
     },
     // 预览
-    viewScreen () {
+    viewScreen() {
       var routeUrl = this.$router.resolve({
-        path: '/report/bigscreen/viewer',
-        query: { reportCode: this.$route.query.reportCode },
-      })
-      window.open(routeUrl.href, '_blank')
+        path: "/bigscreen/viewer",
+        query: { reportCode: this.$route.query.reportCode }
+      });
+      window.open(routeUrl.href, "_blank");
     },
     // 在缩放模式下的大小
-    getPXUnderScale (px) {
-      return this.bigscreenScaleInWorkbench * px
+    getPXUnderScale(px) {
+      return this.bigscreenScaleInWorkbench * px;
     },
 
     // 拖动一个组件放到工作区中去，在拖动结束时，放到工作区对应的坐标点上去
-    widgetOnDragged (evt, widgetCode) {
-      var widgetType = widgetCode
+    widgetOnDragged(evt, widgetCode) {
+      var widgetType = widgetCode;
 
       // 获取结束坐标和列名
-      var eventX = evt.originalEvent.clientX // 结束在屏幕的x坐标
-      var eventY = evt.originalEvent.clientY // 结束在屏幕的y坐标
+      var eventX = evt.originalEvent.clientX; // 结束在屏幕的x坐标
+      var eventY = evt.originalEvent.clientY; // 结束在屏幕的y坐标
 
-      var workbenchPosition = this.getDomTopLeftById('workbench')
-      var widgetTopInWorkbench = eventY - workbenchPosition.top
-      var widgetLeftInWorkbench = eventX - workbenchPosition.left
+      var workbenchPosition = this.getDomTopLeftById("workbench");
+      var widgetTopInWorkbench = eventY - workbenchPosition.top;
+      var widgetLeftInWorkbench = eventX - workbenchPosition.left;
 
       // 计算在缩放模式下的x y
-      var x = widgetLeftInWorkbench / this.bigscreenScaleInWorkbench
-      var y = widgetTopInWorkbench / this.bigscreenScaleInWorkbench
+      var x = widgetLeftInWorkbench / this.bigscreenScaleInWorkbench;
+      var y = widgetTopInWorkbench / this.bigscreenScaleInWorkbench;
 
       // 复制一个组件
-      var tool = getToolByCode(widgetType)
+      var tool = getToolByCode(widgetType);
       var widgetJson = {
         type: widgetType,
         value: {
@@ -406,89 +455,91 @@ export default {
             height: 0,
             left: 0,
             top: 0,
-            zIndex: 0,
-          },
+            zIndex: 0
+          }
         },
-        options: tool.options,
-      }
+        options: tool.options
+      };
       // 处理默认值
-      const widgetJsonValue = this.handleDefaultValue(widgetJson)
+      const widgetJsonValue = this.handleDefaultValue(widgetJson);
       // 将选中的复制组件，放到工作区中去
-      this.widgets.push(this.deepClone(widgetJsonValue))
-
+      this.widgets.push(this.deepClone(widgetJsonValue));
       // 激活新组件的配置属性
-      this.setOptionsOnClickWidget(this.widgets.length - 1)
+      this.setOptionsOnClickWidget(this.widgets.length - 1);
     },
 
     // 对组件默认值处理
-    handleDefaultValue (widgetJson) {
+    handleDefaultValue(widgetJson) {
       for (const key in widgetJson) {
-        if (key == 'options') {
+        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 (Object.prototype.toString.call(item) == '[object Object]') {
-              widgetJson.value.setup[item.name] = item.value
-            } else if (Object.prototype.toString.call(item) == '[object Array]') {
+            const item = widgetJson.options.setup[i];
+            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
-                })
+                const list = item[j].list;
+                list.forEach(el => {
+                  widgetJson.value.setup[el.name] = el.value;
+                });
               }
             }
           }
           // position
           for (let i = 0; i < widgetJson.options.position.length; i++) {
-            const item = widgetJson.options.position[i]
+            const item = widgetJson.options.position[i];
             if (item.value) {
-              widgetJson.value.position[item.name] = item.value
+              widgetJson.value.position[item.name] = item.value;
             }
           }
           // data 处理
           if (widgetJson.options.data && widgetJson.options.data.length > 0) {
             for (let i = 0; i < widgetJson.options.data.length; i++) {
-              const item = widgetJson.options.data[i]
+              const item = widgetJson.options.data[i];
               if (item.value) {
-                widgetJson.value.data[item.name] = item.value
+                widgetJson.value.data[item.name] = item.value;
               }
             }
           }
         }
       }
-      return widgetJson
+      return widgetJson;
     },
 
     // 如果是点击大屏设计器中的底层，加载大屏底层属性
-    setOptionsOnClickScreen () {
-      this.screenCode = 'screen'
+    setOptionsOnClickScreen() {
+      this.screenCode = "screen";
       // 选中不同的组件 右侧都显示第一栏
-      this.activeName = 'first'
-      this.widgetOptions = getToolByCode('screen')['options']
+      this.activeName = "first";
+      this.widgetOptions = getToolByCode("screen")["options"];
     },
 
     // 如果是点击某个组件，获取该组件的配置项
-    setOptionsOnClickWidget (index) {
+    setOptionsOnClickWidget(index) {
       // 选中不同的组件 右侧都显示第一栏
-      this.activeName = 'first'
-      this.screenCode = ''
-      if (typeof index == 'number') {
+      this.activeName = "first";
+      this.screenCode = "";
+      if (typeof index == "number") {
         if (index < 0 || index >= this.widgets.length) {
-          return
+          return;
         }
-        this.widgetIndex = index
-        console.log(this.deepClone(this.widgets[index]['options']))
-        this.widgetOptions = this.deepClone(this.widgets[index]['options'])
-        return
+        this.widgetIndex = index;
+        this.widgetOptions = this.deepClone(this.widgets[index]["options"]);
+        return;
       } else {
         // 执行传递过来的值
-        this.widgets[index.index].value.position = index.obj
+        this.widgets[index.index].value.position = index.obj;
       }
     },
 
     // 将当前选中的组件，右侧属性值更新
-    widgetValueChanged (key, val) {
+    widgetValueChanged(key, val) {
+      console.log(key);
+      console.log(val);
       /* 更新指定 this.widgets 中第 this.widgetIndex 个组件的value
       widgets: [{
         type: 'widget-text',
@@ -498,58 +549,62 @@ export default {
           position: {}
         }
       }]*/
-      if (this.screenCode == 'screen') {
-        this.dashboard = this.deepClone(val)
+      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], val)
+          this.widgets[i].value[key] = this.deepClone(val);
+          this.setDefaultValue(this.widgets[i].options[key], val);
         }
       }
+      console.log(this.widgets);
     },
-    rightClick (event, index) {
-      this.rightClickIndex = index
-      const left = event.clientX
-      const top = event.clientY
+    rightClick(event, index) {
+      this.rightClickIndex = index;
+      const left = event.clientX;
+      const top = event.clientY;
       if (left || top) {
         this.styleObj = {
-          left: left + 'px',
-          top: top + 'px',
-          display: 'block',
-        }
+          left: left + "px",
+          top: top + "px",
+          display: "block"
+        };
       }
-      this.visibleContentMenu = true
-      return false
+      this.visibleContentMenu = true;
+      return false;
     },
-    deletelayer () {
-      this.widgets.splice(this.rightClickIndex, 1)
+    deletelayer() {
+      this.widgets.splice(this.rightClickIndex, 1);
+      // console.log(this.widgets);
     },
-    setDefaultValue (options, val) {
+    setDefaultValue(options, val) {
       for (let i = 0; i < options.length; i++) {
-        if (Object.prototype.toString.call(options[i]) == '[object Object]') {
+        if (Object.prototype.toString.call(options[i]) == "[object Object]") {
           for (const k in val) {
             if (options[i].name == k) {
-              options[i].value = val[k]
+              options[i].value = val[k];
             }
           }
-        } else if (Object.prototype.toString.call(options[i]) == '[object Array]') {
+        } 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
+            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]
+                  list[z].value = val[k];
                 }
               }
             }
           }
         }
       }
-    },
-  },
-}
+    }
+  }
+};
 </script>
 
 <style scoped lang="scss">

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

@@ -32,8 +32,8 @@
       :aspect-ratio="false"
       @clicked="onActivated(index)"
       @activated="onActivated(index)"
-      @dragstop="(ev) => onDragstop(ev, index)"
-      @resizing="(ev) => onResizing(ev, index)"
+      @dragstop="ev => onDragstop(ev, index)"
+      @resizing="ev => onResizing(ev, index)"
     >
       <component :is="type" :value="value" />
     </vue-drag-resize>
@@ -44,26 +44,26 @@
 // 大屏设计页面的拖拽插件 https://gitee.com/charact/vue-draggable-resizable-gorkys#dragstop
 // import VueDraggableResizable from 'vue-draggable-resizable-gorkys'
 // import 'vue-draggable-resizable-gorkys/dist/VueDraggableResizable.css'
-import VueDragResize from 'vue-drag-resize'
+import VueDragResize from "vue-drag-resize";
 
-import widgetHref from './widgetHref.vue'
-import widgetText from './widgetText.vue'
-import WidgetMarquee from './widgetMarquee.vue'
-import widgetTime from './widgetTime.vue'
-import widgetImage from './widgetImage.vue'
-import widgetSlider from './widgetSlider.vue'
-import widgetVideo from './widgetVideo.vue'
-import WidgetIframe from './widgetIframe.vue'
-import widgetBarchart from './widgetBarchart.vue'
-import widgetGradientColorBarchart from './bar/widgetGradientColorBarchart.vue'
-import widgetLinechart from './widgetLinechart.vue'
-import widgetBarlinechart from './widgetBarlinechart'
-import WidgetPiechart from './widgetPiechart.vue'
-import WidgetHollowPiechart from './widgetHollowPiechart.vue'
-import WidgetFunnel from './widgetFunnel.vue'
-import WidgetGauge from './widgetGauge.vue'
+import widgetHref from "./widgetHref.vue";
+import widgetText from "./widgetText.vue";
+import WidgetMarquee from "./widgetMarquee.vue";
+import widgetTime from "./widgetTime.vue";
+import widgetImage from "./widgetImage.vue";
+import widgetSlider from "./widgetSlider.vue";
+import widgetVideo from "./widgetVideo.vue";
+import WidgetIframe from "./widgetIframe.vue";
+import widgetBarchart from "./widgetBarchart.vue";
+import widgetGradientColorBarchart from "./bar/widgetGradientColorBarchart.vue";
+import widgetLinechart from "./widgetLinechart.vue";
+import widgetBarlinechart from "./widgetBarlinechart";
+import WidgetPiechart from "./widgetPiechart.vue";
+import WidgetHollowPiechart from "./widgetHollowPiechart.vue";
+import WidgetFunnel from "./widgetFunnel.vue";
+import WidgetGauge from "./widgetGauge.vue";
 export default {
-  name: 'Widget',
+  name: "Widget",
   components: {
     // VueDraggableResizable,
     VueDragResize,
@@ -82,11 +82,11 @@ export default {
     WidgetPiechart,
     WidgetHollowPiechart,
     WidgetFunnel,
-    WidgetGauge,
+    WidgetGauge
   },
   model: {
-    prop: 'value',
-    event: 'input',
+    prop: "value",
+    event: "input"
   },
   props: {
     /*
@@ -98,48 +98,48 @@ export default {
     bigscreen: Object,
     value: {
       type: [Object],
-      default: () => {},
-    },
+      default: () => {}
+    }
   },
   data() {
     return {
       data: {
         setup: {},
         data: {},
-        position: {},
-      },
-    }
+        position: {}
+      }
+    };
   },
   computed: {
     widgetsWidth() {
-      return this.value.position.width
+      return this.value.position.width;
     },
     widgetsHeight() {
-      return this.value.position.height
+      return this.value.position.height;
     },
     widgetsLeft() {
-      return this.value.position.left
+      return this.value.position.left;
     },
     widgetsTop() {
-      return this.value.position.top
+      return this.value.position.top;
     },
     widgetsZIndex() {
-      return this.value.position.zIndex
-    },
+      return this.value.position.zIndex || 1;
+    }
   },
   mounted() {},
   methods: {
     onActivated(index) {
-      this.$emit('onActivated', index)
+      this.$emit("onActivated", index);
     },
     onDragstop(obj, index) {
-      this.$emit('onActivated', { index, obj })
+      this.$emit("onActivated", { index, obj });
     },
     onResizing(obj, index) {
-      this.$emit('onActivated', { index, obj })
-    },
-  },
-}
+      this.$emit("onActivated", { index, obj });
+    }
+  }
+};
 </script>
 
 <style scoped lang="scss">

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

@@ -6,11 +6,11 @@
 
 <script>
 export default {
-  name: 'WidgetBarchart',
+  name: "WidgetBarchart",
   components: {},
   props: {
     value: Object,
-    ispreview: Boolean,
+    ispreview: Boolean
   },
   data() {
     return {
@@ -18,121 +18,120 @@ export default {
         grid: {},
         legend: {
           textStyle: {
-            color: '#fff',
-          },
+            color: "#fff"
+          }
         },
         xAxis: {
-          type: 'category',
+          type: "category",
           data: [],
           axisLabel: {
             show: true,
             textStyle: {
-              color: '#fff',
-            },
-          },
+              color: "#fff"
+            }
+          }
         },
         yAxis: {
-          type: 'value',
+          type: "value",
           data: [],
           axisLabel: {
             show: true,
             textStyle: {
-              color: '#fff',
-            },
-          },
+              color: "#fff"
+            }
+          }
         },
         series: [
           {
             data: [],
-            type: 'bar',
-            barGap: '0%',
+            type: "bar",
+            barGap: "0%",
             itemStyle: {
-              borderRadius: null,
-            },
-          },
-        ],
+              borderRadius: null
+            }
+          }
+        ]
       },
       optionsStyle: {}, // 样式
       optionsData: {}, // 数据
-      optionsSetup: {},
-    }
+      optionsSetup: {}
+    };
   },
   computed: {
     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,
-      }
-    },
+        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) {
-        console.log(val)
-        this.optionsStyle = val.position
-        this.optionsData = val.data
-        this.optionsCollapse = val.setup
-        this.optionsSetup = val.setup
-        this.editorOptions()
+        this.optionsStyle = val.position;
+        this.optionsData = val.data;
+        this.optionsCollapse = val.setup;
+        this.optionsSetup = val.setup;
+        this.editorOptions();
       },
-      deep: true,
-    },
+      deep: true
+    }
   },
   mounted() {
-    this.optionsStyle = this.value.position
-    this.optionsData = this.value.data
-    this.optionsCollapse = this.value.setup
-    this.optionsSetup = this.value.setup
-    this.editorOptions()
+    this.optionsStyle = this.value.position;
+    this.optionsData = this.value.data;
+    this.optionsCollapse = this.value.setup;
+    this.optionsSetup = this.value.setup;
+    this.editorOptions();
   },
   methods: {
     // 修改图标options属性
     editorOptions() {
-      this.setOptionsTitle()
-      this.setOptionsX()
-      this.setOptionsY()
-      this.setOptionsTop()
-      this.setOptionsTooltip()
-      this.setOptionsMargin()
-      this.setOptionsLegend()
-      this.setOptionsColor()
-      this.setOptionsData()
+      this.setOptionsTitle();
+      this.setOptionsX();
+      this.setOptionsY();
+      this.setOptionsTop();
+      this.setOptionsTooltip();
+      this.setOptionsMargin();
+      this.setOptionsLegend();
+      this.setOptionsColor();
+      this.setOptionsData();
     },
     // 标题修改
     setOptionsTitle() {
-      const optionsCollapse = this.optionsSetup
-      const title = {}
-      title.text = optionsCollapse.titleText
-      title.show = optionsCollapse.isNoTitle
-      title.left = optionsCollapse.textAlign
+      const optionsCollapse = this.optionsSetup;
+      const title = {};
+      title.text = optionsCollapse.titleText;
+      title.show = optionsCollapse.isNoTitle;
+      title.left = optionsCollapse.textAlign;
       title.textStyle = {
         color: optionsCollapse.textColor,
         fontSize: optionsCollapse.textFontSize,
-        fontWeight: optionsCollapse.textFontWeight,
-      }
-      title.subtext = optionsCollapse.subText
+        fontWeight: optionsCollapse.textFontWeight
+      };
+      title.subtext = optionsCollapse.subText;
       title.subtextStyle = {
         color: optionsCollapse.subTextColor,
         fontWeight: optionsCollapse.subTextFontWeight,
-        fontSize: optionsCollapse.subTextFontSize,
-      }
+        fontSize: optionsCollapse.subTextFontSize
+      };
 
-      this.options.title = title
+      this.options.title = title;
     },
     // X轴设置
     setOptionsX() {
-      const optionsCollapse = this.optionsSetup
+      const optionsCollapse = this.optionsSetup;
       const xAxis = {
-        type: 'category',
+        type: "category",
         show: optionsCollapse.hideX, // 坐标轴是否显示
         name: optionsCollapse.xName, // 坐标轴名称
         nameTextStyle: {
           color: optionsCollapse.xNameColor,
-          fontSize: optionsCollapse.xNameFontSize,
+          fontSize: optionsCollapse.xNameFontSize
         },
         nameRotate: optionsCollapse.textAngle, // 文字角度
         inverse: optionsCollapse.reversalX, // 轴反转
@@ -142,194 +141,194 @@ export default {
           rotate: optionsCollapse.textAngle, // 文字角度
           textStyle: {
             color: optionsCollapse.Xcolor, // x轴 坐标文字颜色
-            fontSize: optionsCollapse.fontSizeX,
-          },
+            fontSize: optionsCollapse.fontSizeX
+          }
         },
         axisLine: {
           show: true,
           lineStyle: {
-            color: '#fff',
-          },
-        },
-      }
-      this.options.xAxis = xAxis
+            color: "#fff"
+          }
+        }
+      };
+      this.options.xAxis = xAxis;
     },
     // Y轴设置
     setOptionsY() {
-      const optionsCollapse = this.optionsSetup
+      const optionsCollapse = this.optionsSetup;
       const yAxis = {
-        type: 'value',
+        type: "value",
         show: optionsCollapse.isShowY, // 坐标轴是否显示
         name: optionsCollapse.textNameY, // 坐标轴名称
         nameTextStyle: {
           color: optionsCollapse.NameColorY,
-          fontSize: optionsCollapse.NameFontSizeY,
+          fontSize: optionsCollapse.NameFontSizeY
         },
         inverse: optionsCollapse.reversalY, // 轴反转
         axisLabel: {
           show: true,
           textStyle: {
             color: optionsCollapse.colorY, // x轴 坐标文字颜色
-            fontSize: optionsCollapse.fontSizeY,
-          },
+            fontSize: optionsCollapse.fontSizeY
+          }
         },
         splitLine: {
-          show: false,
+          show: false
         },
         axisLine: {
           show: true,
           lineStyle: {
-            color: '#fff',
-          },
-        },
-      }
+            color: "#fff"
+          }
+        }
+      };
 
-      this.options.yAxis = yAxis
+      this.options.yAxis = yAxis;
     },
     // 数值设定 or 柱体设置
     setOptionsTop() {
-      const optionsCollapse = this.optionsSetup
-      const series = this.options.series
+      const optionsCollapse = this.optionsSetup;
+      const series = this.options.series;
 
       for (const key in series) {
-        if (series[key].type == 'bar') {
+        if (series[key].type == "bar") {
           series[key].label = {
             show: optionsCollapse.isShow,
-            position: 'top',
+            position: "top",
             distance: 10,
             fontSize: optionsCollapse.fontSize,
             color: optionsCollapse.subTextColor,
-            fontWeight: optionsCollapse.fontWeight,
-          }
-          series[key].barWidth = optionsCollapse.maxWidth
-          series[key].barMinHeight = optionsCollapse.minHeight
+            fontWeight: optionsCollapse.fontWeight
+          };
+          series[key].barWidth = optionsCollapse.maxWidth;
+          series[key].barMinHeight = optionsCollapse.minHeight;
         }
       }
-      this.options.series = series
+      this.options.series = series;
     },
     // tooltip 设置
     setOptionsTooltip() {
-      const optionsCollapse = this.optionsSetup
+      const optionsCollapse = this.optionsSetup;
       const tooltip = {
-        trigger: 'item',
+        trigger: "item",
         show: true,
         textStyle: {
           color: optionsCollapse.lineColor,
-          fontSize: optionsCollapse.fontSize,
-        },
-      }
-      this.options.tooltip = tooltip
+          fontSize: optionsCollapse.fontSize
+        }
+      };
+      this.options.tooltip = tooltip;
     },
     // 边距设置
     setOptionsMargin() {
-      const optionsCollapse = this.optionsSetup
+      const optionsCollapse = this.optionsSetup;
       const grid = {
         left: optionsCollapse.marginLeft,
         right: optionsCollapse.marginRight,
         bottom: optionsCollapse.marginBottom,
         top: optionsCollapse.marginTop,
-        containLabel: true,
-      }
-      this.options.grid = grid
+        containLabel: true
+      };
+      this.options.grid = grid;
     },
     // 图例操作 legend
     setOptionsLegend() {
-      const optionsCollapse = this.optionsSetup
-      const legend = this.options.legend
-      legend.show = optionsCollapse.isShowLegend
-      legend.left = optionsCollapse.lateralPosition == 'left' ? 0 : 'auto'
-      legend.right = optionsCollapse.lateralPosition == 'right' ? 0 : 'auto'
-      legend.top = optionsCollapse.longitudinalPosition == 'top' ? 0 : 'auto'
-      legend.bottom = optionsCollapse.longitudinalPosition == 'bottom' ? 0 : 'auto'
-      legend.orient = optionsCollapse.layoutFront
+      const optionsCollapse = this.optionsSetup;
+      const legend = this.options.legend;
+      legend.show = optionsCollapse.isShowLegend;
+      legend.left = optionsCollapse.lateralPosition == "left" ? 0 : "auto";
+      legend.right = optionsCollapse.lateralPosition == "right" ? 0 : "auto";
+      legend.top = optionsCollapse.longitudinalPosition == "top" ? 0 : "auto";
+      legend.bottom =
+        optionsCollapse.longitudinalPosition == "bottom" ? 0 : "auto";
+      legend.orient = optionsCollapse.layoutFront;
       legend.textStyle = {
         color: optionsCollapse.lengedColor,
-        fontSize: optionsCollapse.fontSize,
-      }
-      legend.itemWidth = optionsCollapse.lengedWidth
+        fontSize: optionsCollapse.fontSize
+      };
+      legend.itemWidth = optionsCollapse.lengedWidth;
     },
     // 图例颜色修改
     setOptionsColor() {
-      const optionsCollapse = this.optionsSetup
-      const customColor = optionsCollapse.customColor
-      if (!customColor) return
-      const arrColor = []
+      const optionsCollapse = this.optionsSetup;
+      const customColor = optionsCollapse.customColor;
+      if (!customColor) return;
+      const arrColor = [];
       for (let i = 0; i < customColor.length; i++) {
-        arrColor.push(customColor[i].color)
+        arrColor.push(customColor[i].color);
       }
       const itemStyle = {
         normal: {
-          color: (params) => {
-            return arrColor[params.dataIndex]
+          color: params => {
+            return arrColor[params.dataIndex];
           },
-          barBorderRadius: optionsCollapse.radius,
-        },
-      }
+          barBorderRadius: optionsCollapse.radius
+        }
+      };
       for (const key in this.options.series) {
-        if (this.options.series[key].type == 'bar') {
-          this.options.series[key].itemStyle = itemStyle
+        if (this.options.series[key].type == "bar") {
+          this.options.series[key].itemStyle = itemStyle;
         }
       }
-      this.options = Object.assign({}, this.options)
+      this.options = Object.assign({}, this.options);
     },
     // 数据解析
     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)
+      const optionsSetup = this.optionsSetup;
+      const optionsData = this.optionsData; // 数据类型 静态 or 动态
+      optionsData.dataType == "staticData"
+        ? this.staticDataFn(optionsData.staticData, optionsSetup)
+        : this.dynamicDataFn(optionsData.dynamicData, optionsSetup);
     },
     // 静态数据
     staticDataFn(val, optionsSetup) {
-      const staticData = JSON.parse(val)
+      const staticData = JSON.parse(val);
       // x轴
       if (optionsSetup.verticalShow) {
-        this.options.xAxis.data = []
-        this.options.yAxis.data = staticData.categories
-        this.options.xAxis.type = 'value'
-        this.options.yAxis.type = 'category'
+        this.options.xAxis.data = [];
+        this.options.yAxis.data = staticData.categories;
+        this.options.xAxis.type = "value";
+        this.options.yAxis.type = "category";
       } else {
-        this.options.xAxis.data = staticData.categories
-        this.options.yAxis.data = []
-        this.options.xAxis.type = 'category'
-        this.options.yAxis.type = 'value'
+        this.options.xAxis.data = staticData.categories;
+        this.options.yAxis.data = [];
+        this.options.xAxis.type = "category";
+        this.options.yAxis.type = "value";
       }
       // series
-      const series = this.options.series
+      const series = this.options.series;
       for (const i in series) {
-        if (series[i].type == 'bar') {
-          series[i].data = staticData.series[0].data
+        if (series[i].type == "bar") {
+          series[i].data = staticData.series[0].data;
         }
       }
     },
     // 动态数据
     dynamicDataFn(val, optionsSetup) {
-      console.log(val)
-      if (!val) return
+      if (!val) return;
       // x轴
       if (optionsSetup.verticalShow) {
-        this.options.xAxis.data = []
-        this.options.yAxis.data = val.xAxis
-        this.options.xAxis.type = 'value'
-        this.options.yAxis.type = 'category'
+        this.options.xAxis.data = [];
+        this.options.yAxis.data = val.xAxis;
+        this.options.xAxis.type = "value";
+        this.options.yAxis.type = "category";
       } else {
-        this.options.xAxis.data = val.xAxis
-        this.options.yAxis.data = []
-        this.options.xAxis.type = 'category'
-        this.options.yAxis.type = 'value'
+        this.options.xAxis.data = val.xAxis;
+        this.options.yAxis.data = [];
+        this.options.xAxis.type = "category";
+        this.options.yAxis.type = "value";
       }
 
       // series
-      const series = this.options.series
+      const series = this.options.series;
       for (const i in series) {
-        if (series[i].type == 'bar') {
-          series[i].data = val.series[i].data
+        if (series[i].type == "bar") {
+          series[i].data = val.series[i].data;
         }
       }
-    },
-  },
-}
+    }
+  }
+};
 </script>
 
 <style scoped lang="scss">

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

@@ -10,52 +10,53 @@
 
 <script>
 export default {
-  name: 'WidgetText',
+  name: "WidgetText",
   components: {},
   props: {
     value: Object,
-    ispreview: Boolean,
+    ispreview: Boolean
   },
   data() {
     return {
-      options: {},
-    }
+      options: {}
+    };
   },
   computed: {
     transStyle() {
-      return this.objToOne(this.options)
+      return this.objToOne(this.options);
     },
     styleColor() {
+      console.log(this.transStyle);
       return {
-        position: this.ispreview ? 'absolute' : 'static',
+        position: this.ispreview ? "absolute" : "static",
         color: this.transStyle.color,
-        'font-weight': this.transStyle.fontWeight,
+        "font-weight": this.transStyle.fontWeight,
         text: this.transStyle.text,
-        'font-size': this.transStyle.fontSize + 'px',
-        'letter-spacing': this.transStyle.letterSpacing + 'em',
+        "font-size": this.transStyle.fontSize + "px",
+        "letter-spacing": this.transStyle.letterSpacing + "em",
         background: this.transStyle.background,
-        'text-align': this.transStyle.textAlign,
-        width: this.transStyle.width + 'px',
-        height: this.transStyle.height + 'px',
-        left: this.transStyle.left + 'px',
-        top: this.transStyle.top + 'px',
-        right: this.transStyle.right + 'px',
-      }
-    },
+        "text-align": this.transStyle.textAlign,
+        width: this.transStyle.width + "px",
+        height: this.transStyle.height + "px",
+        left: this.transStyle.left + "px",
+        top: this.transStyle.top + "px",
+        right: this.transStyle.right + "px"
+      };
+    }
   },
   watch: {
     value: {
       handler(val) {
-        this.options = val
+        this.options = val;
       },
-      deep: true,
-    },
+      deep: true
+    }
   },
   mounted() {
-    this.options = this.value
+    this.options = this.value;
   },
-  methods: {},
-}
+  methods: {}
+};
 </script>
 
 <style scoped lang="scss">