|
@@ -29,7 +29,10 @@
|
|
version="1.1"
|
|
version="1.1"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
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);"
|
|
|
|
|
|
+ style="
|
|
|
|
+ background-color: rgba(0, 244, 253, 0.1);
|
|
|
|
+ border: 1px solid rgba(0, 244, 253, 0.1);
|
|
|
|
+ "
|
|
width="100%"
|
|
width="100%"
|
|
height="100%"
|
|
height="100%"
|
|
>
|
|
>
|
|
@@ -60,7 +63,9 @@
|
|
',' +
|
|
',' +
|
|
item.svgPositionY +
|
|
item.svgPositionY +
|
|
')' +
|
|
')' +
|
|
- 'rotate(' +item.angle+')'
|
|
|
|
|
|
+ 'rotate(' +
|
|
|
|
+ item.angle +
|
|
|
|
+ ')'
|
|
"
|
|
"
|
|
>
|
|
>
|
|
<SvgComponents
|
|
<SvgComponents
|
|
@@ -96,7 +101,7 @@ import global from "@/global/global.js"; //全局变量
|
|
import SvgComponents from "@/components/SvgComponents.vue";
|
|
import SvgComponents from "@/components/SvgComponents.vue";
|
|
// import api from "../api/content/CircuitEdit";
|
|
// import api from "../api/content/CircuitEdit";
|
|
export default {
|
|
export default {
|
|
- components: { SvgComponents},//LeftToolBar, RightToolBar,
|
|
|
|
|
|
+ components: { SvgComponents }, //LeftToolBar, RightToolBar,
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
svgInfoData: [], //接口获取到的组件数据
|
|
svgInfoData: [], //接口获取到的组件数据
|
|
@@ -129,7 +134,7 @@ export default {
|
|
tableRowCount: 2, //表格默认行数
|
|
tableRowCount: 2, //表格默认行数
|
|
tableColCount: 2, //表格默认列数
|
|
tableColCount: 2, //表格默认列数
|
|
tableDefaultData: [],
|
|
tableDefaultData: [],
|
|
- AnalogData: []
|
|
|
|
|
|
+ AnalogData: [],
|
|
};
|
|
};
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
@@ -201,8 +206,10 @@ export default {
|
|
//console.log('点击了画布');
|
|
//console.log('点击了画布');
|
|
},
|
|
},
|
|
MousedownSvg(id, index, pointX, pointY, e) {
|
|
MousedownSvg(id, index, pointX, pointY, e) {
|
|
- this.CurrentlySelectedToolBar.Type = global.CurrentlySelectedToolBarType = "";
|
|
|
|
- this.CurrentlySelectedToolBar.Title = global.CurrentlySelectedToolBarTitle = "";
|
|
|
|
|
|
+ this.CurrentlySelectedToolBar.Type = global.CurrentlySelectedToolBarType =
|
|
|
|
+ "";
|
|
|
|
+ this.CurrentlySelectedToolBar.Title =
|
|
|
|
+ global.CurrentlySelectedToolBarTitle = "";
|
|
//从数组里面根据index找到当前元素
|
|
//从数组里面根据index找到当前元素
|
|
this.selectSvg.ID = id;
|
|
this.selectSvg.ID = id;
|
|
this.selectSvg.Index = index;
|
|
this.selectSvg.Index = index;
|
|
@@ -244,10 +251,10 @@ export default {
|
|
}
|
|
}
|
|
e.preventDefault();
|
|
e.preventDefault();
|
|
//判断滚轮方向 -100是往上滑 100是下滑
|
|
//判断滚轮方向 -100是往上滑 100是下滑
|
|
- let svgZoom = e.deltaY <0 ? 0.1 : -0.1;
|
|
|
|
|
|
+ let svgZoom = e.deltaY < 0 ? 0.1 : -0.1;
|
|
console.log(e.deltaY);
|
|
console.log(e.deltaY);
|
|
selectSvgInfo.size += svgZoom;
|
|
selectSvgInfo.size += svgZoom;
|
|
- selectSvgInfo.size =parseFloat(selectSvgInfo.size.toFixed(1));
|
|
|
|
|
|
+ selectSvgInfo.size = parseFloat(selectSvgInfo.size.toFixed(1));
|
|
if (selectSvgInfo.size < 1) {
|
|
if (selectSvgInfo.size < 1) {
|
|
selectSvgInfo.size = 1;
|
|
selectSvgInfo.size = 1;
|
|
}
|
|
}
|
|
@@ -265,9 +272,11 @@ export default {
|
|
alert(JSON.stringify(this.svgLists));
|
|
alert(JSON.stringify(this.svgLists));
|
|
},
|
|
},
|
|
testE() {
|
|
testE() {
|
|
|
|
+ console.log("aaaaaaaaaaaaaaaaaa");
|
|
this.svgLists = this.AnalogData;
|
|
this.svgLists = this.AnalogData;
|
|
},
|
|
},
|
|
testH() {
|
|
testH() {
|
|
|
|
+ console.log("bbbbbbbbbbbbbbbbbbbbb");
|
|
localStorage.setItem("svginfo", JSON.stringify(this.svgLists));
|
|
localStorage.setItem("svginfo", JSON.stringify(this.svgLists));
|
|
this.$router.push({
|
|
this.$router.push({
|
|
path: "/Power_diagram",
|
|
path: "/Power_diagram",
|
|
@@ -354,41 +363,51 @@ export default {
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</td>
|
|
</tr>
|
|
</tr>
|
|
- </table>`
|
|
|
|
- gAnyList[0].innerHTML = html
|
|
|
|
-
|
|
|
|
|
|
+ </table>`;
|
|
|
|
+ gAnyList[0].innerHTML = html;
|
|
},
|
|
},
|
|
},
|
|
},
|
|
mounted() {
|
|
mounted() {
|
|
|
|
+ let _this = this;
|
|
//请求接口获取组件
|
|
//请求接口获取组件
|
|
this.$axios
|
|
this.$axios
|
|
.get("/1.json")
|
|
.get("/1.json")
|
|
.then(function (response) {
|
|
.then(function (response) {
|
|
_this.AnalogData = response.data;
|
|
_this.AnalogData = response.data;
|
|
- // console.log(response);
|
|
|
|
|
|
+ console.log(response);
|
|
})
|
|
})
|
|
.catch(function (error) {
|
|
.catch(function (error) {
|
|
console.log(error);
|
|
console.log(error);
|
|
});
|
|
});
|
|
- let _this = this;
|
|
|
|
- // api.queryGroupTree().then((requset)=>{
|
|
|
|
- // console.log(requset)
|
|
|
|
- // })
|
|
|
|
|
|
+
|
|
let canvasdiv = document.querySelector("#canvas");
|
|
let canvasdiv = document.querySelector("#canvas");
|
|
_this.guideX = document.querySelector("#guide-x"); //辅助线x轴
|
|
_this.guideX = document.querySelector("#guide-x"); //辅助线x轴
|
|
_this.guideY = document.querySelector("#guide-y"); //辅助线y轴
|
|
_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(
|
|
|
|
+ "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(
|
|
canvasdiv.addEventListener(
|
|
"drop",
|
|
"drop",
|
|
function (e) {
|
|
function (e) {
|
|
@@ -412,9 +431,9 @@ export default {
|
|
width: _this.CurrentlySelectedToolBar.Width,
|
|
width: _this.CurrentlySelectedToolBar.Width,
|
|
svgText: _this.CurrentlySelectedToolBar.SvgText,
|
|
svgText: _this.CurrentlySelectedToolBar.SvgText,
|
|
fontSize: _this.CurrentlySelectedToolBar.FontSize,
|
|
fontSize: _this.CurrentlySelectedToolBar.FontSize,
|
|
- tableRowCount:_this.tableRowCount,
|
|
|
|
|
|
+ tableRowCount: _this.tableRowCount,
|
|
tableColCount: _this.tableColCount,
|
|
tableColCount: _this.tableColCount,
|
|
- tableData:_this.CurrentlySelectedToolBar.TableData,
|
|
|
|
|
|
+ tableData: _this.CurrentlySelectedToolBar.TableData,
|
|
angle: 0,
|
|
angle: 0,
|
|
//translate:`translate(${this.mousePosition.positionX},${this.mousePosition.positionY})`
|
|
//translate:`translate(${this.mousePosition.positionX},${this.mousePosition.positionY})`
|
|
};
|
|
};
|
|
@@ -437,15 +456,29 @@ export default {
|
|
setTimeout(() => {
|
|
setTimeout(() => {
|
|
this.testE();
|
|
this.testE();
|
|
this.testH();
|
|
this.testH();
|
|
- }, 1000);
|
|
|
|
|
|
+ }, 100);
|
|
},
|
|
},
|
|
created() {
|
|
created() {
|
|
let _this = this;
|
|
let _this = this;
|
|
|
|
+ //请求接口获取组件
|
|
|
|
+ this.$axios
|
|
|
|
+ .get("/InterfaceReturn.json")
|
|
|
|
+ .then(function (response) {
|
|
|
|
+ _this.svgInfoData = response.data;
|
|
|
|
+ // console.log(response.data);
|
|
|
|
+ })
|
|
|
|
+ .catch(function (error) {
|
|
|
|
+ console.log(error);
|
|
|
|
+ });
|
|
//当前页面监视键盘输入
|
|
//当前页面监视键盘输入
|
|
document.onkeydown = function (e) {
|
|
document.onkeydown = function (e) {
|
|
//获取当前选中组件
|
|
//获取当前选中组件
|
|
let selectSvgInfo = _this.selectSvgInfo;
|
|
let selectSvgInfo = _this.selectSvgInfo;
|
|
- if (selectSvgInfo == undefined || selectSvgInfo == null || selectSvgInfo == "" ) {
|
|
|
|
|
|
+ if (
|
|
|
|
+ selectSvgInfo == undefined ||
|
|
|
|
+ selectSvgInfo == null ||
|
|
|
|
+ selectSvgInfo == ""
|
|
|
|
+ ) {
|
|
return;
|
|
return;
|
|
}
|
|
}
|
|
//事件对象兼容
|
|
//事件对象兼容
|
|
@@ -495,16 +528,6 @@ export default {
|
|
_this.svgLists.splice(selectSvgIndex, 1);
|
|
_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>
|
|
</script>
|
|
@@ -524,8 +547,8 @@ export default {
|
|
border-radius: 10px;
|
|
border-radius: 10px;
|
|
background-color: #444;
|
|
background-color: #444;
|
|
}
|
|
}
|
|
-.ant-layout{
|
|
|
|
- background:transparent;
|
|
|
|
|
|
+.ant-layout {
|
|
|
|
+ background: transparent;
|
|
}
|
|
}
|
|
.pageMain {
|
|
.pageMain {
|
|
position: absolute;
|
|
position: absolute;
|
|
@@ -572,8 +595,4 @@ export default {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
-
|
|
|
|
-
|
|
|
|
-
|
|
|
|
-
|
|
|
|
</style>
|
|
</style>
|