|
|
@@ -0,0 +1,579 @@
|
|
|
+<!-- 电路图编辑器页面 -->
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <div id="components-layout">
|
|
|
+ <a-layout>
|
|
|
+ <!-- {{tableDefaultData}} -->
|
|
|
+ <span v-if="!shrink" @click="exitFullscreen" class="icon-shrink svgfont"
|
|
|
+ ></span
|
|
|
+ >
|
|
|
+ <a-layout class="pageMain">
|
|
|
+ <!-- <a-layout-sider class="leftNav">
|
|
|
+ <LeftToolBar :svgInfoData="svgInfoData"></LeftToolBar>
|
|
|
+ </a-layout-sider> -->
|
|
|
+ <a-layout-content class="centerContain" :class="{ fixed: !shrink }">
|
|
|
+ <div
|
|
|
+ class="canvas-content"
|
|
|
+ id="canvas"
|
|
|
+ @mousemove="MouseMove"
|
|
|
+ @mousedown="MousedownCanvas"
|
|
|
+ @mouseup="MouseupCanvas"
|
|
|
+ @dblclick="DblClick"
|
|
|
+ @mousewheel="MouseWheel"
|
|
|
+ >
|
|
|
+ <!--拖动辅助线-->
|
|
|
+ <div id="guide-x"></div>
|
|
|
+ <div id="guide-y"></div>
|
|
|
+ <!-- 画布 -->
|
|
|
+ <svg
|
|
|
+ version="1.1"
|
|
|
+ xmlns="http://www.w3.org/2000/svg"
|
|
|
+ xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
|
+ style="background-color: rgba(0, 244, 253, 0.1);border: 1px solid rgba(0, 244, 253, 0.1);"
|
|
|
+ width="100%"
|
|
|
+ height="100%"
|
|
|
+ >
|
|
|
+ <defs />
|
|
|
+ <filter x="0" y="0" width="1" height="1" id="solid">
|
|
|
+ <feFlood flood-color="rgb(255,255,255)" />
|
|
|
+ <feComposite in="SourceGraphic" />
|
|
|
+ </filter>
|
|
|
+ <g
|
|
|
+ style="cursor: pointer"
|
|
|
+ v-for="(item, index) in svgLists"
|
|
|
+ :key="item"
|
|
|
+ :id="item.id"
|
|
|
+ :type="item.type"
|
|
|
+ @mousedown="
|
|
|
+ MousedownSvg(
|
|
|
+ item.id,
|
|
|
+ index,
|
|
|
+ item.svgPositionX,
|
|
|
+ item.svgPositionY,
|
|
|
+ $event
|
|
|
+ )
|
|
|
+ "
|
|
|
+ :title="item.title"
|
|
|
+ :transform="
|
|
|
+ 'translate(' +
|
|
|
+ item.svgPositionX +
|
|
|
+ ',' +
|
|
|
+ item.svgPositionY +
|
|
|
+ ')' +
|
|
|
+ 'rotate(' +item.angle+')'
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <SvgComponents
|
|
|
+ :svg_color="item.svgColor"
|
|
|
+ :svgInfoData="svgInfoData"
|
|
|
+ :svgtype="item.type"
|
|
|
+ :stroke-width="item.width"
|
|
|
+ :text="item.svgText"
|
|
|
+ :font-size="item.fontSize"
|
|
|
+ :height="item.height"
|
|
|
+ ></SvgComponents>
|
|
|
+ </g>
|
|
|
+ </svg>
|
|
|
+ </div>
|
|
|
+ </a-layout-content>
|
|
|
+ <!-- <a-layout-sider class="rightNav">
|
|
|
+ <RightToolBar
|
|
|
+ :svgInfo="selectSvgInfo"
|
|
|
+ @setTableAttr="setTableAttr"
|
|
|
+ ></RightToolBar>
|
|
|
+ </a-layout-sider> -->
|
|
|
+ </a-layout>
|
|
|
+ </a-layout>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+// import LeftToolBar from "@/components/LeftToolBar.vue";
|
|
|
+// import RightToolBar from "@/components/RightToolBar.vue";
|
|
|
+// import SvgComponents from '@/components/SvgComponents.vue';
|
|
|
+import global from "@/global/global.js"; //全局变量
|
|
|
+// import admin from '@/global/1.json';//全局变量
|
|
|
+import SvgComponents from "@/components/SvgComponents.vue";
|
|
|
+// import api from "../api/content/CircuitEdit";
|
|
|
+export default {
|
|
|
+ components: { SvgComponents},//LeftToolBar, RightToolBar,
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ svgInfoData: [], //接口获取到的组件数据
|
|
|
+ shrink: true, //收缩状态 true收缩 false展开
|
|
|
+ svgLists: [], //svg列表
|
|
|
+ //鼠标位置
|
|
|
+ mousePosition: {
|
|
|
+ positionX: "",
|
|
|
+ positiony: "",
|
|
|
+ },
|
|
|
+ //辅助线元素
|
|
|
+ guideX: "",
|
|
|
+ guideY: "",
|
|
|
+ CurrentlySelectedToolBar: {
|
|
|
+ Type: "", //选中的工具栏svg类型
|
|
|
+ TypeName: "", //选中的工具栏svg类型名称
|
|
|
+ Title: "", //选中的工具栏svg标题
|
|
|
+ Color: "", //选中的工具栏svg颜色
|
|
|
+ },
|
|
|
+ selectSvg: {
|
|
|
+ ID: "", //要移动的svg
|
|
|
+ Index: 0,
|
|
|
+ mouseStatus: 0, // 鼠标状态 1按下； 0弹起
|
|
|
+ mPositionX: 0, //选中svg时鼠标的x轴坐标
|
|
|
+ mPositionY: 0, //选中svg时鼠标的y轴坐标
|
|
|
+ pointX: 0, //选中svg时svg的x轴坐标
|
|
|
+ pointY: 0, //选中svg时svg的y轴坐标
|
|
|
+ },
|
|
|
+ selectSvgInfo: "",
|
|
|
+ tableRowCount: 2, //表格默认行数
|
|
|
+ tableColCount: 2, //表格默认列数
|
|
|
+ tableDefaultData: [],
|
|
|
+ AnalogData: []
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ MouseMove(e) {
|
|
|
+ let _this = this;
|
|
|
+
|
|
|
+ if (this.selectSvg.mouseStatus == 0) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ const { clientX, clientY } = e;
|
|
|
+
|
|
|
+ let svgID = this.svgLists[this.selectSvg.Index].id;
|
|
|
+ //排除当前元素剩下的所有svg元素的列表
|
|
|
+ let anyPositionList = this.svgLists.filter(function (list) {
|
|
|
+ return list.id != svgID;
|
|
|
+ });
|
|
|
+ //将要移动的元素坐标设备为鼠标坐标
|
|
|
+ let svgPositionX = this.selectSvg.pointX;
|
|
|
+ let svgPositionY = this.selectSvg.pointY;
|
|
|
+ svgPositionX += clientX - this.selectSvg.mPositionX;
|
|
|
+ svgPositionY += clientY - this.selectSvg.mPositionY;
|
|
|
+ setTimeout(function () {
|
|
|
+ //少于十个像素自动吸附
|
|
|
+ //从所有的x坐标列表中查与当前坐标少于10个像素的组件是否存在
|
|
|
+ let exitsAdsorbX = anyPositionList.filter(function (list) {
|
|
|
+ return (
|
|
|
+ -10 < list.svgPositionX - svgPositionX &&
|
|
|
+ list.svgPositionX - svgPositionX < 10
|
|
|
+ );
|
|
|
+ });
|
|
|
+ if (exitsAdsorbX.length > 0) {
|
|
|
+ svgPositionX = exitsAdsorbX[0].svgPositionX;
|
|
|
+ }
|
|
|
+ //y轴相同 横向坐标自动吸附
|
|
|
+ let exitsAdsorbY = anyPositionList.filter(function (list) {
|
|
|
+ return (
|
|
|
+ -10 < list.svgPositionY - svgPositionY &&
|
|
|
+ list.svgPositionY - svgPositionY < 10
|
|
|
+ );
|
|
|
+ });
|
|
|
+ if (exitsAdsorbY.length > 0) {
|
|
|
+ svgPositionY = exitsAdsorbY[0].svgPositionY;
|
|
|
+ }
|
|
|
+ _this.svgLists[_this.selectSvg.Index].svgPositionX = svgPositionX;
|
|
|
+ _this.svgLists[_this.selectSvg.Index].svgPositionY = svgPositionY;
|
|
|
+ //从所有的x坐标列表中查当前坐标是否存在
|
|
|
+ let exitsNowX = anyPositionList.filter(function (list) {
|
|
|
+ return list.svgPositionX === svgPositionX;
|
|
|
+ });
|
|
|
+ if (exitsNowX.length > 0) {
|
|
|
+ _this.guideY.style.setProperty("left", svgPositionX - 1 + "px");
|
|
|
+ _this.guideY.style.display = "inline";
|
|
|
+ } else {
|
|
|
+ _this.guideY.style.display = "none";
|
|
|
+ }
|
|
|
+ //从所有的y坐标列表中查当前坐标是否存在
|
|
|
+ let exitsNowY = anyPositionList.filter(function (list) {
|
|
|
+ return list.svgPositionY === svgPositionY;
|
|
|
+ });
|
|
|
+ if (exitsNowY.length > 0) {
|
|
|
+ _this.guideX.style.setProperty("top", svgPositionY + "px");
|
|
|
+ _this.guideX.style.display = "inline";
|
|
|
+ } else {
|
|
|
+ _this.guideX.style.display = "none";
|
|
|
+ }
|
|
|
+ }, 1);
|
|
|
+ },
|
|
|
+ MousedownCanvas() {
|
|
|
+ //console.log('点击了画布');
|
|
|
+ },
|
|
|
+ MousedownSvg(id, index, pointX, pointY, e) {
|
|
|
+ this.CurrentlySelectedToolBar.Type = global.CurrentlySelectedToolBarType = "";
|
|
|
+ this.CurrentlySelectedToolBar.Title = global.CurrentlySelectedToolBarTitle = "";
|
|
|
+ //从数组里面根据index找到当前元素
|
|
|
+ this.selectSvg.ID = id;
|
|
|
+ this.selectSvg.Index = index;
|
|
|
+ this.selectSvg.mouseStatus = 1;
|
|
|
+ this.selectSvg.mPositionX = e.clientX;
|
|
|
+ this.selectSvg.mPositionY = e.clientY;
|
|
|
+ this.selectSvg.pointX = pointX;
|
|
|
+ this.selectSvg.pointY = pointY;
|
|
|
+ this.selectSvgInfo = this.svgLists[index];
|
|
|
+
|
|
|
+ //获取所有g标签 将当前标签追加选中样式
|
|
|
+ let gAnyList = document.querySelectorAll("g");
|
|
|
+ gAnyList.forEach((g) => {
|
|
|
+ g.classList.remove("topo-layer-view-selected");
|
|
|
+ });
|
|
|
+ document.getElementById(id).classList.add("topo-layer-view-selected");
|
|
|
+ },
|
|
|
+ MouseupCanvas() {
|
|
|
+ this.guideX.style.display = "none";
|
|
|
+ this.guideY.style.display = "none";
|
|
|
+ if (
|
|
|
+ this.CurrentlySelectedToolBar.Title != "" ||
|
|
|
+ this.CurrentlySelectedToolBar.Type != ""
|
|
|
+ ) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ // this.selectSvg.ID = '';
|
|
|
+ this.selectSvg.mouseStatus = 0;
|
|
|
+ },
|
|
|
+ MouseWheel(e) {
|
|
|
+ //获取当前选中组件
|
|
|
+ let selectSvgInfo = this.selectSvgInfo;
|
|
|
+ if (
|
|
|
+ selectSvgInfo == undefined ||
|
|
|
+ selectSvgInfo == null ||
|
|
|
+ selectSvgInfo == ""
|
|
|
+ ) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ e.preventDefault();
|
|
|
+ //判断滚轮方向 -100是往上滑 100是下滑
|
|
|
+ let svgZoom = e.deltaY <0 ? 0.1 : -0.1;
|
|
|
+ console.log(e.deltaY);
|
|
|
+ selectSvgInfo.size += svgZoom;
|
|
|
+ selectSvgInfo.size =parseFloat(selectSvgInfo.size.toFixed(1));
|
|
|
+ if (selectSvgInfo.size < 1) {
|
|
|
+ selectSvgInfo.size = 1;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ DblClick() {
|
|
|
+ //获取所有g标签 清除所有选中样式
|
|
|
+ let gAnyList = document.querySelectorAll("g");
|
|
|
+ gAnyList.forEach((g) => {
|
|
|
+ g.classList.remove("topo-layer-view-selected");
|
|
|
+ });
|
|
|
+ this.selectSvgInfo = "";
|
|
|
+ },
|
|
|
+ testD() {
|
|
|
+ // console.log(JSON.stringify(this.svgLists));
|
|
|
+ alert(JSON.stringify(this.svgLists));
|
|
|
+ },
|
|
|
+ testE() {
|
|
|
+ this.svgLists = this.AnalogData;
|
|
|
+ },
|
|
|
+ testH() {
|
|
|
+ localStorage.setItem("svginfo", JSON.stringify(this.svgLists));
|
|
|
+ this.$router.push({
|
|
|
+ path: "/Power_diagram",
|
|
|
+ name: "power_diagram",
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //设置表格属性
|
|
|
+ setTableAttr(id, rowCount, colCount) {
|
|
|
+ //根据当前id找到当前表格的index
|
|
|
+ let tableIndex = this.svgLists.indexOf(
|
|
|
+ this.svgLists.filter((f) => f.id == id)[0]
|
|
|
+ );
|
|
|
+ if (tableIndex == -1) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let svgType = this.svgLists.filter((f) => f.id == id)[0].type;
|
|
|
+ if (svgType != "TableSvg") {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let tableData = [];
|
|
|
+ for (let r = 0; r < rowCount; r++) {
|
|
|
+ let tableColDataList = [];
|
|
|
+ for (let c = 0; c < colCount; c++) {
|
|
|
+ if (
|
|
|
+ this.svgLists[tableIndex].tableData.length >= r + 1 &&
|
|
|
+ this.svgLists[tableIndex].tableData[r].cols.length >= c + 1
|
|
|
+ ) {
|
|
|
+ tableColDataList.push(
|
|
|
+ this.svgLists[tableIndex].tableData[r].cols[c]
|
|
|
+ );
|
|
|
+ } else {
|
|
|
+ let tableColData = {
|
|
|
+ id: this.$UCore.GenUUid(),
|
|
|
+ val: `${r + 1}行${c + 1}列`,
|
|
|
+ };
|
|
|
+ tableColDataList.push(tableColData);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ let tableRowData = {
|
|
|
+ cols: tableColDataList,
|
|
|
+ };
|
|
|
+ tableData.push(tableRowData);
|
|
|
+ }
|
|
|
+ // console.log(tableData)
|
|
|
+ this.svgLists[tableIndex].tableData = tableData;
|
|
|
+ // console.log(this.svgLists[tableIndex].tableData)
|
|
|
+ let gAnyList = document.querySelectorAll("foreignObject");
|
|
|
+ // window.onload = function () {
|
|
|
+ // var tdArr = document.getElementById('tablebox').firstElementChild;
|
|
|
+ // for (var i = 0; i < data.length; i++) {
|
|
|
+ // var tr = document.createElement("tr");
|
|
|
+ // tr.innerHTML = '<td class="active">' + data[i].name + '</td><td class="warning" onClick=clickPerson('+data[i].id+') >编辑</td>';
|
|
|
+ // tdArr.appendChild(tr)
|
|
|
+ // }
|
|
|
+ // };
|
|
|
+ var html = `
|
|
|
+ <div id='divtable' class='svgfont' data-v-025fdfb6=''></div>
|
|
|
+ <table border='0' cellpadding='0' cellspacing='0' style='pointer-events: none;'>
|
|
|
+ <tr data-v-025fdfb6=''>
|
|
|
+ <td class='tdsvg' data-v-025fdfb6=''>
|
|
|
+ <div class='add-tag' data-v-025fdfb6=''>
|
|
|
+ <span data-v-025fdfb6=''>1行1列</span>
|
|
|
+ <input type='text' class='ant-input ant-input-sm ainput' data-v-025fdfb6=''>
|
|
|
+ </div>
|
|
|
+ </td>
|
|
|
+ <td class='tdsvg' data-v-025fdfb6=''>
|
|
|
+ <div class='add-tag' data-v-025fdfb6=''>
|
|
|
+ <span data-v-025fdfb6=''>1行2列</span>
|
|
|
+ <input type='text' class='ant-input ant-input-sm ainput' data-v-025fdfb6=''>
|
|
|
+ </div>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr data-v-025fdfb6=''>
|
|
|
+ <td class='tdsvg' data-v-025fdfb6=''>
|
|
|
+ <div class='add-tag' data-v-025fdfb6=''>
|
|
|
+ <span data-v-025fdfb6=''>2行1列</span>
|
|
|
+ <input type='text' class='ant-input ant-input-sm ainput' data-v-025fdfb6=''>
|
|
|
+ </div>
|
|
|
+ </td>
|
|
|
+ <td class='tdsvg' data-v-025fdfb6=''>
|
|
|
+ <div class='add-tag' data-v-025fdfb6=''>
|
|
|
+ <span data-v-025fdfb6=''>2行2列</span>
|
|
|
+ <input type='text' class='ant-input ant-input-sm ainput' data-v-025fdfb6=''>
|
|
|
+ </div>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ </table>`
|
|
|
+ gAnyList[0].innerHTML = html
|
|
|
+
|
|
|
+ },
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ //请求接口获取组件
|
|
|
+ this.$axios
|
|
|
+ .get("/1.json")
|
|
|
+ .then(function (response) {
|
|
|
+ _this.AnalogData = response.data;
|
|
|
+ // console.log(response);
|
|
|
+ })
|
|
|
+ .catch(function (error) {
|
|
|
+ console.log(error);
|
|
|
+ });
|
|
|
+ let _this = this;
|
|
|
+ // api.queryGroupTree().then((requset)=>{
|
|
|
+ // console.log(requset)
|
|
|
+ // })
|
|
|
+ let canvasdiv = document.querySelector("#canvas");
|
|
|
+ _this.guideX = document.querySelector("#guide-x"); //辅助线x轴
|
|
|
+ _this.guideY = document.querySelector("#guide-y"); //辅助线y轴
|
|
|
+ canvasdiv.addEventListener("dragover",function (e) {
|
|
|
+ e.preventDefault();
|
|
|
+ _this.CurrentlySelectedToolBar.Type = global.CurrentlySelectedToolBarType;
|
|
|
+ _this.CurrentlySelectedToolBar.Title = global.CurrentlySelectedToolBarTitle;
|
|
|
+ _this.CurrentlySelectedToolBar.TypeName = global.CurrentlySelectedToolBarTypeName;
|
|
|
+ _this.CurrentlySelectedToolBar.Color = global.CurrentlySelectedToolBarColor;
|
|
|
+ _this.CurrentlySelectedToolBar.Height = global.CurrentlySelectedToolBarHeight;
|
|
|
+ _this.CurrentlySelectedToolBar.Width = global.CurrentlySelectedToolBarWidth;
|
|
|
+ _this.CurrentlySelectedToolBar.SvgText = global.CurrentlySelectedToolBarSvgText;
|
|
|
+ _this.CurrentlySelectedToolBar.FontSize = global.CurrentlySelectedToolBarFontSize;
|
|
|
+ _this.CurrentlySelectedToolBar.TableData = global.CurrentlySelectedToolBarTableData;
|
|
|
+ },false);
|
|
|
+ canvasdiv.addEventListener(
|
|
|
+ "drop",
|
|
|
+ function (e) {
|
|
|
+ e.preventDefault();
|
|
|
+ if (_this.CurrentlySelectedToolBar.Type == "") {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ //根据类型和鼠标位置创建组件
|
|
|
+ // console.log(_this.CurrentlySelectedToolBar.Type);
|
|
|
+
|
|
|
+ let svgItem = {
|
|
|
+ id: _this.$UCore.GenUUid(),
|
|
|
+ title: _this.CurrentlySelectedToolBar.Title,
|
|
|
+ type: _this.CurrentlySelectedToolBar.Type,
|
|
|
+ typeName: _this.CurrentlySelectedToolBar.TypeName,
|
|
|
+ svgColor: _this.CurrentlySelectedToolBar.Color,
|
|
|
+ svgPositionX: e.offsetX,
|
|
|
+ svgPositionY: e.offsetY,
|
|
|
+ // size: 1,
|
|
|
+ height: _this.CurrentlySelectedToolBar.Height,
|
|
|
+ width: _this.CurrentlySelectedToolBar.Width,
|
|
|
+ svgText: _this.CurrentlySelectedToolBar.SvgText,
|
|
|
+ fontSize: _this.CurrentlySelectedToolBar.FontSize,
|
|
|
+ tableRowCount:_this.tableRowCount,
|
|
|
+ tableColCount: _this.tableColCount,
|
|
|
+ tableData:_this.CurrentlySelectedToolBar.TableData,
|
|
|
+ angle: 0,
|
|
|
+ //translate:`translate(${this.mousePosition.positionX},${this.mousePosition.positionY})`
|
|
|
+ };
|
|
|
+ _this.svgLists.push(svgItem);
|
|
|
+ setTimeout(function () {
|
|
|
+ //获取所有g标签 将当前标签追加选中样式
|
|
|
+ let gAnyList = document.querySelectorAll("g");
|
|
|
+ console.log(gAnyList);
|
|
|
+ gAnyList.forEach((g) => {
|
|
|
+ g.classList.remove("topo-layer-view-selected");
|
|
|
+ });
|
|
|
+ document
|
|
|
+ .getElementById(svgItem.id)
|
|
|
+ .classList.add("topo-layer-view-selected");
|
|
|
+ _this.selectSvgInfo = svgItem;
|
|
|
+ }, 100);
|
|
|
+ },
|
|
|
+ false
|
|
|
+ );
|
|
|
+ setTimeout(() => {
|
|
|
+ this.testE();
|
|
|
+ this.testH();
|
|
|
+ }, 1000);
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ let _this = this;
|
|
|
+ //当前页面监视键盘输入
|
|
|
+ document.onkeydown = function (e) {
|
|
|
+ //获取当前选中组件
|
|
|
+ let selectSvgInfo = _this.selectSvgInfo;
|
|
|
+ if (selectSvgInfo == undefined || selectSvgInfo == null || selectSvgInfo == "" ) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ //事件对象兼容
|
|
|
+ let e1 = e || window.event || arguments.callee.caller.arguments[0];
|
|
|
+ //键盘按键判断:左箭头-37;上箭头-38；右箭头-39;下箭头-40
|
|
|
+ if (e1 && e1.keyCode == 37) {
|
|
|
+ e.preventDefault();
|
|
|
+ selectSvgInfo.svgPositionX -= 1;
|
|
|
+ } else if (e1 && e1.keyCode == 38) {
|
|
|
+ e.preventDefault();
|
|
|
+ selectSvgInfo.svgPositionY -= 1;
|
|
|
+ } else if (e1 && e1.keyCode == 39) {
|
|
|
+ e.preventDefault();
|
|
|
+ selectSvgInfo.svgPositionX += 1;
|
|
|
+ } else if (e1 && e1.keyCode == 40) {
|
|
|
+ e.preventDefault();
|
|
|
+ selectSvgInfo.svgPositionY += 1;
|
|
|
+ }
|
|
|
+ //ctrl c
|
|
|
+ else if (e1 && e1.ctrlKey && e1.keyCode == 67) {
|
|
|
+ e.preventDefault();
|
|
|
+ let copySvgInfoStr = JSON.stringify(selectSvgInfo);
|
|
|
+ let copySvgInfo = JSON.parse(copySvgInfoStr);
|
|
|
+ copySvgInfo.id = _this.$UCore.GenUUid();
|
|
|
+ copySvgInfo.svgPositionX = selectSvgInfo.svgPositionX + 10;
|
|
|
+ copySvgInfo.svgPositionY = selectSvgInfo.svgPositionY + 10;
|
|
|
+ _this.svgLists.push(copySvgInfo);
|
|
|
+ _this.selectSvgInfo = copySvgInfo;
|
|
|
+ setTimeout(function () {
|
|
|
+ //获取所有g标签 将当前标签追加选中样式
|
|
|
+ let gAnyList = document.querySelectorAll("g");
|
|
|
+ gAnyList.forEach((g) => {
|
|
|
+ g.classList.remove("topo-layer-view-selected");
|
|
|
+ });
|
|
|
+ document
|
|
|
+ .getElementById(copySvgInfo.id)
|
|
|
+ .classList.add("topo-layer-view-selected");
|
|
|
+ }, 100);
|
|
|
+ }
|
|
|
+ //deleted
|
|
|
+ else if (e1 && e1.keyCode == 46) {
|
|
|
+ e.preventDefault();
|
|
|
+ //根据当前id找到当前元素的index
|
|
|
+ let selectSvgIndex = _this.svgLists.indexOf(
|
|
|
+ _this.svgLists.filter((f) => f.id == selectSvgInfo.id)[0]
|
|
|
+ );
|
|
|
+ _this.svgLists.splice(selectSvgIndex, 1);
|
|
|
+ }
|
|
|
+ };
|
|
|
+ //请求接口获取组件
|
|
|
+ this.$axios
|
|
|
+ .get("/InterfaceReturn.json")
|
|
|
+ .then(function (response) {
|
|
|
+ _this.svgInfoData = response.data;
|
|
|
+ // console.log(response.data);
|
|
|
+ })
|
|
|
+ .catch(function (error) {
|
|
|
+ console.log(error);
|
|
|
+ });
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<!-- Add "scoped" attribute to limit CSS to this component only -->
|
|
|
+<style scoped lang="less">
|
|
|
+::-webkit-scrollbar {
|
|
|
+ width: 8px;
|
|
|
+ height: 8px;
|
|
|
+}
|
|
|
+::-webkit-scrollbar-track {
|
|
|
+ border-radius: 10px;
|
|
|
+ background-color: #f2f2f2;
|
|
|
+ box-shadow: 1px 1px 5px #333 inset;
|
|
|
+}
|
|
|
+::-webkit-scrollbar-thumb {
|
|
|
+ border-radius: 10px;
|
|
|
+ background-color: #444;
|
|
|
+}
|
|
|
+.ant-layout{
|
|
|
+ background:transparent;
|
|
|
+}
|
|
|
+.pageMain {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ top: 1.2rem;
|
|
|
+ bottom: 0;
|
|
|
+ overflow: auto;
|
|
|
+}
|
|
|
+
|
|
|
+.centerContain {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
+ bottom: 0;
|
|
|
+ z-index: 1;
|
|
|
+ overflow: auto !important;
|
|
|
+ overflow-x: auto !important;
|
|
|
+ transition: all 0.3s;
|
|
|
+ z-index: 111;
|
|
|
+
|
|
|
+ &.fixed {
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
+ bottom: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .canvas-content {
|
|
|
+ // width: 1920px;
|
|
|
+ // height: 1080px;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ .btns-content {
|
|
|
+ position: fixed;
|
|
|
+ bottom: 10px;
|
|
|
+ right: 320px;
|
|
|
+ left: 280px;
|
|
|
+ button {
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+</style>
|
fanghuisheng
