From 02379a249d8fd03b742d9de34aff7623cd2a83e8 Mon Sep 17 00:00:00 2001
From: qianbao <qianbaoqianbao>
Date: Sun, 11 Dec 2022 11:29:43 +0800
Subject: [PATCH] 1、大屏主数据源存储， 2、加载设计时候主数据源数据赋值 3、预览主数据源根据设置加载

---
 src/views/bigscreenDesigner/designer/index.vue                                             | 107 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-------------------
 src/views/bigscreenDesigner/designer/tools/configure/barlineCharts/widget-barlinechart.js  |   5 -----
 src/views/bigscreenDesigner/designer/tools/configure/barlineCharts/widget-more-bar-line.js |   5 -----
 src/views/bigscreenDesigner/designer/tools/configure/bubbleChars/widget-bubble-chart.js    | 139 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/views/bigscreenDesigner/designer/tools/configure/decorateCharts/widget-decorate-pie.js |   5 -----
 src/views/bigscreenDesigner/designer/tools/configure/funnelCharts/widget-funnel.js         |   5 -----
 src/views/bigscreenDesigner/designer/tools/configure/heatmap/widget-heatmap.js             |   5 -----
 src/views/bigscreenDesigner/designer/tools/configure/lineCharts/widget-line-compare.js     |   5 -----
 src/views/bigscreenDesigner/designer/tools/configure/mapCharts/widget-airbubble-map.js     |   5 -----
 src/views/bigscreenDesigner/designer/tools/configure/pieCharts/widget-pie-nightingale.js   |   5 -----
 src/views/bigscreenDesigner/designer/tools/configure/texts/widget-video.js                 |  10 +---------
 src/views/bigscreenDesigner/designer/tools/configure/widget-universal.js                   |  10 +---------
 src/views/bigscreenDesigner/designer/tools/index.js                                        | 139 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-------------------------------------------------------------------------
 src/views/bigscreenDesigner/designer/tools/main.js                                         |   8 --------
 src/views/bigscreenDesigner/designer/widget/bubble/widgetBubblechart.vue                   | 391 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/views/bigscreenDesigner/designer/widget/temp.vue                                       |   6 ------
 src/views/bigscreenDesigner/designer/widget/text/widgetTable.vue                           |   2 +-
 src/views/bigscreenDesigner/viewer/index.vue                                               |  54 +++++++++++++++++++++++++++++++++++++++++++++++++++---
 src/views/reportManage/components/copyDialog.vue                                           |   7 +------
 src/views/reportManage/index.vue                                                           |   5 -----
 src/views/resultset/index.vue                                                              |   5 -----
 src/views/screenDesigner/index备份.vue                                                   | 725 -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
 22 files changed, 739 insertions(+), 909 deletions(-)
 create mode 100644 src/views/bigscreenDesigner/designer/tools/configure/bubbleChars/widget-bubble-chart.js
 create mode 100644 src/views/bigscreenDesigner/designer/widget/bubble/widgetBubblechart.vue
 delete mode 100644 src/views/screenDesigner/index备份.vue

diff --git a/src/views/bigscreenDesigner/designer/index.vue b/src/views/bigscreenDesigner/designer/index.vue
index 9d485ff..f324a6b 100644
--- a/src/views/bigscreenDesigner/designer/index.vue
+++ b/src/views/bigscreenDesigner/designer/index.vue
@@ -296,7 +296,7 @@ import draggable from "vuedraggable";
 import VueRulerTool from "vue-ruler-tool"; // 大屏设计页面的标尺插件
 import contentMenu from "./components/contentMenu";
 import { getToken } from "@/utils/auth";
-import { Revoke } from "@/utils/revoke"; //处理历史记录 2022-02-22
+import { Revoke } from "@/utils/revoke";
 import { mapMutations } from 'vuex';
 
 export default {
@@ -322,7 +322,7 @@ export default {
 
       bigscreenWidth: 1920, // 大屏设计的大小
       bigscreenHeight: 1080,
-      revoke: null, //处理历史记录 2022-02-22
+      revoke: null,
 
       // 工作台大屏画布，保存到表gaea_report_dashboard中
       dashboard: {
@@ -332,14 +332,12 @@ export default {
         height: 1080, // 大屏设计高度
         backgroundColor: "", // 大屏背景色
         backgroundImage: "", // 大屏背景图片
-        // master: null, // 全局数据源
-        // refreshMasterTime: 600000, // 刷新时间(毫秒)
         refreshSeconds: null, // 大屏刷新时间间隔
         presetLine: [], // 辅助线
         presetLineVisible: true, // 辅助线是否显示
-        data: [],
+        data: {},
       },
-      masterData:{"sName1":"测试文本1","sName2":"测试文本2"},
+      masterData:{},//主表数据源
       // 大屏的标记
       screenCode: "",
       dragWidgetCode: "", //从工具栏拖拽的组件code
@@ -497,13 +495,64 @@ export default {
       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;
       this.bigscreenWidth = this.dashboard.width;
       this.bigscreenHeight = this.dashboard.height;
+      //判断数据源是否配置了主数据源，如果配置了主数据，将主数据转换成静态的保存
+      if(this.isNotBlankObj(screenData)){
+        this.setMasterData(screenData);
+        //将动态数据部分赋值
+        //console.log("将动态数据部分赋值",this.widgetOptions);
+        this.setWidgetOptionsData(screenData.data);
+      }
+    },
+    // 数据处理
+    setMasterData(screenData){
+      // 数据类型 静态 or 动态
+      const screenD = screenData.data;
+      const refreshTime =  screenD["refreshTime"]||60000*30;
+      screenD.dataType == "staticData"
+        ? this.staticDataFn(screenD.staticData)
+        : this.dynamicDataFn(screenD.dynamicData, refreshTime);
+    },
+    staticDataFn(val) {
+      //获取静态数据
+      this.masterData=val;
+      this.SET_STATIC_DATA(this.masterData);
+    },
+    dynamicDataFn(val, refreshTime) {
+      if (!val) return;
+      if (this.ispreview) {
+        this.getEchartData(val);
+        this.flagInter = setInterval(() => {
+          this.getEchartData(val);
+        }, refreshTime);
+      } else {
+        this.getEchartData(val);
+      }
+    },
+    getEchartData(val) {
+      const data = this.queryEchartsData(val);
+      data.then(res => {
+        this.renderingFn(res);
+      });
+    },
+    renderingFn(val) {
+      if(this.isNotBlankArray(val)){
+        for (let i = 0; i < val.length; i++) {
+          const one = val[i];
+          const sValue = (this.isBlankObject(one)|| this.isBlank(one['sValue']))?"":one['sValue'];
+          if(this.isNotBlankObj(one) && this.isNotBlank(one['sName'])){
+            const sName = one['sName'];
+            this.masterData[sName]=sValue;
+          }
+        }
+      }
+      this.SET_STATIC_DATA(this.masterData);
     },
+
     handleBigScreen(data) {
       const optionScreen = getToolByCode("screen").options;
       const setup = optionScreen.setup;
@@ -520,9 +569,9 @@ export default {
         backgroundImage: (data && data.backgroundImage) || "",
         height: (data && data.height) || 1080,
         title: (data && data.title) || "",
+        description: (data && data.description) || "",
         width: (data && data.width) || 1920,
-        master: (data && data.master) || null,
-        refreshMasterTime: (data && data.refreshMasterTime) || null,
+        data: (data && data.data) || {},
       };
     },
     handleInitEchartsData(data) {
@@ -588,6 +637,7 @@ export default {
         this.$message.error("请添加组件");
         return;
       }
+      // console.log("保存数据DATA",this.dashboard);
       const screenData = {
         reportCode: this.$route.query.reportCode,
         dashboard: {
@@ -595,8 +645,7 @@ export default {
           width: this.dashboard.width,
           height: this.dashboard.height,
           backgroundColor: this.dashboard.backgroundColor,
-          refreshMasterTime: this.dashboard.refreshMasterTime,
-          master: this.dashboard.master,
+          data: this.dashboard.data,
           backgroundImage: this.dashboard.backgroundImage,
         },
         widgets: this.widgets,
@@ -725,7 +774,7 @@ export default {
       // 处理默认值
       const widgetJsonValue = this.handleDefaultValue(widgetJson);
 
-      //2022年02月22日 修复：可以拖拽放到鼠标的位置
+      //可以拖拽放到鼠标的位置
       widgetJsonValue.value.position.left =
         x - widgetJsonValue.value.position.width / 2;
       widgetJsonValue.value.position.top =
@@ -788,7 +837,16 @@ export default {
       // 选中不同的组件 右侧都显示第一栏
       this.activeName = "first";
       this.widgetOptions = getToolByCode("screen")["options"];
-      this.SET_STATIC_DATA(this.widgetOptions.data.find(item => item.name === 'staticData').value);
+    },
+    getScreenData(data){
+      const screenData = {};
+      if(this.isNotBlankArray(data)){
+        for (let i = 0; i < data.length; i++) {
+          const one =data[i];
+          screenData[one.name]=one.value;
+        }
+      }
+      return screenData;
     },
 
     // 如果是点击某个组件，获取该组件的配置项
@@ -837,6 +895,17 @@ export default {
         this.$refs.widgets[i].$refs.draggable.setActive(false);
       }
     },
+    setWidgetOptionsData(val){
+      let newData = new Array();
+      const cloneVal = this.deepClone(val);
+      this.widgetOptions.data.forEach((el) => {
+        if (Object.hasOwn(cloneVal, el.name)) {
+          el["value"] = cloneVal[el.name];
+        }
+        newData.push(el);
+      });
+      this.widgetOptions.data = newData;
+    },
     // 将当前选中的组件，右侧属性值更新
     widgetValueChanged(key, val) {
       if (this.screenCode == "screen") {
@@ -863,19 +932,19 @@ export default {
           });
           this.widgetOptions.setup = newSetup;
         } else if (key === 'data') {
-          // 全局数据更改
-            val.staticData && this.SET_STATIC_DATA(val.staticData);
-            let newData = new Array();
-            const cloneVal = this.deepClone(val);
-            this.widgetOptions.data.forEach((el) => {
+           // 全局数据更改
+          this.dashboard.data=val;
+          let newData = new Array();
+          const cloneVal = this.deepClone(val);
+          this.widgetOptions.data.forEach((el) => {
             if (Object.hasOwn(cloneVal, el.name)) {
               el["value"] = cloneVal[el.name];
             }
             newData.push(el);
           });
           this.widgetOptions.data = newData;
+          this.setMasterData(this.dashboard);
         }
-        
       } else {
         for (let i = 0; i < this.widgets.length; i++) {
           if (this.widgetIndex == i) {
diff --git a/src/views/bigscreenDesigner/designer/tools/configure/barlineCharts/widget-barlinechart.js b/src/views/bigscreenDesigner/designer/tools/configure/barlineCharts/widget-barlinechart.js
index eb43fa2..02011aa 100644
--- a/src/views/bigscreenDesigner/designer/tools/configure/barlineCharts/widget-barlinechart.js
+++ b/src/views/bigscreenDesigner/designer/tools/configure/barlineCharts/widget-barlinechart.js
@@ -1,10 +1,5 @@
 /*
  * @Descripttion: 柱线图
- * @version:
- * @Author: qianlishi
- * @Date: 2021-08-29 07:26:48
- * @LastEditors: qianlishi qianlishi@anji-plus.com
- * @LastEditTime: 2022-11-07 15:39:29
  */
 export const widgetBarlinechart = {
   code: 'widget-barlinechart',
diff --git a/src/views/bigscreenDesigner/designer/tools/configure/barlineCharts/widget-more-bar-line.js b/src/views/bigscreenDesigner/designer/tools/configure/barlineCharts/widget-more-bar-line.js
index e291ece..550da3f 100644
--- a/src/views/bigscreenDesigner/designer/tools/configure/barlineCharts/widget-more-bar-line.js
+++ b/src/views/bigscreenDesigner/designer/tools/configure/barlineCharts/widget-more-bar-line.js
@@ -1,10 +1,5 @@
 /*
  * @Descripttion: 多柱线图
- * @version:
- * @Author: foming
- * @Date:
- * @LastEditors: qianlishi qianlishi@anji-plus.com
- * @LastEditTime: 2022-11-07 15:39:52
  */
 export const widgetMoreBarLine = {
   code: 'widgetMoreBarLineChart',
diff --git a/src/views/bigscreenDesigner/designer/tools/configure/bubbleChars/widget-bubble-chart.js b/src/views/bigscreenDesigner/designer/tools/configure/bubbleChars/widget-bubble-chart.js
new file mode 100644
index 0000000..2fd3eb5
--- /dev/null
+++ b/src/views/bigscreenDesigner/designer/tools/configure/bubbleChars/widget-bubble-chart.js
@@ -0,0 +1,139 @@
+/*
+ * @Descripttion: DIV图层次
+ */
+export const widgetBubblechart =  {
+  code: 'widget-bubble-chart',
+  type: 'html',
+  tabName: '图层',
+  label: '气泡图',
+  icon: 'icontupian1',
+  options: {
+    // 配置
+    setup: [
+      {
+        type: 'el-input-text',
+        label: '图层名称',
+        name: 'layerName',
+        required: false,
+        placeholder: '',
+        value: '边框',
+      },
+      {
+        type: 'el-select',
+        label: '边框类型',
+        name: 'divType',
+        required: false,
+        placeholder: '',
+        selectOptions: [
+          {code: 'dv-border-Box-1', name: '边框1'},
+          {code: 'dv-border-Box-2', name: '边框2'},
+          {code: 'dv-border-Box-3', name: '边框3'},
+          {code: 'dv-border-Box-4', name: '边框4'},
+          {code: 'dv-border-Box-5', name: '边框5'},
+          {code: 'dv-border-Box-6', name: '边框6'},
+          {code: 'dv-border-Box-7', name: '边框7'},
+          {code: 'dv-border-Box-8', name: '边框8'},
+          {code: 'dv-border-Box-9', name: '边框9'},
+          {code: 'dv-border-Box-10', name: '边框10'},
+          {code: 'dv-border-Box-11', name: '边框11'},
+          {code: 'dv-border-Box-12', name: '边框12'},
+          {code: 'dv-border-Box-13', name: '边框13'},
+        ],
+        value: 'dv-border-Box-1'
+      },
+      {
+        type: 'vue-color',
+        label: '颜色(主)',
+        name: 'colorOne',
+        required: false,
+        placeholder: '',
+        value: '',
+      },
+      {
+        type: 'vue-color',
+        label: '颜色(次)',
+        name: 'colorTwo',
+        required: false,
+        placeholder: '',
+        value: '',
+      },
+      {
+        type: 'vue-color',
+        label: '背景色',
+        name: 'backgroundColor',
+        required: false,
+        placeholder: '',
+        value: 'rgba(255, 0, 0, 0)',
+      },
+      {
+        type: 'el-input-number',
+        label: '单次动画时间长',
+        name: 'dur',
+        required: false,
+        placeholder: '',
+        value: 3,
+      },
+      {
+        type: 'el-switch',
+        label: '反向',
+        name: 'reverse',
+        require: false,
+        placeholder: '',
+        value: false,
+      },
+      {
+        type: 'el-input-text',
+        label: '标题',
+        name: 'title',
+        require: false,
+        placeholder: '',
+        value: '',
+      },
+      {
+        type: 'el-input-number',
+        label: '标题宽度',
+        name: 'titleWidth',
+        require: false,
+        placeholder: '',
+        value: 250,
+      }
+    ],
+    // 数据
+    data: [],
+    // 坐标
+    position: [
+      {
+        type: 'el-input-number',
+        label: '左边距',
+        name: 'left',
+        required: false,
+        placeholder: '',
+        value: 10,
+      },
+      {
+        type: 'el-input-number',
+        label: '上边距',
+        name: 'top',
+        required: false,
+        placeholder: '',
+        value: 10,
+      },
+      {
+        type: 'el-input-number',
+        label: '宽度',
+        name: 'width',
+        required: false,
+        placeholder: '该容器在1920px大屏中的宽度',
+        value: 500,
+      },
+      {
+        type: 'el-input-number',
+        label: '高度',
+        name: 'height',
+        required: false,
+        placeholder: '该容器在1080px大屏中的高度',
+        value: 350,
+      },
+    ],
+  }
+}
diff --git a/src/views/bigscreenDesigner/designer/tools/configure/decorateCharts/widget-decorate-pie.js b/src/views/bigscreenDesigner/designer/tools/configure/decorateCharts/widget-decorate-pie.js
index ad94e2f..b0509d3 100644
--- a/src/views/bigscreenDesigner/designer/tools/configure/decorateCharts/widget-decorate-pie.js
+++ b/src/views/bigscreenDesigner/designer/tools/configure/decorateCharts/widget-decorate-pie.js
@@ -1,10 +1,5 @@
 /*
  * @Descripttion: 装饰饼图
- * @version:
- * @Author: foming
- * @Date:
- * @LastEditors: qianlishi qianlishi@anji-plus.com
- * @LastEditTime: 2022-11-07 15:40:07
  */
 export const widgetDecoratePie = {
   code: 'widgetDecoratePieChart',
diff --git a/src/views/bigscreenDesigner/designer/tools/configure/funnelCharts/widget-funnel.js b/src/views/bigscreenDesigner/designer/tools/configure/funnelCharts/widget-funnel.js
index 7b8a449..1419ab9 100644
--- a/src/views/bigscreenDesigner/designer/tools/configure/funnelCharts/widget-funnel.js
+++ b/src/views/bigscreenDesigner/designer/tools/configure/funnelCharts/widget-funnel.js
@@ -1,10 +1,5 @@
 /*
  * @Descripttion: 漏斗图 json
- * @version:
- * @Author: qianlishi
- * @Date: 2021-08-29 07:29:23
- * @LastEditors: qianlishi qianlishi@anji-plus.com
- * @LastEditTime: 2022-11-07 15:40:21
  */
 export const widgetFunnel = {
   code: 'widget-funnel',
diff --git a/src/views/bigscreenDesigner/designer/tools/configure/heatmap/widget-heatmap.js b/src/views/bigscreenDesigner/designer/tools/configure/heatmap/widget-heatmap.js
index 77cbb18..70d6e16 100644
--- a/src/views/bigscreenDesigner/designer/tools/configure/heatmap/widget-heatmap.js
+++ b/src/views/bigscreenDesigner/designer/tools/configure/heatmap/widget-heatmap.js
@@ -1,10 +1,5 @@
 /*
  * @Descripttion: 热力图
- * @version:
- * @Author: whw
- * @Date: 2021-11-3
- * @LastEditors: qianlishi qianlishi@anji-plus.com
- * @LastEditTime: 2022-11-07 15:40:35
  */
 export const widgetHeatmap = {
   code: 'widget-heatmap',
diff --git a/src/views/bigscreenDesigner/designer/tools/configure/lineCharts/widget-line-compare.js b/src/views/bigscreenDesigner/designer/tools/configure/lineCharts/widget-line-compare.js
index ef09336..667c996 100644
--- a/src/views/bigscreenDesigner/designer/tools/configure/lineCharts/widget-line-compare.js
+++ b/src/views/bigscreenDesigner/designer/tools/configure/lineCharts/widget-line-compare.js
@@ -1,10 +1,5 @@
 /*
  * @Descripttion: 折线对比图 json
- * @version:
- * @Author: foming
- * @Date: 2021-08-29 07:39:35
- * @LastEditors: qianlishi qianlishi@anji-plus.com
- * @LastEditTime: 2022-11-07 15:40:44
  */
 export const widgetLineCompare = {
   code: 'widgetLineCompareChart',
diff --git a/src/views/bigscreenDesigner/designer/tools/configure/mapCharts/widget-airbubble-map.js b/src/views/bigscreenDesigner/designer/tools/configure/mapCharts/widget-airbubble-map.js
index e7f99b7..873df74 100644
--- a/src/views/bigscreenDesigner/designer/tools/configure/mapCharts/widget-airbubble-map.js
+++ b/src/views/bigscreenDesigner/designer/tools/configure/mapCharts/widget-airbubble-map.js
@@ -1,10 +1,5 @@
 /*
  * @Descripttion: 气泡地图json
- * @version:
- * @Author: qianlishi
- * @Date: 2021-08-29 07:35:32
- * @LastEditors: qianlishi qianlishi@anji-plus.com
- * @LastEditTime: 2022-11-07 15:41:02
  */
 export const widgetAirbubbleMap = {
   code: 'widgetAirBubbleMap',
diff --git a/src/views/bigscreenDesigner/designer/tools/configure/pieCharts/widget-pie-nightingale.js b/src/views/bigscreenDesigner/designer/tools/configure/pieCharts/widget-pie-nightingale.js
index a025e8a..09b75d2 100644
--- a/src/views/bigscreenDesigner/designer/tools/configure/pieCharts/widget-pie-nightingale.js
+++ b/src/views/bigscreenDesigner/designer/tools/configure/pieCharts/widget-pie-nightingale.js
@@ -1,10 +1,5 @@
 /*
  * @Descripttion: 南丁格尔玫瑰图 json
- * @version:
- * @Author: qianlishi
- * @Date: 2021-08-29 07:32:40
- * @LastEditors: qianlishi qianlishi@anji-plus.com
- * @LastEditTime: 2022-11-07 15:41:37
  */
 export const widgetPieNightingale = {
   code: 'WidgetPieNightingaleRoseArea',
diff --git a/src/views/bigscreenDesigner/designer/tools/configure/texts/widget-video.js b/src/views/bigscreenDesigner/designer/tools/configure/texts/widget-video.js
index c8b8de3..9910b03 100644
--- a/src/views/bigscreenDesigner/designer/tools/configure/texts/widget-video.js
+++ b/src/views/bigscreenDesigner/designer/tools/configure/texts/widget-video.js
@@ -1,11 +1,3 @@
-/*
- * @Descripttion: 视频json
- * @version: 
- * @Author: qianlishi
- * @Date: 2021-08-29 07:10:22
- * @LastEditors: qianlishi qianlishi@anji-plus.com
- * @LastEditTime: 2022-11-07 15:42:46
- */
 export const widgetVideo = {
   code: 'widget-video',
   type: 'text',
@@ -70,4 +62,4 @@ export const widgetVideo = {
       },
     ],
   }
-}
\ No newline at end of file
+}
diff --git a/src/views/bigscreenDesigner/designer/tools/configure/widget-universal.js b/src/views/bigscreenDesigner/designer/tools/configure/widget-universal.js
index 10d83f3..b227336 100644
--- a/src/views/bigscreenDesigner/designer/tools/configure/widget-universal.js
+++ b/src/views/bigscreenDesigner/designer/tools/configure/widget-universal.js
@@ -1,14 +1,6 @@
-/*
- * @Descripttion: 全能组件json
- * @version: 
- * @Author: qianlishi
- * @Date: 2021-08-29 07:20:11
- * @LastEditors: qianlishi
- * @LastEditTime: 2021-08-29 07:26:02
- */
 export const widgetUniversal = {
     code: 'widget-universal',
     type: 'html',
     label: '全能组件',
     icon: 'univresal',
-  }
\ No newline at end of file
+  }
diff --git a/src/views/bigscreenDesigner/designer/tools/index.js b/src/views/bigscreenDesigner/designer/tools/index.js
index 5d5c745..499155f 100644
--- a/src/views/bigscreenDesigner/designer/tools/index.js
+++ b/src/views/bigscreenDesigner/designer/tools/index.js
@@ -1,10 +1,5 @@
 /*
  * @Descripttion: 主文件
- * @version:
- * @Author: qianlishi
- * @Date: 2021-08-29 06:43:07
- * @LastEditors: qianlishi qianlishi@anji-plus.com
- * @LastEditTime: 2022-11-07 15:35:42
  */
 import { widgetTool } from "./main"
 const screenConfig = {
@@ -46,22 +41,22 @@ const screenConfig = {
         placeholder: '',
         value: ''
       },
-      {
-        type: 'data-source-select',
-        label: '主数据源',
-        name: 'master',
-        required: false,
-        placeholder: '主数据源[List:sName、sValue] ',/**LIST sName、sValue 后台代码自动转成 sName:sValue Map形式*/
-        value: ''
-      },
-      {
-        type: 'el-input-number',
-        label: '刷新时间(毫秒)',
-        name: 'refreshMasterTime',
-        value: '600000',
-        required: false,
-        placeholder: '毫秒',
-      },
+      // {
+      //   type: 'data-source-select',
+      //   label: '主数据源',
+      //   name: 'master',
+      //   required: false,
+      //   placeholder: '主数据源[List:sName、sValue] ',/**LIST sName、sValue 后台代码自动转成 sName:sValue Map形式*/
+      //   value: ''
+      // },
+      // {
+      //   type: 'el-input-number',
+      //   label: '刷新时间(毫秒)',
+      //   name: 'refreshMasterTime',
+      //   value: '600000',
+      //   required: false,
+      //   placeholder: '毫秒',
+      // },
       {
         type: 'vue-color',
         label: '背景颜色',
@@ -79,58 +74,56 @@ const screenConfig = {
         value: '',
       }
     ],
-    // data: [],
     data: [{
-            type: 'el-radio-group',
-            label: '数据类型',
-            name: 'dataType',
-            require: false,
-            placeholder: '',
-            selectValue: true,
-            selectOptions: [
-              {
-                code: 'staticData',
-                name: '静态数据',
-              },
-              {
-                code: 'dynamicData',
-                name: '动态数据',
-              },
-            ],
-            value: 'staticData',
-          },
-          {
-            type: 'el-input-number',
-            label: '刷新时间(毫秒)',
-            name: 'refreshTime',
-            relactiveDom: 'dataType',
-            relactiveDomValue: 'dynamicData',
-            value: 600000
-          },
-          {
-            type: 'el-button',
-            label: '静态数据',
-            name: 'staticData',
-            required: false,
-            placeholder: '',
-            relactiveDom: 'dataType',
-            relactiveDomValue: 'staticData',
-            value: {title:'标题', name: '测试名字', address: '上海市普陀区金沙江路 1518 弄0001','dProductQty':100,'dProductRate':13},
-          },
-          {
-            type: 'dycustComponents',
-            label: '',
-            name: 'dynamicData',
-            required: false,
-            placeholder: '',
-            relactiveDom: 'dataType',
-            relactiveDomValue: 'dynamicData',
-            chartType: 'master-data',
-            dictKey: 'MASTER_PROPERTIES',
-            value: '',
-          }
-        ],
-        position: [],
+      type: 'el-radio-group',
+      label: '数据类型',
+      name: 'dataType',
+      require: false,
+      placeholder: '',
+      selectValue: true,
+      selectOptions: [
+        {
+          code: 'staticData',
+          name: '静态数据',
+        },
+        {
+          code: 'dynamicData',
+          name: '动态数据',
+        },
+      ],
+      value: 'staticData',
+    },
+      {
+        type: 'el-input-number',
+        label: '刷新时间(毫秒)',
+        name: 'refreshTime',
+        relactiveDom: 'dataType',
+        relactiveDomValue: 'dynamicData',
+        value: 600000
+      },
+      {
+        type: 'el-button',
+        label: '静态数据',
+        name: 'staticData',
+        required: false,
+        placeholder: '',
+        relactiveDom: 'dataType',
+        relactiveDomValue: 'staticData',
+        value: {title:'标题', name: '测试名字', address: '上海市普陀区金沙江路 1518 弄0001','dProductQty':100,'dProductRate':13},
+      },
+      {
+        type: 'dycustComponents',
+        label: '',
+        name: 'dynamicData',
+        required: false,
+        placeholder: '',
+        relactiveDom: 'dataType',
+        relactiveDomValue: 'dynamicData',
+        chartType: 'master-data',
+        dictKey: 'MASTER_PROPERTIES',
+        value: '',
+      }],
+    position: [],
   }
 }
 
@@ -168,4 +161,4 @@ const getToolByCode = function (code) {
     return item.code == code
   })
 }
-export { widgetTools, getToolByCode }
+export { widgetTools, getToolByCode}
diff --git a/src/views/bigscreenDesigner/designer/tools/main.js b/src/views/bigscreenDesigner/designer/tools/main.js
index 1ba0daf..ad7b1d9 100644
--- a/src/views/bigscreenDesigner/designer/tools/main.js
+++ b/src/views/bigscreenDesigner/designer/tools/main.js
@@ -1,11 +1,3 @@
-/*
- * @Descripttion: json 入口文件
- * @version:
- * @Author: qianlishi
- * @Date: 2021-08-29 07:46:46
- * @LastEditors: qianlishi qianlishi@anji-plus.com
- * @LastEditTime: 2022-11-07 15:34:02
- */
 // import { widgetDiv } from "./configure/div/widget-div"
 import { widgetBorderBox } from "./configure/div/widget-border-box";
 import { widgetDecoration } from "./configure/div/widget-decoration";
diff --git a/src/views/bigscreenDesigner/designer/widget/bubble/widgetBubblechart.vue b/src/views/bigscreenDesigner/designer/widget/bubble/widgetBubblechart.vue
new file mode 100644
index 0000000..3241c75
--- /dev/null
+++ b/src/views/bigscreenDesigner/designer/widget/bubble/widgetBubblechart.vue
@@ -0,0 +1,391 @@
+<!--
+气泡图
+ !-->
+<template>
+  <div :class="styleObj" id="container"></div>
+</template>
+<script>
+import { Chart } from '@antv/g2';
+export default {
+  name: "WidgetBubblechart",
+  components: {},
+  props: {
+    value: Object,
+    ispreview: Boolean
+  },
+  data(){
+    return {
+      chart:null,//图表对象
+      showData:[//图表中将要显示的数据
+        {
+          "year": "1956 年",
+          "sales": 61,
+          "size": 21,
+          "group": "分组1"
+        },
+        {
+          "year": "1957 年",
+          "sales": 145,
+          "size": 45,
+          "group": "分组1"
+        },
+        {
+          "year": "1958 年",
+          "sales": 48,
+          "size": 68,
+          "group": "分组1"
+        },
+        {
+          "year": "1959 年",
+          "sales": 38,
+          "size": 78,
+          "group": "分组1"
+        },
+        {
+          "year": "1960 年",
+          "sales": 38,
+          "size": 18,
+          "group": "分组1"
+        },
+        {
+          "year": "1962 年",
+          "sales": 38,
+          "size": 18,
+          "group": "分组1"
+        },
+        {
+          "year": "1956 年",
+          "sales": 41,
+          "size": 61,
+          "group": "分组2"
+        },
+        {
+          "year": "1957 年",
+          "sales": 45,
+          "size": 25,
+          "group": "分组2"
+        },
+        {
+          "year": "1958 年",
+          "sales": 68,
+          "size": 28,
+          "group": "分组2"
+        },
+        {
+          "year": "1959 年",
+          "sales": 48,
+          "size": 28,
+          "group": "分组2"
+        },
+        {
+          "year": "1960 年",
+          "sales": 28,
+          "size": 78,
+          "group": "分组2"
+        },
+        {
+          "year": "1962 年",
+          "sales": 18,
+          "size": 38,
+          "group": "分组2"
+        }
+      ],
+    }
+  },
+  created(){
+
+  },
+  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
+      };
+    }
+  },
+  mounted(){
+    this.init();
+  },
+  methods:{
+    // 初始化
+    init(){
+      this.createChart();//创建chart
+      this.setChartData();//设置字段和数据
+      this.setChartAxis();//设置坐标轴和度量
+      this.setChartTooltip();//设置提示信息
+      this.chart.interaction('element-active');//设置图表样式
+      this.setChartStyle();//设置图表柱子相关属性
+      // this.chart.legend(false);//设置为false，表示不显示图例
+      this.setChartLegend();//设置图例
+      this.setChartAnimate();//设置动画
+      //渲染图表
+      this.chart.render();
+      //添加点击事件
+      this.addClickEvent();
+
+    },
+    //创建chart
+    createChart(){
+      this.chart = new Chart({
+        container: 'container',//chart容器id
+        autoFit: false,//图表是否自适应容器宽高，默认为 false
+        width: 800,//图标宽度
+        height: 400,//图表高度
+        padding: [40, 120, 80, 120],//图表内边距,依次为:上，右，下，左
+        // defaultInteractions:"ellipsis-text",//配置图表默认交互，仅支持字符串形式。G2 默认支持的交互有 'tooltip', 'legend-filter', 'legend-active', 'continuous-filter', 'ellipsis-text'
+        pixelRatio:window.devicePixelRatio,//设置设备像素比，默认取浏览器的值 window.devicePixelRatio
+        renderer:"canvas",//指定渲染引擎，默认使用 canvas。可选：'canvas' | 'svg'
+        theme:"dark",//配置主题，目前 g2 默认有 dark 主题模式，如需要自定义配置，可以先通过 registerTheme 注册主题，再设置主题 key。
+        visible:true,//chart 是否可见，默认为 true，设置为 false 则会隐藏。
+      });
+    },
+    //设置数据
+    setChartData(){
+      this.chart.data(this.showData);
+    },
+    //设置坐标轴
+    setChartAxis(){
+      var scale={};
+      scale["sales"]={
+        type: 'pow',
+        nice: true,
+      }
+      scale["size"]={
+        type: 'pow',
+        nice: true,
+      }
+      this.chart.scale(scale, {//Y轴 字段是 度量
+        nice: false,//是否自动调整 min、max 。默认为false
+        min: 10,//度量最小值，
+        max: 120,//度量最大值，如果不需要指定最大值可以设置max=null，或者不要填该参数
+      });
+      //设置Y轴
+      //this.chart.axis("sales",false);//不需要Y轴，可以设置false
+      this.chart.axis("sales", {//Y轴样式
+        grid:{
+          line:{
+            type:"line",
+            style:{
+              // fill:'#ff0000',
+              stroke:"#fff",//网格线颜色
+              opacity:0.3,//网格线透明度
+              lineDash:[1,3],//虚线
+            }
+          },
+        },
+        label:{
+          style:{
+            fill:"#fff",///Y轴文字颜色
+            fontFamily: "Microsoft YaHei",///Y轴文字字体
+            fontWeight: 400,///Y轴文字粗细
+            fontSize: 12,///Y轴文字大小
+          }
+        },
+        line:{
+          style:{
+            stroke:"#fff",//坐标轴颜色
+          }
+        },
+        tickLine: {
+          style:{
+            stroke:"#fff",//刻度线颜色
+          }
+        },
+        subTickLine:{
+          style:{
+            stroke:"#fff",//小刻度颜色
+          }
+        }
+      });
+
+      //设置X轴
+      //this.chart.axis("year",false);//不需要Y轴，可以设置false
+      this.chart.axis("year", {//X轴样式
+
+        label: {
+          formatter: (val) => {
+            return val;
+            // return +val * 100 + '%';
+          },
+          style:{
+            fill:"#fff",//文字颜色
+            fontFamily: "Microsoft YaHei",//文字字体
+            fontWeight: 400,//文字粗细
+            fontSize: 12,//文字大小
+          }
+        },
+        line:{
+          style:{
+            stroke:"#fff",//坐标轴颜色
+          }
+        },
+        tickLine: {
+          style:{
+            stroke:"#fff",//刻度线颜色
+          }
+        },
+        subTickLine:{
+          style:{
+            stroke:"#fff",//小刻度颜色
+          }
+        }
+      });
+    },
+    //设置提示框信息样式
+    setChartTooltip(){
+      this.chart.tooltip({
+        showMarkers: false,
+        showCrosshairs: false,
+        domStyles:{
+          'g2-tooltip':{
+            background:"rgba(00, 00, 00,0.5)",//背景RGBA形式的值
+            color:"#ffffff",//文字颜色
+            boxShadow:"0px 0px 5px #000000",//阴影大小 阴影颜色
+          },
+        },
+        customItems: (items) => {//自定义显示的内容格式
+          // console.log("items")
+          // console.log(items)
+          // items[0].name="sales";
+          return items;
+        },
+      });
+    },
+    //设置图表气泡相关属性【气泡样式】
+    setChartStyle(){
+      var line=this.chart.point();
+
+      line.size(6)//圆点大小
+        .style({
+          // strokeOpacity:1,
+          // fill: this.attrs.style.pointColor,
+          stroke:"#fff",//圆点边框颜色
+
+        })
+        .state({
+          // selected:{
+          //   style:{
+          //     stroke:'red',
+          //   }
+          // }
+          active:{
+            style:{
+              stroke:"#2681ff",//鼠标经过 边框颜色
+            }
+          }
+        })
+        .position("year"+"*"+"sales")//X轴 * Y轴
+        .size("size"+"",[1,40])//气泡半径范围 1-30
+        .color("group", ["#2681ff","#00ff44","#2611ff","#26aa99"])//参数1：group字段为分组字段，参数2：颜色数组，散点的颜色会循环的从颜色数组中取出来
+        .tooltip("year"+"*"+"sales"+"*"+"size"+"*"+"group")
+        .shape('circle');
+      //柱子上是否显示值标签
+      //line.label(false);//不需要显示，可以设置false
+      line.label("sales", {//标签值
+        content: (originData) => {
+          return originData["sales"]+"万";//设置值标签最终显示的内容
+        },
+        style: {
+          fill: "#fff",
+          fontFamily: "Microsoft YaHei",
+          fontWeight: 400,
+          fontSize: 16,
+          // fill: "#ffffff",
+        },
+        position:"top",//显示位置
+      })
+    },
+    //设置图例
+    setChartLegend(){
+
+      // this.chart.legend(false);//设置为false，表示不显示图例
+
+      this.chart.legend("group", {
+        position: "bottom",//图例位置："top" | "top-left" | "top-right" | "right" | "right-top" | "right-bottom" | "left" | "left-top" | "left-bottom" | "bottom" | "bottom-left" | "bottom-right"
+        itemName:{
+          style:{
+            fill: "#fff",
+            fontFamily: "Microsoft YaHei",
+            fontWeight: 400,
+            fontSize: 16,
+          }
+        },
+        pageNavigator: {
+          marker: {//分页器指示箭头配置项
+            style: {
+              // 非激活，不可点击态时的填充色设置
+              inactiveFill: "#fff",//分页器：箭头颜色
+              inactiveOpacity: 1,//分页器：箭头透明度
+              // 默认填充色设置
+              fill: "#fff",//分页器：颜色
+              opacity: 1,//分页器：透明度
+              size: 12,//分页器：大小
+            },
+          },
+          text: {//分页器指示文本配置项
+            style: {
+              fill: "#fff",//分页器：文本颜色
+              fontSize: 12,//分页器：文本大小
+            },
+          },
+        },
+      });
+    },
+    //设置动画
+    setChartAnimate(){
+      // this.chart.animate(false);//设置为false，表示不使用动画效果
+      this.chart.animate({
+        // 初始化时的入场动画
+        appear: {
+          animation: 'fade-in', // 动画名称:'fade-in'|'fan-in'|'scale-inx'|'scale-iny'|'path-in'|'zoom-in'|'clip-in'
+          easing: 'easeQuadIn', // 动画缓动效果
+          delay: 100, // 动画延迟执行时间
+          duration: 600 // 动画执行时间
+        },
+        // 更新时的出现动画
+        enter: {
+          animation: 'fade-in', //动画名称:'fade-in'|'fan-in'|'scale-inx'|'scale-iny'|'path-in'|'zoom-in'|'clip-in'
+          easing: 'easeQuadIn', // 动画缓动效果
+          delay: 100, // 动画延迟执行时间
+          duration: 600 // 动画执行时间
+        },
+        // 更新时的动画
+        leave: {
+          animation: 'path-out', //动画名称:'fade-out'|'path-out'|'zoom-out'|'lineWidth-out'
+          easing: 'easeQuadIn', // 动画缓动效果
+          delay: 100, // 动画延迟执行时间
+          duration: 600 // 动画执行时间
+        },
+        // 更新时的变化动画
+        update: {
+          animation: 'fade-in', //动画名称:'fade-in'|'fan-in'
+          easing: 'easeQuadIn', // 动画缓动效果
+          delay: 100, // 动画延迟执行时间
+          duration: 600 // 动画执行时间
+        },
+      })
+    },
+    //添加点击事件
+    addClickEvent(){
+      this.chart.on('element:click', (ev) => {
+        var data=ev.data.data;
+        console.log(data);
+        alert(JSON.stringify(data));
+      });
+    }
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.echarts {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+.container{width:800px; height: 800px; margin: 100px auto; background: cadetblue;}
+</style>
diff --git a/src/views/bigscreenDesigner/designer/widget/temp.vue b/src/views/bigscreenDesigner/designer/widget/temp.vue
index 8748226..ea5b507 100644
--- a/src/views/bigscreenDesigner/designer/widget/temp.vue
+++ b/src/views/bigscreenDesigner/designer/widget/temp.vue
@@ -1,9 +1,3 @@
-<!--
- * @Author: lide1202@hotmail.com
- * @Date: 2021-3-13 11:04:24
- * @Last Modified by:   lide1202@hotmail.com
- * @Last Modified time: 2021-3-13 11:04:24
- !-->
 <template>
   <div>
     <component :is="type" :value="value" :ispreview="true"/>
diff --git a/src/views/bigscreenDesigner/designer/widget/text/widgetTable.vue b/src/views/bigscreenDesigner/designer/widget/text/widgetTable.vue
index fc2afd7..4d4fc07 100644
--- a/src/views/bigscreenDesigner/designer/widget/text/widgetTable.vue
+++ b/src/views/bigscreenDesigner/designer/widget/text/widgetTable.vue
@@ -69,7 +69,7 @@ export default {
   },
   computed: {
     styleObj() {
-      console.log(this.optionsSetUp);
+      //console.log(this.optionsSetUp);
       const allStyle = this.optionsPosition;
       return {
         position: this.ispreview ? "absolute" : "static",
diff --git a/src/views/bigscreenDesigner/viewer/index.vue b/src/views/bigscreenDesigner/viewer/index.vue
index fc8aeb8..3e20cca 100644
--- a/src/views/bigscreenDesigner/viewer/index.vue
+++ b/src/views/bigscreenDesigner/viewer/index.vue
@@ -17,6 +17,7 @@
 <script>
 import widget from "../designer/widget/temp";
 import { detailDashboard } from "@/api/bigscreen";
+import { mapMutations } from 'vuex';
 export default {
   name: "Login",
   components: {
@@ -25,13 +26,15 @@ export default {
   data() {
     return {
       bigScreenStyle: {},
-      widgets: []
+      widgets: [],
+      masterData:{}
     };
   },
   mounted() {
     this.getData();
   },
   methods: {
+    ...mapMutations('dataSource', ['SET_STATIC_DATA']),
     async getData() {
       const reportCode = this.$route.query.reportCode;
       const { code, data } = await detailDashboard(reportCode);
@@ -52,9 +55,54 @@ export default {
         transform: `scale(${ratioEquipment}, ${ratioEquipment})`,
         "transform-origin": "0 0"
       };
+      // 赋值到全局变量
+      this.setMasterData(data.dashboard);
+      //加载其余子组件
       this.widgets = data.dashboard.widgets;
-    }
-  }
+    },
+    // 数据处理
+    setMasterData(screenData){
+      // 数据类型 静态 or 动态
+      const screenD = screenData.data;
+      const refreshTime =  screenD["refreshTime"]||60000*30;
+      screenD.dataType == "staticData"
+        ? this.staticDataFn(screenD.staticData)
+        : this.dynamicDataFn(screenD.dynamicData, refreshTime);
+    },
+    staticDataFn(val) {
+      //获取静态数据
+      this.masterData=val;
+      this.SET_STATIC_DATA(this.masterData);
+    },
+    dynamicDataFn(val, refreshTime) {
+      if (!val) return;
+      //第一次赋值
+      this.getEchartData(val);
+      //定时赋值
+      this.flagInter = setInterval(() => {
+        this.getEchartData(val);
+      }, refreshTime);
+    },
+    getEchartData(val) {
+      const data = this.queryEchartsData(val);
+      data.then(res => {
+        this.renderingFn(res);
+      });
+    },
+    renderingFn(val) {
+      if(this.isNotBlankArray(val)){
+        for (let i = 0; i < val.length; i++) {
+          const one = val[i];
+          const sValue = (this.isBlankObject(one)|| this.isBlank(one['sValue']))?"":one['sValue'];
+          if(this.isNotBlankObj(one) && this.isNotBlank(one['sName'])){
+            const sName = one['sName'];
+            this.masterData[sName]=sValue;
+          }
+        }
+      }
+      this.SET_STATIC_DATA(this.masterData);
+    },
+  },
 };
 </script>
 
diff --git a/src/views/reportManage/components/copyDialog.vue b/src/views/reportManage/components/copyDialog.vue
index 9c5275a..dfc1512 100644
--- a/src/views/reportManage/components/copyDialog.vue
+++ b/src/views/reportManage/components/copyDialog.vue
@@ -1,10 +1,5 @@
 <!--
- * @Descripttion: 
- * @version: 
- * @Author: qianlishi
- * @Date: 2022-05-17 16:55:05
- * @LastEditors: qianlishi
- * @LastEditTime: 2022-05-17 17:38:54
+ * @Descripttion: 报表管理--复制
 -->
 <template>
   <el-dialog
diff --git a/src/views/reportManage/index.vue b/src/views/reportManage/index.vue
index 3e0e71e..f556418 100644
--- a/src/views/reportManage/index.vue
+++ b/src/views/reportManage/index.vue
@@ -1,10 +1,5 @@
 <!--
  * @Descripttion: 报表设计--报表管理
- * @version:
- * @Author: qianlishi
- * @Date: 2021-12-11 14:48:27
- * @LastEditors: qianlishi
- * @LastEditTime: 2022-05-17 17:38:44
 -->
 <template>
   <anji-crud ref="listPage" :option="crudOption">
diff --git a/src/views/resultset/index.vue b/src/views/resultset/index.vue
index 256852d..8bc09f4 100644
--- a/src/views/resultset/index.vue
+++ b/src/views/resultset/index.vue
@@ -1,10 +1,5 @@
 <!--
  * @Descripttion: 用户权限--数据集
- * @version: 
- * @Author: qianlishi
- * @Date: 2021-12-11 14:48:27
- * @LastEditors: qianlishi
- * @LastEditTime: 2022-04-14 18:48:24
 -->
 <template>
   <anji-crud ref="listPage" :option="crudOption">
diff --git a/src/views/screenDesigner/index备份.vue b/src/views/screenDesigner/index备份.vue
deleted file mode 100644
index 9282e8f..0000000
--- a/src/views/screenDesigner/index备份.vue
+++ /dev/null
@@ -1,725 +0,0 @@
-<template>
-  <div class="layout">
-    <div class="layout-container">
-      <!-- 图表 -->
-      <el-tabs class="layout-left" type="border-card">
-        <el-tab-pane>
-          <span slot="label"><i class="el-icon-date icon"></i>工具栏</span>
-          <div class="chart-type">
-            <el-tabs class="type-left" tab-position="left">
-              <el-tab-pane
-                v-for="(item, index) in widgetTools"
-                :key="index"
-                :label="item.name"
-              >
-                <draggable
-                  v-for="(it, idx) in item.list"
-                  :key="idx"
-                  @end="evt => widgetOnDragged(evt, it.code)"
-                >
-                  <div class="tools-item">
-                    <span class="tools-item-icon">
-                      <i class="iconfont" :class="it.icon"></i>
-                    </span>
-                    <span class="tools-item-text">{{ it.label }}</span>
-                  </div>
-                </draggable>
-              </el-tab-pane>
-            </el-tabs>
-          </div>
-        </el-tab-pane>
-        <el-tab-pane>
-          <span slot="label" class="icon"
-            ><i class="el-icon-date icon"></i>图层</span
-          >
-          <div
-            v-for="(item, index) in layerWidget"
-            :key="'item' + index"
-            class="tools-item"
-            :class="widgetIndex == index ? 'is-active' : ''"
-            @click="layerClick(index)"
-          >
-            <span class="tools-item-icon">
-              <i class="iconfont" :class="item.icon"></i>
-            </span>
-            <span class="tools-item-text">{{ item.label }}</span>
-          </div>
-        </el-tab-pane>
-      </el-tabs>
-
-      <div
-        class="layout-middle"
-        :style="{
-          width: middleWidth + 'px',
-          height: middleHeight + 'px'
-        }"
-      >
-        <!-- 操作栏 -->
-        <div class="layout-bar">
-          <div class="bar-item" @click="saveData">
-            <i class="iconfont iconsave"></i>保存
-          </div>
-          <div class="bar-item" @click="viewScreen">
-            <i class="iconfont iconyulan"></i>预览
-          </div>
-          <div class="bar-item" @click="handleUndo">
-            <i class="iconfont iconundo"></i>撤销
-          </div>
-          <div class="bar-item" @click="handleRedo">
-            <i class="iconfont iconhuifubeifen"></i>恢复
-          </div>
-          <div class="bar-item">
-            <el-upload
-              class="el-upload"
-              ref="upload"
-              :action="uploadUrl"
-              :headers="headers"
-              accept=".zip"
-              :on-success="handleUpload"
-              :on-error="handleError"
-              :show-file-list="false"
-              :limit="1"
-            >
-              <i class="iconfont icondaoru"></i>
-            </el-upload>
-            导入
-          </div>
-          <div class="bar-item">
-            <i class="iconfont icondaochu"></i>
-            <el-dropdown @command="exportDashboard">
-              <span class="el-dropdown-link">
-                导出<i class="el-icon-arrow-down el-icon--right"></i>
-              </span>
-              <el-dropdown-menu slot="dropdown">
-                <el-dropdown-item command="1"
-                  >导出(包含数据集)</el-dropdown-item
-                >
-                <el-dropdown-item command="0"
-                  >导出(不包含数据集)</el-dropdown-item
-                >
-              </el-dropdown-menu>
-            </el-dropdown>
-          </div>
-        </div>
-        <!-- 设计器 -->
-        <div
-          class="workbench-container"
-          :style="{
-            width: bigscreenWidthInWorkbench + 'px',
-            height: bigscreenHeightInWorkbench + 'px'
-          }"
-          @mousedown="handleMouseDown"
-        >
-          <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.self="setOptionsOnClickScreen"
-            >
-              <div v-if="grade" class="bg-grid"></div>
-              <widget
-                ref="widgets"
-                v-for="(widget, index) in widgets"
-                :key="index"
-                v-model="widget.value"
-                :index="index"
-                :step="step"
-                :type="widget.type"
-                :bigscreen="{ bigscreenWidth, bigscreenHeight }"
-                @onActivated="setOptionsOnClickWidget"
-                @contextmenu.prevent.native="rightClick($event, index)"
-                @mousedown.prevent.native="widgetsClick(index)"
-                @mouseup.prevent.native="widgetsMouseup"
-              />
-            </div>
-          </vue-ruler-tool>
-        </div>
-      </div>
-
-      <!-- 设置 -->
-      <div class="layout-right">
-        <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>
-          <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>
-    </div>
-
-    <content-menu
-      :visible.sync="visibleContentMenu"
-      :style-obj="styleObj"
-      @deletelayer="deletelayer"
-      @copylayer="copylayer"
-      @istopLayer="istopLayer"
-      @setlowLayer="setlowLayer"
-      @moveupLayer="moveupLayer"
-      @movedownLayer="movedownLayer"
-    />
-  </div>
-</template>
-<script>
-import {
-  insertDashboard,
-  detailDashboard,
-  importDashboard,
-  exportDashboard
-} from "@/api/bigscreen";
-import {
-  swapArr,
-  setDefaultValue,
-  handleDefaultValue,
-  getPXUnderScale,
-  handleInitEchartsData,
-  handleBigScreen,
-  handlerLayerWidget
-} from "./util/screen";
-import { screenConfig } from "./config/texts/screenConfig.js";
-import { widgetTools, getToolByCode } from "./config/index.js";
-import VueRulerTool from "vue-ruler-tool"; // 大屏设计页面的标尺插件
-import widget from "./widget/index.vue";
-import dynamicForm from "./components/dynamicForm.vue";
-import draggable from "vuedraggable";
-import contentMenu from "./components/contentMenu";
-import { getToken } from "@/utils/auth";
-import { Revoke } from "@/utils/revoke"; //处理历史记录 2022-02-22
-export default {
-  components: {
-    VueRulerTool,
-    widget,
-    dynamicForm,
-    draggable,
-    contentMenu
-  },
-  data() {
-    return {
-      uploadUrl:
-        process.env.BASE_API +
-        "/reportDashboard/import/" +
-        this.$route.query.reportCode,
-      grade: false,
-      layerWidget: [],
-      widgetTools: widgetTools, // 左侧工具栏的组件图标，将js变量加入到当前作用域
-      widthLeftForTools: 200, // 左侧工具栏宽度
-      widthLeftForToolsHideButton: 15, // 左侧工具栏折叠按钮宽度
-      widthLeftForOptions: 300, // 右侧属性配置区
-      widthPaddingTools: 18,
-      toolIsShow: true, // 左侧工具栏是否显示
-
-      bigscreenWidth: 1920, // 大屏设计的大小
-      bigscreenHeight: 1080,
-      revoke: null, //处理历史记录 2022-02-22
-
-      // 工作台大屏画布，保存到表gaea_report_dashboard中
-      dashboard: {
-        id: null,
-        title: "", // 大屏页面标题
-        width: 1920, // 大屏设计宽度
-        height: 1080, // 大屏设计高度
-        backgroundColor: "", // 大屏背景色
-        backgroundImage: "", // 大屏背景图片
-        refreshSeconds: null, // 大屏刷新时间间隔
-        presetLine: [], // 辅助线
-        presetLineVisible: true // 辅助线是否显示
-      },
-      // 大屏的标记
-      screenCode: "",
-      // 大屏画布中的组件
-      widgets: [
-        {
-          // type和value最终存到数据库中去，保存到gaea_report_dashboard_widget中
-          type: "widget-text",
-          value: {
-            setup: {},
-            data: {},
-            position: {
-              width: 100,
-              height: 100,
-              left: 0,
-              top: 0,
-              zIndex: 0
-            }
-          },
-          // options属性是从工具栏中拿到的tools中拿到
-          options: []
-        }
-      ], // 工作区中拖放的组件
-
-      // 当前激活组件
-      widgetIndex: 0,
-      // 当前激活组件右侧配置属性
-      widgetOptions: {
-        setup: [], // 配置
-        data: [], // 数据
-        position: [] // 坐标
-      },
-      flagWidgetClickStopPropagation: false, // 点击组件时阻止事件冒泡传递到画布click事件上
-      styleObj: {
-        left: 0,
-        top: 0
-      },
-      visibleContentMenu: false,
-      rightClickIndex: -1,
-      activeName: "first"
-    };
-  },
-  computed: {
-    step() {
-      return Number(100 / (this.bigscreenScaleInWorkbench * 100));
-    },
-    headers() {
-      return {
-        Authorization: getToken() // 直接从本地获取token就行
-      };
-    },
-    // 左侧折叠切换时，动态计算中间区的宽度
-    middleWidth() {
-      let widthLeftAndRight = 0;
-      if (this.toolIsShow) {
-        widthLeftAndRight += this.widthLeftForTools; // 左侧工具栏宽度
-      }
-      widthLeftAndRight += this.widthLeftForToolsHideButton; // 左侧工具栏折叠按钮宽度
-      widthLeftAndRight += this.widthLeftForOptions; // 右侧配置栏宽度
-
-      let middleWidth = this.bodyWidth - widthLeftAndRight;
-      return middleWidth;
-    },
-    middleHeight() {
-      return this.bodyHeight;
-    },
-    // 设计台按大屏的缩放比例
-    bigscreenScaleInWorkbench() {
-      let widthScale =
-        (this.middleWidth - this.widthPaddingTools) / this.bigscreenWidth;
-      let heightScale =
-        (this.middleHeight - this.widthPaddingTools) / this.bigscreenHeight;
-      return Math.min(widthScale, heightScale);
-    },
-    workbenchTransform() {
-      return `scale(${this.bigscreenScaleInWorkbench}, ${
-        this.bigscreenScaleInWorkbench
-      })`;
-    },
-    // 大屏在设计模式的大小
-    bigscreenWidthInWorkbench() {
-      return (
-        getPXUnderScale(this.bigscreenScaleInWorkbench, this.bigscreenWidth) +
-        this.widthPaddingTools
-      );
-    },
-    bigscreenHeightInWorkbench() {
-      return (
-        getPXUnderScale(this.bigscreenScaleInWorkbench, this.bigscreenHeight) +
-        this.widthPaddingTools
-      );
-    }
-  },
-  watch: {
-    widgets: {
-      handler(val) {
-        this.layerWidget = handlerLayerWidget(val, getToolByCode);
-        //以下部分是记录历史
-        this.$nextTick(() => {
-          this.revoke.push(this.widgets);
-        });
-      },
-      deep: true
-    }
-  },
-  created() {
-    /* 以下是记录历史的 */
-    this.revoke = new Revoke();
-  },
-  mounted() {
-    this.initScreen();
-    // 如果是新的设计工作台
-    // this.initEchartData();
-    this.widgets = [];
-    window.addEventListener("mouseup", () => {
-      this.grade = false;
-    });
-  },
-  methods: {
-    // 初始化大屏
-    initScreen() {
-      this.widgetOptions = screenConfig["options"];
-    },
-    // 初始化 echrats
-    async initEchartData() {
-      const reportCode = this.$route.query.reportCode;
-      const { code, data } = await detailDashboard(reportCode);
-      if (code != 200) return;
-      const processData = handleInitEchartsData(data, getToolByCode);
-      const screenData = handleBigScreen(
-        data.dashboard,
-        getToolByCode,
-        this.setOptionsOnClickScreen
-      );
-      this.widgets = processData;
-      this.dashboard = screenData;
-      this.bigscreenWidth = this.dashboard.width;
-      this.bigscreenHeight = this.dashboard.height;
-    },
-
-    // 拖动一个组件放到工作区中去，在拖动结束时，放到工作区对应的坐标点上去
-    widgetOnDragged(evt, widgetCode) {
-      let widgetType = widgetCode;
-
-      // 获取结束坐标和列名
-      let eventX = evt.originalEvent.clientX; // 结束在屏幕的x坐标
-      let eventY = evt.originalEvent.clientY; // 结束在屏幕的y坐标
-
-      let workbenchPosition = this.getDomTopLeftById("workbench");
-      let widgetTopInWorkbench = eventY - workbenchPosition.top;
-      let widgetLeftInWorkbench = eventX - workbenchPosition.left;
-
-      // 计算在缩放模式下的x y
-      let x = widgetLeftInWorkbench / this.bigscreenScaleInWorkbench;
-      let y = widgetTopInWorkbench / this.bigscreenScaleInWorkbench;
-
-      // 复制一个组件
-      let tool = getToolByCode(widgetType);
-      let widgetJson = {
-        type: widgetType,
-        value: {
-          setup: {},
-          data: {},
-          position: {
-            width: 0,
-            height: 0,
-            left: 0,
-            top: 0,
-            zIndex: 0
-          }
-        },
-        options: tool.options
-      };
-      // 处理默认值
-      const widgetJsonValue = handleDefaultValue(widgetJson);
-
-      //2022年02月22日 修复：可以拖拽放到鼠标的位置
-      widgetJsonValue.value.position.left =
-        x - widgetJsonValue.value.position.width / 2;
-      widgetJsonValue.value.position.top =
-        y - widgetJsonValue.value.position.height / 2;
-
-      // 将选中的复制组件，放到工作区中去
-      this.widgets.push(this.deepClone(widgetJsonValue));
-      // 激活新组件的配置属性
-      this.setOptionsOnClickWidget(this.widgets.length - 1);
-    },
-    // 如果是点击大屏设计器中的底层，加载大屏底层属性
-    setOptionsOnClickScreen() {
-      this.screenCode = "screen";
-      // 选中不同的组件 右侧都显示第一栏
-      this.activeName = "first";
-      this.widgetOptions = screenConfig["options"];
-    },
-    layerClick(index) {
-      this.widgetIndex = index;
-      this.widgetsClick(index);
-    },
-    // 如果是点击某个组件，获取该组件的配置项
-    setOptionsOnClickWidget(obj) {
-      console.log(obj);
-      this.screenCode = "";
-      if (typeof obj == "number") {
-        this.widgetOptions = this.deepClone(this.widgets[obj]["options"]);
-        return;
-      }
-      if (obj.index < 0 || obj.index >= this.widgets.length) {
-        return;
-      }
-      this.widgetIndex = obj.index;
-      this.widgets[obj.index].value.position = obj;
-      this.widgets[obj.index].options.position.forEach(el => {
-        for (const key in obj) {
-          if (el.name == key) {
-            el.value = obj[key];
-          }
-        }
-      });
-      this.widgetOptions = this.deepClone(this.widgets[obj.index]["options"]);
-    },
-    widgetsClick(index) {
-      const draggableArr = this.$refs.widgets;
-      for (let i = 0; i < draggableArr.length; i++) {
-        if (i == index) {
-          this.$refs.widgets[i].$refs.draggable.setActive(true);
-        } else {
-          this.$refs.widgets[i].$refs.draggable.setActive(false);
-        }
-      }
-      this.setOptionsOnClickWidget(index);
-      this.grade = true;
-    },
-    widgetsMouseup(e) {
-      this.grade = false;
-    },
-    handleMouseDown() {
-      const draggableArr = this.$refs.widgets;
-      for (let i = 0; i < draggableArr.length; i++) {
-        this.$refs.widgets[i].$refs.draggable.setActive(false);
-      }
-    },
-    // 将当前选中的组件，右侧属性值更新
-    widgetValueChanged(key, val) {
-      if (this.screenCode == "screen") {
-        let newSetup = new Array();
-        this.dashboard = this.deepClone(val);
-        if (this.bigscreenWidth != this.dashboard.width) {
-          this.bigscreenWidth = this.dashboard.width;
-        }
-        if (this.bigscreenHeight != this.dashboard.height) {
-          this.bigscreenHeight = this.dashboard.height;
-        }
-        this.widgetOptions.setup.forEach(el => {
-          if (el.name == "width") {
-            el.value = this.bigscreenWidth;
-          } else if (el.name == "height") {
-            el.value = this.bigscreenHeight;
-          }
-          newSetup.push(el);
-        });
-        this.widgetOptions.setup = newSetup;
-      } else {
-        for (let i = 0; i < this.widgets.length; i++) {
-          if (this.widgetIndex == i) {
-            this.widgets[i].value[key] = this.deepClone(val);
-            setDefaultValue(this.widgets[i].options[key], val);
-          }
-        }
-      }
-    },
-    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"
-        };
-      }
-      this.visibleContentMenu = true;
-      return false;
-    },
-    datadragEnd(evt) {
-      evt.preventDefault();
-      this.widgets = swapArr(this.widgets, evt.oldIndex, evt.newIndex);
-    },
-    // 保存
-    async saveData() {
-      if (!this.widgets || this.widgets.length == 0) {
-        this.$message.error("请添加组件");
-        return;
-      }
-      const screenData = {
-        reportCode: this.$route.query.reportCode,
-        dashboard: {
-          title: this.dashboard.title,
-          width: this.dashboard.width,
-          height: this.dashboard.height,
-          backgroundColor: this.dashboard.backgroundColor,
-          backgroundImage: this.dashboard.backgroundImage
-        },
-        widgets: this.widgets
-      };
-      const { code, data } = await insertDashboard(screenData);
-      if (code == "200") {
-        this.$message.success("保存成功！");
-      }
-    },
-    // 预览
-    viewScreen() {
-      let routeUrl = this.$router.resolve({
-        path: "/screen/preview",
-        query: { reportCode: this.$route.query.reportCode }
-      });
-      window.open(routeUrl.href, "_blank");
-    },
-    // 撤销
-    handleRedo() {
-      const record = this.revoke.redo();
-      if (!record) {
-        return false;
-      }
-      this.widgets = record;
-    },
-    // 恢复
-    handleUndo() {
-      const record = this.revoke.undo();
-      if (!record) {
-        return false;
-      }
-      this.widgets = record;
-    },
-    // 导入  成功回调
-    handleUpload(response, file, fileList) {
-      //清除el-upload组件中的文件
-      this.$refs.upload.clearFiles();
-      //刷新大屏页面
-      this.initEchartData();
-      if (response.code == "200") {
-        this.$message({
-          message: "导入成功！",
-          type: "success"
-        });
-      } else {
-        this.$message({
-          message: response.message,
-          type: "error"
-        });
-      }
-    },
-    // 导入失败
-    handleError(err) {
-      this.$message({
-        message: "上传失败！",
-        type: "error"
-      });
-    },
-    // 导出
-    async exportDashboard(val) {
-      console.log(val);
-      const fileName = this.$route.query.reportCode + ".zip";
-
-      const param = {
-        reportCode: this.$route.query.reportCode,
-        showDataSet: val
-      };
-      exportDashboard(param).then(res => {
-        const that = this;
-        const type = res.type;
-        if (type == "application/json") {
-          let reader = new FileReader();
-          reader.readAsText(res, "utf-8");
-          reader.onload = function() {
-            const data = JSON.parse(reader.result);
-            that.$message.error(data.message);
-          };
-          return;
-        }
-
-        const blob = new Blob([res], {
-          type: "application/octet-stream"
-        });
-        if (window.navigator.msSaveOrOpenBlob) {
-          //msSaveOrOpenBlob方法返回bool值
-          navigator.msSaveBlob(blob, fileName); //本地保存
-        } else {
-          const link = document.createElement("a"); //a标签下载
-          link.href = window.URL.createObjectURL(blob);
-          link.download = fileName;
-          link.click();
-          window.URL.revokeObjectURL(link.href);
-        }
-      });
-    },
-    // 删除
-    deletelayer() {
-      this.widgets.splice(this.rightClickIndex, 1);
-    },
-    // 复制
-    copylayer() {
-      const obj = this.deepClone(this.widgets[this.rightClickIndex]);
-      this.widgets.splice(this.widgets.length, 0, obj);
-    },
-    // 置顶
-    istopLayer() {
-      if (this.rightClickIndex + 1 < this.widgets.length) {
-        const temp = this.widgets.splice(this.rightClickIndex, 1)[0];
-        this.widgets.push(temp);
-      }
-    },
-    // 置底
-    setlowLayer() {
-      if (this.rightClickIndex != 0) {
-        this.widgets.unshift(this.widgets.splice(this.rightClickIndex, 1)[0]);
-      }
-    },
-    // 上移一层
-    moveupLayer() {
-      if (this.rightClickIndex != 0) {
-        this.widgets[this.rightClickIndex] = this.widgets.splice(
-          this.rightClickIndex - 1,
-          1,
-          this.widgets[this.rightClickIndex]
-        )[0];
-      } else {
-        this.widgets.push(this.widgets.shift());
-      }
-    },
-    // 下移一层
-    movedownLayer() {
-      if (this.rightClickIndex != this.widgets.length - 1) {
-        this.widgets[this.rightClickIndex] = this.widgets.splice(
-          this.rightClickIndex + 1,
-          1,
-          this.widgets[this.rightClickIndex]
-        )[0];
-      } else {
-        this.widgets.unshift(this.widgets.splice(this.rightClickIndex, 1)[0]);
-      }
-    }
-  }
-};
-</script>
-<style scoped lang="scss">
-@import "../../assets/styles/screenDesigner.scss";
-</style>
--
libgit2 0.22.2