{"remainingRequest":"D:\\jenkins\\workspace\\xq-web-bpm\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\jenkins\\workspace\\xq-web-bpm\\src\\tripartite\\buildBigScreen\\src\\page\\build.vue?vue&type=script&lang=js&","dependencies":[{"path":"D:\\jenkins\\workspace\\xq-web-bpm\\src\\tripartite\\buildBigScreen\\src\\page\\build.vue","mtime":1675071992616},{"path":"D:\\jenkins\\workspace\\xq-web-bpm\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"D:\\jenkins\\workspace\\xq-web-bpm\\node_modules\\thread-loader\\dist\\cjs.js","mtime":499162500000},{"path":"D:\\jenkins\\workspace\\xq-web-bpm\\node_modules\\babel-loader\\lib\\index.js","mtime":315532800000},{"path":"D:\\jenkins\\workspace\\xq-web-bpm\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"D:\\jenkins\\workspace\\xq-web-bpm\\node_modules\\vue-loader\\lib\\index.js","mtime":499162500000}],"contextDependencies":[],"result":["//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n\r\nimport MonacoEditor from '@/tripartite/buildBigScreen/src/page/components/editor'\r\nimport layer from './group/layer'\r\nimport top from './group/top'\r\nimport imglist from './group/imglist'\r\nimport contentmenu from './group/contentmenu'\r\nimport codeedit from './group/code'\r\nimport {dicOption} from '@/tripartite/buildBigScreen/src/option/config'\r\nimport init from '@/tripartite/buildBigScreen/src/mixins/'\r\nimport {uuid} from '@/tripartite/buildBigScreen/src/utils/utils'\r\nimport components from '@/tripartite/buildBigScreen/src/option/components'\r\nimport SketchRule from 'vue-sketch-ruler'\r\nimport {getList} from '@/tripartite/buildBigScreen/src/api/db'\r\nimport crypto from '@/tripartite/buildBigScreen/src/utils/crypto'\r\nimport report from '@/api/report.js'\r\nimport '@/tripartite/buildBigScreen/src/mock/'\r\nimport portal from \"@/api/portal.js\"\r\nexport default {\r\n  mixins: [init, components],\r\n  data() {\r\n    return {\r\n      show: false,\r\n      keys: {\r\n        ctrl: false\r\n      },\r\n      dataRes: '',\r\n      db: '',\r\n      sql: '',\r\n      nav: [],\r\n      json: {},\r\n      DIC: {\r\n        sql: []\r\n      },\r\n      loading: '',\r\n      childProps: {\r\n        label: 'name',\r\n        value: 'index'\r\n      },\r\n      key: '',\r\n      menuFlag: true,\r\n      code: {\r\n        box: false,\r\n        type: '',\r\n        obj: ''\r\n      },\r\n      form: {},\r\n      dicOption: dicOption,\r\n      tabsActive: 0,\r\n      // 标尺\r\n      scale: 0.9, //初始化标尺的缩放\r\n      startX: 0, //x轴标尺开始的坐标数值\r\n      startY: 0,\r\n      lines: {\r\n        //初始化水平标尺上的参考线\r\n        h: [],\r\n        v: []\r\n      },\r\n      rendIndex: 0, //重新渲染组件\r\n      shadow: {x: 0, y: 0}, // 阴影大小\r\n      thick: 20, //标尺的厚度\r\n      width: 0, // 标尺宽,后面会初始化\r\n      height: 0, // 标尺高,后面会初始化\r\n      isShowReferLine: true, // 显示参考线\r\n      isImgOpen: true, //眼镜打开\r\n      imgOpenData:\r\n        'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbCAYAAAAOEM1uAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAQNSURBVHja7JdvSON1HMdfP126/shSmaZ1ntuZbTLihOnSdJlPhIquB0VR1DZM9En0wCB3qCXKVOh86mmakdGDOqyHityBidYN1HPYZqbhOZprMGTOUk/9/XryWyxvek5NIu4Lg/H+fPj8Xt/P98/n8xUkSeK/PIT7gP8GoCAI8cTQAoWAHkgFRCAA3AKmgeBRA8VkOSZgMvAy8DZQCqQf4OcFRoDPgYmzAnwdaAAuxpFlCbgGfAR4ThUwYhcE4QngExnw71FWVuax2WwBk8mkSE9PV+7t7Ymrq6vbw8PD0uDgYO7CwsK5KPc14ENJkj497FtxAwqCYAK+kvcbANXV1U6Hw6HIyMh4GlAckJHwzMzMrM1my3a5XNoo01XgPUmSdk8MCLwEfAmoAPLz872jo6OrOTk5xVGBQ0tLS575+fnt7OzsRIPBcD4pKelctL2/v3+mtrbWLIpigixfA94BNk8C+JoMlyRn7WZvb68mISEhI+IQCASmKyoq0jweT25EU6lU4aGhoZnKykpzdNzl5eWbRqPxyWAwmCZL3wJvAHeOA/iCPMsHARwOx7jdbi+JXs7t7e3lrKys1LW1NVWsJXa73ZN6vb40WltfX3cbDIZ0r9ebKUv9wLvxAhYC1+V7je7u7rG6urrn9vu1tbWNNzU1lR90KgsLC5emp6cfB5TRejgc9mg0msyoTNYDXfEAjgFmQGxpaZlobm6OBbFrMpl+dTqd+YdcLztbW1ve5ORk7X6D3++f0ul0+aFQKAXYAF6RJOn6UQGDQBrgE0VRJQjCw7EAjUbj8tTUVN4hgLubm5u3lUrlhVjG+vr6ya6ursgWaJck6fJRAW8AzwNia2vrRGNjY8xltNvtEx0dHc8eRKfX62+73W418NB+m8/nm9LpdE+Fw+FHgD+AS/Fk8CJwI7IHe3t7x2pqau7agxsbG/NqtTp3a2tLGQtwcnJyvKSk5K7JhcPhnzQaTXYwGEyVpQ+AK8c5xd9EZt/e3v59Q0ND6f5LeXFx8cfy8vILfr9fHdEUCsVOX1/fhMViqdgfOxQKzRUUFKh9Pt+JTnHk76vyPZgcqR49PT3nExMTM/+x0XZ3fePj47/Mzc2RlZVFVVVVRkpKin5/3JWVFWdRUVFeIBCInN7v5NJ55ySV5EUZ8lEArVb728jIiDcvL++ZONqo0MDAwK2ampoyURQTZXlI7ob+PI1aXAR8AegiutVqdXZ2dt6zFs/OzrosFstjLpcr+iR3A+9LkrRzKs2CrGUCV4C3on3NZrPHarX+Xlxc/MARu5nLkiRdPbVuJsa4BDQCxjj6QRH4GvgY+PksOmqF3FG/KVcc9T066s+AH86y5Y8eOXI282XQyJtkRv6d/pvk/rPz/wT41wBibRrpeMs+PAAAAABJRU5ErkJggg==', // 左上角图片\r\n      imgClose:\r\n        'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAPYSURBVHja7JVPTFRXFIe/+96gGRHEhQzBFMJKSKSkLTgtGxemSXcktohW2RBmTAjUClIYZ6Cxi+fQDgOCLJgJhqTSBAtLdjaxaSqQWnDSNp2U0I6FFh0SDdV0oMx7pwuZCUXjnyZNuvBsbnLvufe7555zfleJCP+1qReQfwVRSqWmqoFDIE3A+iZXQDbGlMmmNTatP5xPn/0ohOOgLgNtIB8DOlAKvAzsBTKBP4FF4Dvge1DrzwsBaAAuAJ8CxbpuezU/P397QcFLZGVlcf/+fRYXF1lc/G3VNJM/AJ8Dw8CdZ4QoQI4AIWBXaWkpQ0ND5v79+zW73Z5+n9XVVWZnb8rExIQ2MnKZWCz2M/Dhw1d4eiTngXafz2dmZ2ebPp9P6+vrl5qaI2p8fFyi0aheUlJiHj78tpaTs0sHJB6PW4HAJ3og0I2I+AHPkyAeu91uDA4OmrW1tRpAT09vsr29XXM4ciWZTJKXl2ctLCyoHTsy1ZUro+J0OjNSWR8ZGbFcLpeeSCTOAucfBykDpvr7+7c3NjamS+bevXvJ4uIS4vE7tra2tjW/32+7ffu21Ne7rJmZb7VIJKL27Nmjp0ADAwM0NjauAW+IyM2tkAGn8/WG69e/NjVNS20iHA6vd3Z2qrq6OtMwDFswGLROnz6dcffu3WRRUZEVCARwuVzbUv6WZVmVlZXa9PT0RRFp2gq56na7Dw0ODv6jGc6cOWNdu/Zl8saNb/RgMGi1tLSo7u5uaW5u1srLK8yDBw/aursD2ubmcbtPqnA4dFVE3twKuVBeXv7e5OSkabPZ0pGEQuG/WltbicV+0Xbv3m0LBnvWW1qatbNnvclLl4b0c+c+ErfblcoLa2trptPp1CORSEBEWrdCSoBpwzB2ejyedE6Wl5fNsrIyqaiokFAopBwOh/J4PKbf79/mcDiS0WiUnJwcWyoKr9erDMNYBg6ISOxx1dWg6/pAb2+vtZF8DWBqanr96NEalUgkpKCgQJaWljRN04jH43R1dcmpU6dsgBiGobxer3qoGnz2pD5pBfx1dXWaz+czi4qKNECtrKyYY2NjVjQa1fftK7aqq99hdHRUmpqaVEdHhzU/P58xPDycAN4Hws8iK28B/tzc3LJjx96lqqrKOnCggszMzLRmPHjwQM3MzFj19fX63NwcwDJQBUymK+ApEEDtBDkOnFBKvZafv9deWFhIdnYWKysr3Lr1K0tLvydE5CvgJ1AnQZqBi88DSV1aA0qAV4CCDRX+A1gAZoEfN/w/ALqAEyAjzwvZ8mc8KukblgGqD/gCZOyxkBd//P8G8vcAMK383pmr7aEAAAAASUVORK5CYII=',\r\n      dragSlide: false // 拖动滚动条标记\r\n    }\r\n  },\r\n  components: {\r\n    MonacoEditor,\r\n    imglist,\r\n    layer,\r\n    codeedit,\r\n    top,\r\n    contentmenu,\r\n    SketchRule\r\n  },\r\n  computed: {\r\n    isStatic() {\r\n      return this.activeObj.dataType == 0\r\n    },\r\n    isApi() {\r\n      return this.activeObj.dataType == 1\r\n    },\r\n    isSql() {\r\n      return this.activeObj.dataType == 2\r\n    },\r\n    isFolder() {\r\n      return this.activeObj.children\r\n    },\r\n    isActive() {\r\n      return this.active.length !== 0\r\n    },\r\n    isSelectActive() {\r\n      return this.active.length > 1\r\n    },\r\n    childList() {\r\n      return this.list.filter(ele => {\r\n        if (['tabs'].includes(ele.component.prop)) {\r\n          return false\r\n        }\r\n        return true\r\n      })\r\n    },\r\n    activeComponent() {\r\n      return this.activeObj.component || {}\r\n    },\r\n    activeOption() {\r\n      return this.activeObj.option || {}\r\n    },\r\n    activeObj() {\r\n      let result\r\n      // console.log(this.validatenull, 'ttttttt')\r\n      if (this.validatenull(this.active)) {\r\n        return {}\r\n      }\r\n      // console.log(this.active, 'rrrrrrrr')\r\n      this.active.forEach(ele => {\r\n        const item = this.findnav(ele, true)\r\n        if (this.active.length > 1) {\r\n          if (!result) result = []\r\n          result.push(item.obj)\r\n        } else {\r\n          result = item.obj\r\n        }\r\n      })\r\n      return result\r\n    },\r\n    /* 标尺用的 */\r\n    palette() {\r\n      return {\r\n        bgColor: '#181b24', // ruler bg color\r\n        longfgColor: '#BABBBC', // ruler longer mark color\r\n        shortfgColor: '#9C9C9C', // ruler shorter mark color\r\n        fontColor: '#DEDEDE', // ruler font color\r\n        shadowColor: '#525252', // ruler shadow color\r\n        lineColor: '#EB5648',\r\n        borderColor: '#B5B5B5',\r\n        cornerActiveColor: '#fff'\r\n      }\r\n    },\r\n    // 画布大小,一定要是computer里面,否则缩放页面会失效\r\n    canvasStyle() {\r\n      return {\r\n        width: window.innerWidth - 530 + 'px',\r\n        transform: `scale(${this.scale})`\r\n      }\r\n    }\r\n  },\r\n  watch: {\r\n    activeObj: {\r\n      handler(val) {\r\n        if (this.activeObj.sql && this.isSql) {\r\n          let mode = JSON.parse(crypto.decrypt(this.activeObj.sql))\r\n          this.db = mode.id\r\n          this.sql = mode.sql\r\n        } else {\r\n          this.db = ''\r\n          this.sql = ''\r\n        }\r\n      },\r\n      deep: true\r\n    },\r\n    menuFlag() {\r\n      this.setResize()\r\n    },\r\n    overactive(n, o) {\r\n      ;[o, n].forEach((ele, index) => {\r\n        if (!ele) return\r\n        this.setActive(ele, index === 1, 'setOverActive')\r\n      })\r\n    },\r\n    active(n, o) {\r\n      ;[o, n].forEach((ele, index) => {\r\n        ele.forEach(item => {\r\n          this.setActive(item, index === 1, 'setActive')\r\n        })\r\n      })\r\n      //隐藏右键菜单\r\n      this.$refs.contentmenu.hide()\r\n      // 初始化选项卡\r\n      this.tabsActive = '0'\r\n    }\r\n  },\r\n  created() {\r\n    this.listen()\r\n    this.iniresize()\r\n    this.initSqlList()\r\n  },\r\n  mounted() {\r\n    this.initFun()\r\n    this.$nextTick(() => {\r\n      this.initSize()\r\n    })\r\n  },\r\n  methods: {\r\n    handleRefresh() {\r\n      return this.$refs.container.handleRefresh()\r\n    },\r\n    handleRes() {\r\n      if (this.isSql) {\r\n        this.$set(\r\n          this.activeObj,\r\n          'sql',\r\n          crypto.encrypt(\r\n            JSON.stringify({\r\n              id: this.db,\r\n              sql: this.sql\r\n            })\r\n          )\r\n        )\r\n      }\r\n      report.dataSourceRefresh().then(res => {\r\n        if (!this.validatenull(res)) {\r\n          this.dataRes = JSON.stringify(res || {}, null, 4)\r\n        } else {\r\n          this.dataRes = ''\r\n        }\r\n        this.$message.success('数据刷新成功')\r\n      })\r\n    },\r\n    handleSql() {\r\n      this.show = true\r\n      this.dataRes = ''\r\n    },\r\n    //获取外部数据源\r\n    initSqlList() {\r\n      portal\r\n        .getDataSourcePageJson({pageBean: {page: 1, pageSize: 50, total: 0}})\r\n        .then(res => {\r\n          const data = res.rows\r\n          // console.log(data, 'djfljfklsjflksjfsncsldnc')\r\n          this.DIC.sql = data.map(ele => {\r\n            return {\r\n              label: ele.name,\r\n              value: ele.id\r\n            }\r\n          })\r\n        })\r\n      // getList(1, 100).then(res => {\r\n      //   const data = res.data.data;\r\n      //   this.DIC.sql = data.records.map(ele => {\r\n      //     return {\r\n      //       label: ele.name,\r\n      //       value: ele.id\r\n      //     }\r\n      //   })\r\n      // });\r\n    },\r\n    codeClose(value) {\r\n      if (this.code.type === 'query') {\r\n        this.config.query = value\r\n      } else {\r\n        this.activeObj[this.code.type] = value\r\n      }\r\n    },\r\n    openCode(type) {\r\n      this.code.type = type\r\n      if (type === 'query') {\r\n        this.code.obj = this.config.query\r\n      } else {\r\n        this.code.obj = this.activeObj[type]\r\n      }\r\n      this.code.box = true\r\n    },\r\n    initFun() {\r\n      ;['setScale', 'setResize'].forEach(ele => {\r\n        this[ele] = this.$refs.container[ele]\r\n      })\r\n      ;['handleAdd'].forEach(ele => {\r\n        this[ele] = this.$refs.top[ele]\r\n      })\r\n    },\r\n    // 右键菜单\r\n    handleContextMenu(e, item = {}) {\r\n      if (!item.index) {\r\n        return\r\n      }\r\n      if (!this.isSelectActive) {\r\n        this.active = [item.index]\r\n      }\r\n      setTimeout(() => {\r\n        this.$refs.contentmenu.show(e.clientX, e.clientY)\r\n      }, 0)\r\n    },\r\n    //监听键盘的按键\r\n    listen() {\r\n      document.onkeydown = e => {\r\n        if (e.target.nodeName == 'TEXTAREA' || e.target.nodeName == 'INPUT') {\r\n          return\r\n        }\r\n        // 按下空格键\r\n        if (e.keyCode == 32) {\r\n          e.preventDefault()\r\n          this.keys.space = true\r\n        }\r\n        // 如果是delete按键,那么调用删除组件按钮\r\n        if (e.keyCode === 46) {\r\n          this.deleteMethod()\r\n        }\r\n        if (e.keyCode === 90) {\r\n          this.editorUndo()\r\n        }\r\n        if (e.keyCode === 89) {\r\n          this.editorRedo()\r\n        }\r\n        this.keys.ctrl = e.keyCode === 17\r\n      }\r\n      document.onkeyup = () => {\r\n        this.keys.ctrl = false\r\n      }\r\n    },\r\n    deleteMethod() {\r\n      this.active.forEach(index => {\r\n        const params = this.findnav(index)\r\n        delete params.parent.splice(params.count, 1)\r\n      })\r\n      this.handleInitActive()\r\n    },\r\n    setActive(val, result, fun) {\r\n      const obj = this.$refs.container.handleGetObj(val)\r\n      if (!this.validatenull(obj)) obj[0][fun](result)\r\n    },\r\n    //批量成组\r\n    handleFloder() {\r\n      let floder = {\r\n        title: '文件夹',\r\n        name: '文件夹',\r\n        index: uuid(),\r\n        children: []\r\n      }\r\n      this.active.forEach(index => {\r\n        const params = this.findnav(index)\r\n        floder.children.push(params.obj)\r\n        delete params.parent.splice(params.count, 1)\r\n      })\r\n      this.nav.push(floder)\r\n      this.handleInitActive()\r\n    },\r\n    //批量删除\r\n    handleDeleteSelect() {\r\n      this.$confirm(`是否批量删除所选图层?`, '提示', {\r\n        confirmButtonText: '确定',\r\n        cancelButtonText: '取消',\r\n        type: 'warning'\r\n      }).then(() => {\r\n        this.deleteMethod()\r\n      })\r\n    },\r\n    vaildProp(name, list) {\r\n      if (list) {\r\n        return list.includes(this.activeComponent.prop)\r\n      }\r\n      return this.dicOption[name].includes(this.activeComponent.prop)\r\n    },\r\n    formatTooltip(val) {\r\n      return parseInt(val)\r\n    },\r\n    //打开图库\r\n    handleOpenImg(item, type) {\r\n      this.$refs.imglist.openImg(item, type)\r\n    },\r\n    //图库框回调赋值\r\n    handleSetimg(val, type) {\r\n      if (type === 'activeObj.data') {\r\n        this.activeObj.data = val\r\n      }\r\n      if (type === 'activeObj.data.value') {\r\n        this.activeObj.data.value = val\r\n      } else if (type === 'activeOption.backgroundImage') {\r\n        this.activeOption.backgroundImage = val\r\n      } else if (type === 'activeOption.backgroundBorder') {\r\n        this.activeOption.backgroundBorder = val\r\n      } else if (type === 'activeOption.empBackgroundBorder') {\r\n        this.activeOption.empBackgroundBorder = val\r\n      } else if (type === 'config.backgroundImage') {\r\n        this.config.backgroundImage = val\r\n      } else if (type === 'activeOption.symbol') {\r\n        this.activeOption.symbol = val\r\n      }\r\n    },\r\n    /* **************************标尺方法开始******************************* */\r\n    // 滚轮触发\r\n    handleScroll() {\r\n      const screensRect = this.$refs.screensRef.getBoundingClientRect()\r\n      const canvasRect = this.$refs.canvas.getBoundingClientRect()\r\n      // 标尺开始的刻度\r\n      const startX =\r\n        (screensRect.left + this.thick - canvasRect.left) / this.scale\r\n      const startY =\r\n        (screensRect.top + this.thick - canvasRect.top) / this.scale\r\n      this.startX = startX >> 0\r\n      this.startY = startY >> 0\r\n    },\r\n    // 控制缩放值\r\n    handleWheel(e) {\r\n      if (e.ctrlKey || e.metaKey) {\r\n        e.preventDefault()\r\n        const nextScale = parseFloat(\r\n          Math.max(0.2, this.scale - e.deltaY / 500).toFixed(2)\r\n        )\r\n        this.scale = nextScale\r\n      }\r\n      this.$nextTick(() => {\r\n        this.handleScroll()\r\n      })\r\n    },\r\n    // 初始化标尺数值\r\n    initSize() {\r\n      const domW = this.$refs.wrapper\r\n      // console.log(this.$refs, 'eeeee')\r\n      let width = window.innerWidth - 530\r\n      let height = window.innerHeight - 45\r\n      domW.style.width = width + 'px'\r\n      domW.style.height = height + 'px'\r\n      this.width = width - this.thick\r\n      this.height = height - this.thick\r\n      // 画布阴影部分\r\n      this.shadow = {x: 0, y: 0, width, height}\r\n      // 滚动居中\r\n      let dom = this.$refs.containerRef.getBoundingClientRect()\r\n      this.$refs.screensRef.scrollLeft = dom.width / 2 - this.thick\r\n      this.$refs.screensRef.scrollTop = dom.height / 2 - this.thick\r\n    },\r\n    // resize\r\n    iniresize() {\r\n      window.addEventListener('resize', () => {\r\n        let width = this.width\r\n        let height = this.height\r\n        this.initSize()\r\n        let rate = Math.min(this.width / width, this.height / height)\r\n        this.scale = rate > 1 ? rate * 0.5 : rate\r\n        this.rendIndex++\r\n      })\r\n    },\r\n    // 图片点击事件\r\n    imgClick() {\r\n      this.isShowReferLine = !this.isShowReferLine\r\n    },\r\n    // 鼠标按下事件\r\n    dragMousedown(e) {\r\n      // 如果按下了空格键,且按下鼠标左键,那么鼠标变抓手,开启滚动条随鼠标拖动的操作\r\n      if (this.keys.space) {\r\n        this.dragSlide = true\r\n        window.stardragEvent = e\r\n        window.startSlideX = this.$refs.screensRef.scrollLeft\r\n        window.startSlideY = this.$refs.screensRef.scrollTop\r\n      }\r\n    },\r\n    //鼠标抬起操作\r\n    dragMouseup() {\r\n      this.dragSlide = false\r\n    },\r\n    // 鼠标移动骚操作\r\n    dragMousemove(e) {\r\n      if (this.dragSlide) {\r\n        let x = e.clientX - window.stardragEvent.clientX\r\n        let y = e.clientY - window.stardragEvent.clientY\r\n        this.$refs.screensRef.scrollLeft = window.startSlideX - x\r\n        this.$refs.screensRef.scrollTop = window.startSlideY - y\r\n      }\r\n    }\r\n  }\r\n}\r\n",null]}