update

report-ui/src/views/screenDesigner/config/index.js

@@ -5,6 +5,6 @@ export const widgetTools =  converArr([...widgetTool])
 
 export const getToolByCode = (code) => {
   return [...widgetTool].find((item) => {
-    return item.code = code
+    return item.code == code
   })
 }

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

@@ -2,12 +2,20 @@
   <div class="layout">
     <!-- 操作栏 -->
     <div class="layout-bar">
-      <div class="bar-item"><i class="iconfont iconsave"></i>保存</div>
-      <div class="bar-item"><i class="iconfont iconyulan"></i>预览</div>
-      <div class="bar-item"><i class="iconfont iconundo"></i>撤销</div>
-      <div class="bar-item"><i class="iconfont iconhuifubeifen"></i>恢复</div>
+      <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
+        <el-upload
           class="el-upload"
           ref="upload"
           :action="uploadUrl"
@@ -19,18 +27,18 @@
           :limit="1"
         >
           <i class="iconfont icondaoru"></i>
-        </el-upload> -->
+        </el-upload>
         导入
       </div>
       <div class="bar-item">
         <i class="iconfont icondaochu"></i>
-        <el-dropdown>
+        <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>导出(包含数据集)</el-dropdown-item>
-            <el-dropdown-item>导出(不包含数据集)</el-dropdown-item>
+            <el-dropdown-item command="1">导出(包含数据集)</el-dropdown-item>
+            <el-dropdown-item command="0">导出(不包含数据集)</el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
       </div>
@@ -205,6 +213,15 @@ import {
   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"; // 大屏设计页面的标尺插件
@@ -333,18 +350,22 @@ export default {
     },
     // 大屏在设计模式的大小
     bigscreenWidthInWorkbench() {
-      return this.getPXUnderScale(this.bigscreenWidth) + this.widthPaddingTools;
+      return (
+        getPXUnderScale(this.bigscreenScaleInWorkbench, this.bigscreenWidth) +
+        this.widthPaddingTools
+      );
     },
     bigscreenHeightInWorkbench() {
       return (
-        this.getPXUnderScale(this.bigscreenHeight) + this.widthPaddingTools
+        getPXUnderScale(this.bigscreenScaleInWorkbench, this.bigscreenHeight) +
+        this.widthPaddingTools
       );
     }
   },
   watch: {
     widgets: {
       handler(val) {
-        this.handlerLayerWidget(val);
+        this.layerWidget = handlerLayerWidget(val, getToolByCode);
         //以下部分是记录历史
         this.$nextTick(() => {
           this.revoke.push(this.widgets);
@@ -371,226 +392,22 @@ export default {
     initScreen() {
       this.widgetOptions = screenConfig["options"];
     },
-
-    /**
-     * @description: 恢复
-     * @param {*}
-     * @return {*}
-     */
-    handleUndo() {
-      const record = this.revoke.undo();
-      if (!record) {
-        return false;
-      }
-      this.widgets = record;
-    },
-    /**
-     * @description: 重做
-     * @param {*}
-     * @return {*}
-     */
-    handleRedo() {
-      const record = this.revoke.redo();
-      if (!record) {
-        return false;
-      }
-      this.widgets = record;
-    },
-    handlerLayerWidget(val) {
-      const layerWidgetArr = [];
-      for (let i = 0; i < val.length; i++) {
-        const obj = {};
-        obj.icon = getToolByCode(val[i].type).icon;
-        const options = val[i].options["setup"];
-        options.forEach(el => {
-          if (el.name == "layerName") {
-            obj.label = el.value;
-          }
-        });
-        layerWidgetArr.push(obj);
-      }
-      this.layerWidget = layerWidgetArr;
-    },
+    // 初始化 echrats
     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);
+      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;
     },
-    handleBigScreen(data) {
-      const optionScreen = 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];
-          }
-        }
-      }
-      this.setOptionsOnClickScreen();
-      return {
-        backgroundColor: (data && data.backgroundColor) || "",
-        backgroundImage: (data && data.backgroundImage) || "",
-        height: (data && data.height) || "1080",
-        title: (data && data.title) || "",
-        width: (data && data.width) || "1920"
-      };
-    },
-    handleInitEchartsData(data) {
-      const widgets = data.dashboard ? data.dashboard.widgets : [];
-      const widgetsData = [];
-      for (let i = 0; i < widgets.length; i++) {
-        let obj = {};
-        obj.type = widgets[i].type;
-        obj.value = {
-          setup: widgets[i].value.setup,
-          data: widgets[i].value.data,
-          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) {
-      for (const key in data.setup) {
-        for (let i = 0; i < option.setup.length; i++) {
-          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];
-                }
-              });
-            }
-          }
-        }
-      }
-      // position
-      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];
-          }
-        }
-      }
-      // data
-      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];
-          }
-        }
-      }
-      return option;
-    },
-    // 保存数据
-    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: "/bigscreen/viewer",
-        query: { reportCode: this.$route.query.reportCode }
-      });
-      window.open(routeUrl.href, "_blank");
-    },
-    //  导出
-    async exportDashboard(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);
-        }
-      });
-    },
-    // 上传成功的回调
-    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"
-      });
-    },
-
-    // 在缩放模式下的大小
-    getPXUnderScale(px) {
-      return this.bigscreenScaleInWorkbench * px;
-    },
 
     // 拖动一个组件放到工作区中去，在拖动结束时，放到工作区对应的坐标点上去
     widgetOnDragged(evt, widgetCode) {
@@ -626,7 +443,7 @@ export default {
         options: tool.options
       };
       // 处理默认值
-      const widgetJsonValue = this.handleDefaultValue(widgetJson);
+      const widgetJsonValue = handleDefaultValue(widgetJson);
 
       //2022年02月22日 修复：可以拖拽放到鼠标的位置
       widgetJsonValue.value.position.left =
@@ -639,62 +456,17 @@ export default {
       // 激活新组件的配置属性
       this.setOptionsOnClickWidget(this.widgets.length - 1);
     },
-
-    // 对组件默认值处理
-    handleDefaultValue(widgetJson) {
-      for (const key in widgetJson) {
-        if (key == "options") {
-          // collapse、data、position、setup
-          // setup 处理
-          for (let i = 0; i < widgetJson.options.setup.length; i++) {
-            const item = widgetJson.options.setup[i];
-            if (Object.prototype.toString.call(item) == "[object Object]") {
-              widgetJson.value.setup[item.name] = item.value;
-            } else if (
-              Object.prototype.toString.call(item) == "[object Array]"
-            ) {
-              for (let j = 0; j < item.length; j++) {
-                const list = item[j].list;
-                list.forEach(el => {
-                  widgetJson.value.setup[el.name] = el.value;
-                });
-              }
-            }
-          }
-          // position
-          for (let i = 0; i < widgetJson.options.position.length; i++) {
-            const item = widgetJson.options.position[i];
-            if (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];
-              if (item.value) {
-                widgetJson.value.data[item.name] = item.value;
-              }
-            }
-          }
-        }
-      }
-      return widgetJson;
-    },
-    layerClick(index) {
-      this.widgetIndex = index;
-      this.widgetsClick(index);
-    },
     // 如果是点击大屏设计器中的底层，加载大屏底层属性
     setOptionsOnClickScreen() {
       this.screenCode = "screen";
       // 选中不同的组件 右侧都显示第一栏
       this.activeName = "first";
-      this.widgetOptions = getToolByCode("screen")["options"];
+      this.widgetOptions = screenConfig["options"];
     },
 
     // 如果是点击某个组件，获取该组件的配置项
     setOptionsOnClickWidget(obj) {
+      console.log(obj);
       this.screenCode = "";
       if (typeof obj == "number") {
         this.widgetOptions = this.deepClone(this.widgets[obj]["options"]);
@@ -759,7 +531,7 @@ export default {
         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);
+            setDefaultValue(this.widgets[i].options[key], val);
           }
         }
       }
@@ -778,38 +550,116 @@ export default {
       this.visibleContentMenu = true;
       return false;
     },
-    setDefaultValue(options, val) {
-      for (let i = 0; i < options.length; i++) {
-        if (Object.prototype.toString.call(options[i]) == "[object Object]") {
-          for (const k in val) {
-            if (options[i].name == k) {
-              options[i].value = val[k];
-            }
-          }
-        } else if (
-          Object.prototype.toString.call(options[i]) == "[object Array]"
-        ) {
-          for (let j = 0; j < options[i].length; j++) {
-            const list = options[i][j].list;
-            for (let z = 0; z < list.length; z++) {
-              for (const k in val) {
-                if (list[z].name == k) {
-                  list[z].value = val[k];
-                }
-              }
-            }
-          }
-        }
-      }
-    },
     datadragEnd(evt) {
       evt.preventDefault();
-      this.widgets = this.swapArr(this.widgets, evt.oldIndex, evt.newIndex);
+      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: "/bigscreen/viewer",
+        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"
+      });
     },
-    // 数组 元素互换位置
-    swapArr(arr, oldIndex, newIndex) {
-      arr[oldIndex] = arr.splice(newIndex, 1, arr[oldIndex])[0];
-      return arr;
+    // 导出
+    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() {

report-ui/src/views/screenDesigner/util/common.js

@@ -1,6 +1,4 @@
-
 export const converArr = (data) => {
-  console.log(data)
   let tempArr = [], newArr = []
   for (let i = 0; i < data.length; i++) {
     const item = data[i]

report-ui/src/views/screenDesigner/util/screen.js

@@ -0,0 +1,179 @@
+export const handlerLayerWidget = (val, getToolByCode) => {
+  const layerWidgetArr = [];
+  for (let i = 0; i < val.length; i++) {
+    const obj = {};
+    obj.icon = getToolByCode(val[i].type).icon;
+    const options = val[i].options["setup"];
+    options.forEach(el => {
+      if (el.name == "layerName") {
+        obj.label = el.value;
+      }
+    });
+    layerWidgetArr.push(obj);
+  }
+  return layerWidgetArr;
+}
+
+export const handleBigScreen = (data, getToolByCode, callBcak) => {
+  const optionScreen = 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];
+      }
+    }
+  }
+  callBcak();
+  return {
+    backgroundColor: (data && data.backgroundColor) || "",
+    backgroundImage: (data && data.backgroundImage) || "",
+    height: (data && data.height) || "1080",
+    title: (data && data.title) || "",
+    width: (data && data.width) || "1920"
+  };
+}
+
+
+export const handleInitEchartsData = (data, getToolByCode) => {
+  const widgets = data.dashboard ? data.dashboard.widgets : [];
+  const widgetsData = [];
+  for (let i = 0; i < widgets.length; i++) {
+    let obj = {};
+    obj.type = widgets[i].type;
+    obj.value = {
+      setup: widgets[i].value.setup,
+      data: widgets[i].value.data,
+      position: widgets[i].value.position
+    };
+    const tool = deepClone(getToolByCode(widgets[i].type))
+    const option = tool.options;
+    const options = handleOptionsData(widgets[i].value, option);
+    obj.options = options;
+    widgetsData.push(obj);
+  }
+  return widgetsData;
+}
+
+
+export const handleOptionsData = (data, option) => {
+  for (const key in data.setup) {
+    for (let i = 0; i < option.setup.length; i++) {
+      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];
+            }
+          });
+        }
+      }
+    }
+  }
+  // position
+  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];
+      }
+    }
+  }
+  // data
+  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];
+      }
+    }
+  }
+  return option;
+}
+
+// 在缩放模式下的大小
+export const getPXUnderScale = (bigscreenScaleInWorkbench, px) => {
+  return bigscreenScaleInWorkbench * px;
+}
+
+// 对组件默认值处理
+export const handleDefaultValue = (widgetJson) => {
+  for (const key in widgetJson) {
+    if (key == "options") {
+      // collapse、data、position、setup
+      // setup 处理
+      for (let i = 0; i < widgetJson.options.setup.length; i++) {
+        const item = widgetJson.options.setup[i];
+        if (Object.prototype.toString.call(item) == "[object Object]") {
+          widgetJson.value.setup[item.name] = item.value;
+        } else if (
+          Object.prototype.toString.call(item) == "[object Array]"
+        ) {
+          for (let j = 0; j < item.length; j++) {
+            const list = item[j].list;
+            list.forEach(el => {
+              widgetJson.value.setup[el.name] = el.value;
+            });
+          }
+        }
+      }
+      // position
+      for (let i = 0; i < widgetJson.options.position.length; i++) {
+        const item = widgetJson.options.position[i];
+        if (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];
+          if (item.value) {
+            widgetJson.value.data[item.name] = item.value;
+          }
+        }
+      }
+    }
+  }
+  return widgetJson;
+}
+
+// 设置默认
+export const setDefaultValue = (options, val) => {
+  for (let i = 0; i < options.length; i++) {
+    if (Object.prototype.toString.call(options[i]) == "[object Object]") {
+      for (const k in val) {
+        if (options[i].name == k) {
+          options[i].value = val[k];
+        }
+      }
+    } else if (
+      Object.prototype.toString.call(options[i]) == "[object Array]"
+    ) {
+      for (let j = 0; j < options[i].length; j++) {
+        const list = options[i][j].list;
+        for (let z = 0; z < list.length; z++) {
+          for (const k in val) {
+            if (list[z].name == k) {
+              list[z].value = val[k];
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+// 数组 元素互换位置
+export const swapArr = (arr, oldIndex, newIndex) => {
+  arr[oldIndex] = arr.splice(newIndex, 1, arr[oldIndex])[0];
+  return arr;
+}
+
+export const deepClone = (obj) => {
+  return JSON.parse(JSON.stringify(obj))
+}

report-ui/src/views/screenDesigner/widget/barCharts/widgetBarchart.vue

@@ -0,0 +1,367 @@
+<template>
+  <div :style="styleObj">
+    <v-chart :options="options" autoresize />
+  </div>
+</template>
+
+<script>
+export default {
+  name: "WidgetBarchart",
+  components: {},
+  props: {
+    value: Object,
+    ispreview: Boolean
+  },
+  data() {
+    return {
+      options: {
+        grid: {},
+        legend: {
+          textStyle: {
+            color: "#fff"
+          }
+        },
+        xAxis: {
+          type: "category",
+          data: [],
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff"
+            }
+          }
+        },
+        yAxis: {
+          type: "value",
+          data: [],
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff"
+            }
+          }
+        },
+        series: [
+          {
+            data: [],
+            type: "bar",
+            barGap: "0%",
+            itemStyle: {
+              borderRadius: null
+            }
+          }
+        ]
+      },
+      optionsStyle: {}, // 样式
+      optionsData: {}, // 数据
+      optionsSetup: {},
+      flagInter: null
+    };
+  },
+  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
+      };
+    }
+  },
+  watch: {
+    value: {
+      handler(val) {
+        this.optionsStyle = val.position;
+        this.optionsData = val.data;
+        this.optionsCollapse = val.setup;
+        this.optionsSetup = val.setup;
+        this.editorOptions();
+      },
+      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();
+  },
+  methods: {
+    // 修改图标options属性
+    editorOptions() {
+      this.setOptionsTitle();
+      this.setOptionsX();
+      this.setOptionsY();
+      this.setOptionsTop();
+      this.setOptionsTooltip();
+      this.setOptionsMargin();
+      this.setOptionsColor();
+      this.setOptionsData();
+    },
+    // 标题修改
+    setOptionsTitle() {
+      const optionsSetup = this.optionsSetup;
+      const title = {};
+      title.text = optionsSetup.titleText;
+      title.show = optionsSetup.isNoTitle;
+      title.left = optionsSetup.textAlign;
+      title.textStyle = {
+        color: optionsSetup.textColor,
+        fontSize: optionsSetup.textFontSize,
+        fontWeight: optionsSetup.textFontWeight
+      };
+      title.subtext = optionsSetup.subText;
+      title.subtextStyle = {
+        color: optionsSetup.subTextColor,
+        fontWeight: optionsSetup.subTextFontWeight,
+        fontSize: optionsSetup.subTextFontSize
+      };
+
+      this.options.title = title;
+    },
+    // X轴设置
+    setOptionsX() {
+      const optionsSetup = this.optionsSetup;
+      const xAxis = {
+        type: "category",
+        show: optionsSetup.hideX, // 坐标轴是否显示
+        name: optionsSetup.xName, // 坐标轴名称
+        nameTextStyle: {
+          color: optionsSetup.xNameColor,
+          fontSize: optionsSetup.xNameFontSize
+        },
+        nameRotate: optionsSetup.textAngle, // 文字角度
+        inverse: optionsSetup.reversalX, // 轴反转
+        axisLabel: {
+          show: true,
+          interval: optionsSetup.textInterval, // 文字角度
+          rotate: optionsSetup.textAngle, // 文字角度
+          textStyle: {
+            color: optionsSetup.Xcolor, // x轴 坐标文字颜色
+            fontSize: optionsSetup.fontSizeX
+          }
+        },
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: optionsSetup.lineColorX
+          }
+        },
+        splitLine: {
+          show: optionsSetup.isShowSplitLineX,
+          lineStyle: {
+            color: optionsSetup.splitLineColorX
+          }
+        }
+      };
+      this.options.xAxis = xAxis;
+    },
+    // Y轴设置
+    setOptionsY() {
+      const optionsSetup = this.optionsSetup;
+      const yAxis = {
+        type: "value",
+        scale: optionsSetup.scale,
+        splitNumber: optionsSetup.splitNumber, // 均分
+        show: optionsSetup.isShowY, // 坐标轴是否显示
+        name: optionsSetup.textNameY, // 坐标轴名称
+        nameTextStyle: {
+          color: optionsSetup.nameColorY,
+          fontSize: optionsSetup.nameFontSizeY
+        },
+        inverse: optionsSetup.reversalY, // 轴反转
+        axisLabel: {
+          show: true,
+          rotate: optionsSetup.ytextAngle, // 文字角度
+          textStyle: {
+            color: optionsSetup.colorY, // x轴 坐标文字颜色
+            fontSize: optionsSetup.fontSizeY
+          }
+        },
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: optionsSetup.lineColorY
+          }
+        },
+        splitLine: {
+          show: optionsSetup.isShowSplitLineY,
+          lineStyle: {
+            color: optionsSetup.splitLineColorY
+          }
+        }
+      };
+
+      this.options.yAxis = yAxis;
+    },
+    // 数值设定 or 柱体设置
+    setOptionsTop() {
+      const optionsSetup = this.optionsSetup;
+      const series = this.options.series;
+      if (series[0].type == "bar") {
+        if (optionsSetup.verticalShow) {
+          series[0].label = {
+            show: optionsSetup.isShow,
+            position: "right",
+            distance: optionsSetup.distance,
+            textStyle: {
+              fontSize: optionsSetup.fontSize,
+              color: optionsSetup.subTextColor,
+              fontWeight: optionsSetup.fontWeight
+            }
+          };
+        } else {
+          series[0].label = {
+            show: optionsSetup.isShow,
+            position: "top",
+            distance: optionsSetup.distance,
+            fontSize: optionsSetup.fontSize,
+            color: optionsSetup.subTextColor,
+            fontWeight: optionsSetup.fontWeight
+          };
+        }
+      }
+      series[0].barWidth = optionsSetup.maxWidth;
+      series[0].barMinHeight = optionsSetup.minHeight;
+    },
+    // tooltip 设置
+    setOptionsTooltip() {
+      const optionsSetup = this.optionsSetup;
+      const tooltip = {
+        trigger: "item",
+        show: true,
+        textStyle: {
+          color: optionsSetup.lineColor,
+          fontSize: optionsSetup.tipsFontSize
+        }
+      };
+      this.options.tooltip = tooltip;
+    },
+    // 边距设置
+    setOptionsMargin() {
+      const optionsSetup = this.optionsSetup;
+      const grid = {
+        left: optionsSetup.marginLeft,
+        right: optionsSetup.marginRight,
+        bottom: optionsSetup.marginBottom,
+        top: optionsSetup.marginTop,
+        containLabel: true
+      };
+      this.options.grid = grid;
+    },
+    // 图例颜色修改
+    setOptionsColor() {
+      const optionsSetup = this.optionsSetup;
+      const customColor = optionsSetup.customColor;
+      if (!customColor) return;
+      const arrColor = [];
+      for (let i = 0; i < customColor.length; i++) {
+        arrColor.push(customColor[i].color);
+      }
+      const itemStyle = {
+        normal: {
+          color: params => {
+            return arrColor[params.dataIndex];
+          },
+          barBorderRadius: optionsSetup.radius
+        }
+      };
+      for (const key in this.options.series) {
+        if (this.options.series[key].type == "bar") {
+          this.options.series[key].itemStyle = itemStyle;
+        }
+      }
+      this.options = Object.assign({}, this.options);
+    },
+    // 数据解析
+    setOptionsData() {
+      const optionsSetup = this.optionsSetup;
+      const optionsData = this.optionsData; // 数据类型 静态 or 动态
+      optionsData.dataType == "staticData"
+        ? this.staticDataFn(optionsData.staticData)
+        : this.dynamicDataFn(
+            optionsData.dynamicData,
+            optionsData.refreshTime,
+            optionsSetup
+          );
+    },
+    // 静态数据
+    staticDataFn(val) {
+      const optionsSetup = this.optionsSetup;
+      const series = this.options.series;
+      let axis = [];
+      let data = [];
+      for (const i in val) {
+        axis[i] = val[i].axis;
+        data[i] = val[i].data;
+      }
+      // x轴
+      if (optionsSetup.verticalShow) {
+        this.options.xAxis.data = [];
+        this.options.yAxis.data = axis;
+        this.options.xAxis.type = "value";
+        this.options.yAxis.type = "category";
+      } else {
+        this.options.xAxis.data = axis;
+        this.options.yAxis.data = [];
+        this.options.xAxis.type = "category";
+        this.options.yAxis.type = "value";
+      }
+      if (series[0].type == "bar") {
+        series[0].data = data;
+      }
+    },
+    // 动态数据
+    dynamicDataFn(val, refreshTime, optionsSetup) {
+      if (!val) return;
+      if (this.ispreview) {
+        this.getEchartData(val, optionsSetup);
+        this.flagInter = setInterval(() => {
+          this.getEchartData(val, optionsSetup);
+        }, refreshTime);
+      } else {
+        this.getEchartData(val, optionsSetup);
+      }
+    },
+    getEchartData(val, optionsSetup) {
+      const data = this.queryEchartsData(val);
+      data.then(res => {
+        this.renderingFn(optionsSetup, res);
+      });
+    },
+    renderingFn(optionsSetup, val) {
+      // x轴
+      if (optionsSetup.verticalShow) {
+        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";
+      }
+      // series
+      const series = this.options.series;
+      for (const i in series) {
+        if (series[i].type == "bar") {
+          series[i].name = val.series[i].name;
+          series[i].data = val.series[i].data;
+        }
+      }
+    }
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.echarts {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+</style>

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

@@ -24,6 +24,7 @@ import widgetTable from "./texts/widgetTable.vue";
 import widgetText from "./texts/widgetText.vue";
 import widgetTime from "./texts/widgetTime.vue";
 import widgetVideo from "./texts/widgetVideo.vue";
+import widgetBarchart from "./barCharts/widgetBarchart.vue";
 
 export default {
   name: "Widget",
@@ -36,7 +37,8 @@ export default {
     widgetTable,
     widgetText,
     widgetTime,
-    widgetVideo
+    widgetVideo,
+    widgetBarchart
   },
   model: {
     prop: "value",

report-ui/src/views/screenDesigner/widget/texts/widgetHref.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>
   <a
     :href="styleColor.linkAdress"