|
|
|
@ -192,7 +192,7 @@ export default {
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
console.log(this.terminalPhoto);
|
|
|
|
|
////console.log(this.terminalPhoto);
|
|
|
|
|
this.changeBigPic(this.terminalPhoto[0], 0);
|
|
|
|
|
},
|
|
|
|
|
watch: {
|
|
|
|
@ -206,7 +206,7 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
created() {
|
|
|
|
|
this.roleUser = localStorage.getItem("role");
|
|
|
|
|
console.log(this.roleUser);
|
|
|
|
|
////console.log(this.roleUser);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
methods: {
|
|
|
|
@ -244,7 +244,7 @@ export default {
|
|
|
|
|
termId: data.termId,
|
|
|
|
|
})
|
|
|
|
|
.then((res) => {
|
|
|
|
|
console.log(res);
|
|
|
|
|
//console.log(res);
|
|
|
|
|
this.localPoints = res.data.list;
|
|
|
|
|
this.color = res.data.color;
|
|
|
|
|
this.borderwidth = res.data.boderWidth;
|
|
|
|
@ -258,12 +258,12 @@ export default {
|
|
|
|
|
//开启绘制线缆
|
|
|
|
|
openLine() {
|
|
|
|
|
this.flagLine = true;
|
|
|
|
|
console.log("我是绘制线缆");
|
|
|
|
|
|
|
|
|
|
//开启传1
|
|
|
|
|
updateMarkEnableStatus({
|
|
|
|
|
status: 1,
|
|
|
|
|
}).then((res) => {
|
|
|
|
|
console.log(res);
|
|
|
|
|
//console.log(res);
|
|
|
|
|
});
|
|
|
|
|
this.drawline();
|
|
|
|
|
},
|
|
|
|
@ -271,38 +271,35 @@ export default {
|
|
|
|
|
closeLine() {
|
|
|
|
|
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
|
|
|
|
this.flagLine = false;
|
|
|
|
|
console.log("关闭线缆");
|
|
|
|
|
|
|
|
|
|
//关闭传0
|
|
|
|
|
updateMarkEnableStatus({
|
|
|
|
|
status: 0,
|
|
|
|
|
}).then((res) => {
|
|
|
|
|
console.log(res);
|
|
|
|
|
//console.log(res);
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
//绘制线缆方法
|
|
|
|
|
drawline() {
|
|
|
|
|
this.canvas = this.$refs.myCanvas;
|
|
|
|
|
this.imgpic = this.$refs.picJpg;
|
|
|
|
|
console.log(this.canvas);
|
|
|
|
|
console.log(this.imgpic);
|
|
|
|
|
|
|
|
|
|
this.canvas.width = this.imgpic.imageWidth; //设置画布大小
|
|
|
|
|
this.canvas.height = this.imgpic.imageHeight; //设置画布大小
|
|
|
|
|
this.ctx = this.canvas.getContext("2d");
|
|
|
|
|
console.log(this.localPoints);
|
|
|
|
|
|
|
|
|
|
if (this.flagLine == true) {
|
|
|
|
|
this.localPoints = this.localPoints;
|
|
|
|
|
console.log(this.localPoints);
|
|
|
|
|
} else {
|
|
|
|
|
this.localPoints = [];
|
|
|
|
|
}
|
|
|
|
|
console.log(this.ctx);
|
|
|
|
|
|
|
|
|
|
this.ctx.beginPath();
|
|
|
|
|
//设置线条颜色,必须放在绘制之前
|
|
|
|
|
this.ctx.strokeStyle = this.color;
|
|
|
|
|
// 线宽设置,必须放在绘制之前
|
|
|
|
|
this.ctx.lineWidth = this.borderwidth;
|
|
|
|
|
console.log(this.ctx.lineWidth, this.ctx.strokeStyle);
|
|
|
|
|
console.log(this.localPoints);
|
|
|
|
|
|
|
|
|
|
if (this.localPoints == null) {
|
|
|
|
|
return;
|
|
|
|
|
} else {
|
|
|
|
@ -329,22 +326,19 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
//点击大图左右按钮
|
|
|
|
|
leftClick() {
|
|
|
|
|
console.log("我点击了左侧按钮", this.activeSmall);
|
|
|
|
|
this.activeSmall--;
|
|
|
|
|
this.$refs.scrollBox.scrollLeft -= this.$refs.scrollBox.offsetWidth / 5;
|
|
|
|
|
this.changeBigPic(this.terminalPhoto[this.activeSmall], this.activeSmall);
|
|
|
|
|
},
|
|
|
|
|
rightClick() {
|
|
|
|
|
console.log(this.activeSmall);
|
|
|
|
|
console.log(this.terminalPhoto.length);
|
|
|
|
|
this.activeSmall++;
|
|
|
|
|
this.$refs.scrollBox.scrollLeft += this.$refs.scrollBox.offsetWidth / 5;
|
|
|
|
|
this.changeBigPic(this.terminalPhoto[this.activeSmall], this.activeSmall);
|
|
|
|
|
},
|
|
|
|
|
//获取第一张大图
|
|
|
|
|
changeBigPic(data, i) {
|
|
|
|
|
console.log(data, i);
|
|
|
|
|
console.log("鼠标222222222", this.currentPage, this.activeSmall);
|
|
|
|
|
// //console.log(data, i);
|
|
|
|
|
// //console.log("鼠标222222222", this.currentPage, this.activeSmall);
|
|
|
|
|
this.srcList = [];
|
|
|
|
|
this.localPoints = [];
|
|
|
|
|
this.activeSmall = i;
|
|
|
|
@ -364,22 +358,21 @@ export default {
|
|
|
|
|
//鼠标滚动
|
|
|
|
|
handleScroll(e) {
|
|
|
|
|
let direction = e.deltaY > 0 ? "down" : "up"; //deltaY为正则滚轮向下,为负滚轮向上
|
|
|
|
|
console.log(e.deltaY, direction);
|
|
|
|
|
|
|
|
|
|
if (direction == "down") {
|
|
|
|
|
console.log(this.$refs.scrollBox.offsetWidth / 5);
|
|
|
|
|
this.$refs.scrollBox.scrollLeft += this.$refs.scrollBox.offsetWidth / 5;
|
|
|
|
|
this.$refs.scrollBox.scrollLeft +=
|
|
|
|
|
(this.$refs.scrollBox.offsetWidth / 5) * 3;
|
|
|
|
|
}
|
|
|
|
|
if (direction == "up") {
|
|
|
|
|
this.$refs.scrollBox.scrollLeft -= this.$refs.scrollBox.offsetWidth / 5;
|
|
|
|
|
this.$refs.scrollBox.scrollLeft -=
|
|
|
|
|
(this.$refs.scrollBox.offsetWidth / 5) * 3;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
//缩略图的左右箭头
|
|
|
|
|
smallLeftClick() {
|
|
|
|
|
console.log("缩略图箭头左侧");
|
|
|
|
|
this.$refs.scrollBox.scrollLeft -= this.$refs.scrollBox.offsetWidth;
|
|
|
|
|
},
|
|
|
|
|
smallRightClick() {
|
|
|
|
|
console.log("缩略图箭头右侧");
|
|
|
|
|
this.$refs.scrollBox.scrollLeft += this.$refs.scrollBox.offsetWidth;
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|