软件工程应用于实践：AJ-Report项目源码分析（4）

最新推荐文章于 2023-05-23 17:00:45 发布

qq_51460830

最新推荐文章于 2023-05-23 17:00:45 发布

阅读量674

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_51460830/article/details/122031367

版权

本文主要分析AJ-Report项目中report-uisrcviews eportigscreendesignerindex.vue的代码，涉及VueRulerTool插件在大屏设计页面的应用。内容包括：左侧工具栏组件、大屏设计尺寸、工作台画布、组件保存、选项属性、事件处理等。此外，还讲解了组件拖放、坐标计算、组件属性配置等功能的实现细节。

摘要由CSDN通过智能技术生成

2021SC@SDUSC

本次分析的是report-ui\src\views\report\bigscreen\designer中index.vue中的代码：

以上为代码实现的界面，接下来对代码进行分析：

import {insertDashboard, detailDashboard, importDashboard, exportDashboard} from "@/api/bigscreen";
import {widgetTools, getToolByCode} from "./tools";
import widget from "./widget/widget.vue";
import dynamicForm from "./form/dynamicForm.vue";
import draggable from "vuedraggable";
import VueRulerTool from "vue-ruler-tool"; 
import contentMenu from "./form/contentMenu";
import {getToken} from "@/utils/auth";

export default {
  name: "Login",
  components: {
    draggable,
    VueRulerTool,
    widget,
    dynamicForm,
    contentMenu
  },
  data() {
    return {
      uploadUrl: process.env.BASE_API + '/reportDashboard/import/' + this.$route.query.reportCode,
      grade: false,
      layerWidget: [],
      widgetTools: widgetTools, 
      widthLeftForTools: 200, 
      widthLeftForToolsHideButton: 15,
      widthLeftForOptions: 300, 
      widthPaddingTools: 18,
      toolIsShow: true, 

      bigscreenWidth: 1920, 
      bigscreenHeight: 1080,

      
      dashboard: {
        id: null,
        title: "", 
        width: 1920, 
        height: 1080, 
        backgroundColor: "", 
        backgroundImage: "", 
        refreshSeconds: null, 
        presetLine: [], 
        presetLineVisible: true 
      },
      screenCode: "",
      widgets: [
        {
          type: "widget-text",
          value: {
            setup: {},
            data: {},
            position: {
              width: 100,
              height: 100,
              left: 0,
              top: 0,
              zIndex: 0
            }
          },
          options: []
        }
      ], 
      widgetIndex: 0,
      widgetOptions: {
        setup: [], 
        data: [], 
        position: [] 
      },
      flagWidgetClickStopPropagation: false, 
      styleObj: {
        left: 0,
        top: 0
      },
      visibleContentMenu: false,
      rightClickIndex: -1,
      activeName: "first"
    };
  },
  computed: {
    headers() {
      return {
        Authorization: getToken(), 
      }
    },
    middleWidth() {
      var widthLeftAndRight = 0;
      if (this.toolIsShow) {
        widthLeftAndRight += this.widthLeftForTools; 
      }
      widthLeftAndRight += this.widthLeftForToolsHideButton;
      widthLeftAndRight += this.width