From fb4165a34ce6648d50b17eef76e49ac87911ba74 Mon Sep 17 00:00:00 2001 From: fanluyan <754122931@qq.com> Date: Mon, 12 Aug 2024 09:05:22 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Home.vue | 2 +- src/views/home/components/drawpic.vue | 80 ++++++++++++++------------- src/views/home/components/picTree.vue | 17 +++--- 3 files changed, 53 insertions(+), 46 deletions(-) diff --git a/src/components/Home.vue b/src/components/Home.vue index 51e1484..4b22d15 100644 --- a/src/components/Home.vue +++ b/src/components/Home.vue @@ -25,7 +25,7 @@ export default { width: 100%; height: 100%; //padding: 10px; - overflow-y: auto; + overflow-y: scroll; box-sizing: border-box; } } diff --git a/src/views/home/components/drawpic.vue b/src/views/home/components/drawpic.vue index 377b80b..3aa67ef 100644 --- a/src/views/home/components/drawpic.vue +++ b/src/views/home/components/drawpic.vue @@ -120,24 +120,24 @@ export default { }, created() { EventBus.$on("currentNodeData", (value) => { - //console.log(value); // 输出 value + ////console.log(value); // 输出 value this.currentNodeData = value; this.selectIndex = -1; }); EventBus.$on("perentNode", (value) => { - //console.log(value); // 输出 value + ////console.log(value); // 输出 value this.parentdata = value; this.selectIndex = -1; }); EventBus.$on("labelMark", (value) => { this.selectIndex = -1; - //console.log(value); // 输出 value + ////console.log(value); // 输出 value this.labelMarkArrs = value; - console.log(this.labelMarkArrs); + //console.log(this.labelMarkArrs); this.clearCanvas(); this.recArrs = []; for (var i = 0; i < this.labelMarkArrs.length; i++) { - console.log(this.labelMarkArrs[i]); + //console.log(this.labelMarkArrs[i]); //获取的数据转化一下 this.recArrs.push({ x: @@ -152,20 +152,20 @@ export default { type: this.labelMarkArrs[i].type, }); } - console.log("aaaaaaaaaaaaaaaaa"); - console.log(this.recArrs); + //console.log("aaaaaaaaaaaaaaaaa"); + //console.log(this.recArrs); this.drawOldRect(); }); }, mounted() { - console.log(window.location.host); + //console.log(window.location.host); const isProduction = process.env.NODE_ENV === "production"; if (isProduction) { // 使用服务器IP或域名作为图片地址 this.hostName = window.location.origin; - console.log(this.hostName); - console.log("aaaaaaaaaaaa"); + //console.log(this.hostName); + //console.log("aaaaaaaaaaaa"); } else { // 使用代理的 target 作为图片地址（开发环境） this.hostName = "http://192.168.1.190:88"; // 这里使用你的本地 target 地址 @@ -183,7 +183,7 @@ export default { getTypes() { getTypesApi() .then((res) => { - console.log(res); + //console.log(res); this.markOptions = res.data; this.typeMap = res.data; }) @@ -192,16 +192,18 @@ export default { //获取图片的宽高 onImageLoad() { this.updateImageSize(); + console.log("我家在出来了"); }, updateImageSize() { const img = this.$refs.imgDiv; - this.imgWidth = img.offsetWidth; - this.imgHeight = img.offsetHeight; + this.imgWidth = img.clientWidth; + this.imgHeight = img.clientHeight; + console.dir(img); console.log(this.imgWidth, this.imgHeight); this.clearCanvas(); this.recArrs = []; for (var i = 0; i < this.labelMarkArrs.length; i++) { - console.log(this.labelMarkArrs[i]); + //console.log(this.labelMarkArrs[i]); //获取的数据转化一下 this.recArrs.push({ x: @@ -216,8 +218,8 @@ export default { type: this.labelMarkArrs[i].type, }); } - console.log("aaaaaaaaaaaaaaaaa"); - console.log(this.recArrs); + //console.log("aaaaaaaaaaaaaaaaa"); + //console.log(this.recArrs); this.drawOldRect(); }, // // 拖动图片 @@ -262,7 +264,7 @@ export default { }, // 鼠标移动事件 moveFunction(e) { - // console.log('鼠标移动', e); + // //console.log('鼠标移动', e); // 需要清除之前的辅助线 this.clearCanvas(); // 画辅助线 @@ -380,7 +382,7 @@ export default { let limitX = left + width; let limitY = top + height; if (x < left || x > limitX || y < top || y > limitY) { - console.log("鼠标移出范围， 清除canvas，重新绘制"); + //console.log("鼠标移出范围， 清除canvas，重新绘制"); this.clearCanvas(); this.drawOldRect(); } @@ -391,7 +393,7 @@ export default { let ctx2d = canvasDom.getContext("2d"); const canvasHeight = canvasDom.offsetWidth; const canvasWidth = canvasDom.offsetWidth; - //console.log(canvasDom); + ////console.log(canvasDom); // 开始一条路径 ctx2d.beginPath(); // 填充色 @@ -484,7 +486,7 @@ export default { var typeColor = colors[this.recArrs[i].type] || "rgb(255, 0, 0)"; var bgcolors = bgcolors[this.recArrs[i].type] || "rgba(22, 158, 140, 0.2)"; - console.log(typeColor); + // //console.log(typeColor); ctx2d.strokeStyle = typeColor; // 矩形框的线条颜色 ctx2d.fillStyle = bgcolors; // 矩形框的填充颜色（与线条颜色相同） @@ -530,9 +532,9 @@ export default { }, // 鼠标按下事件 downFunction(e) { - console.log("鼠标按下", e); // e.button 0 鼠标左键 1 鼠标滚轮 2 鼠标右键 + //console.log("鼠标按下", e); // e.button 0 鼠标左键 1 鼠标滚轮 2 鼠标右键 this.curObj.isRightClick = e.button > 1; - console.log("是否右键", this.curObj.isRightClick); + //console.log("是否右键", this.curObj.isRightClick); // 赋值 x,y 轴起始数据 this.curObj.x = e.offsetX; @@ -541,8 +543,8 @@ export default { // 判断是否落在的矩形框上 //得到落点所在框的序数 this.curObj.index = this.getEventIndex(this.curObj.x, this.curObj.y); - console.log("落点矩形", this.curObj.index); - console.log("我是上面的数组", this.recArrs); + //console.log("落点矩形", this.curObj.index); + //console.log("我是上面的数组", this.recArrs); console.log( "我是上面的数组点击的哪一个", this.recArrs[this.curObj.index] @@ -566,14 +568,14 @@ export default { this.curObj.x, this.curObj.y ); - console.log("this.curObj.side", this.curObj.side); + //console.log("this.curObj.side", this.curObj.side); if (this.curObj.side < 9) { //准备缩放 - console.log("在缩放"); + //console.log("在缩放"); this.curObj.resize = true; } else { //准备拖动 - console.log("在拖动"); + //console.log("在拖动"); this.curObj.drag = true; } @@ -654,8 +656,8 @@ export default { //得到落点在一个框中的区域 getEventArea(index, x, y) { const data = this.recArrs[index]; - // console.log("this.recArrs", this.recArrs); - // console.log("data", data); + // //console.log("this.recArrs", this.recArrs); + // //console.log("data", data); if ( x > data.x - this.curObj.radious && x < data.x + this.curObj.radious @@ -738,7 +740,7 @@ export default { }, // 鼠标抬起事件 upFunction(e) { - console.log("鼠标抬起", e); + //console.log("鼠标抬起", e); if (this.curObj.isRightClick) { if (this.curObj.index !== -1) { // 删除，重绘 @@ -758,7 +760,7 @@ export default { this.curObj.draw = false; } - console.log("鼠标抬起-当前矩形框", this.recArrs); + //console.log("鼠标抬起-当前矩形框", this.recArrs); }, // 添加矩形 addToRecs(e) { @@ -774,7 +776,7 @@ export default { // 防止误触 if (rec.w > 2 && rec.h > 2) { this.recArrs.push(rec); - console.log("recArrs", this.recArrs); + //console.log("recArrs", this.recArrs); } }, //保存图片和数据 @@ -793,10 +795,10 @@ export default { type: this.recArrs[i].type, }); } - console.log(params); + //console.log(params); saveLabelsApi(params) .then((res) => { - console.log(res); + //console.log(res); if (res.success) { this.$message({ showClose: true, @@ -826,7 +828,7 @@ export default { path: this.parentdata.name + "/" + this.currentNodeData.name, }) .then((res) => { - console.log(res); + //console.log(res); this.$message({ type: "success", message: "删除成功!", @@ -845,7 +847,7 @@ export default { // path: this.parentdata.name + "/" + this.currentNodeData.name, // }) // .then((res) => { - // console.log(res); + // //console.log(res); // this.$message({ // type: "success", // message: "删除成功!", @@ -914,7 +916,7 @@ export default { .picCanvans { width: 100%; height: calc(100% - 87px); - overflow: auto; + //overflow: auto; h3 { margin-bottom: 12px; font-size: 14px; @@ -938,6 +940,10 @@ export default { } .canvas_dom { position: absolute; + left: 0; + top: 0; + bottom: 0; + right: 0; } } } diff --git a/src/views/home/components/picTree.vue b/src/views/home/components/picTree.vue index 50cacae..b5acf73 100644 --- a/src/views/home/components/picTree.vue +++ b/src/views/home/components/picTree.vue @@ -149,13 +149,13 @@ export default { return; } this.currentNodeKey = node.name; - console.log(node); // 你会看到当前节点的数据 - console.log(data); + // console.log(node); // 你会看到当前节点的数据 + //console.log(data); const parentNode = this.findParentNode(data.id, this.piclist); if (parentNode) { // 找到了父节点，打印父节点的数据 - console.log(parentNode); // 输出父节点的数据对象 + // console.log(parentNode); // 输出父节点的数据对象 } else { // 没找到父节点，处理错误情况 console.error("未能找到父节点"); @@ -166,10 +166,11 @@ export default { EventBus.$emit("perentNode", parentNode); this.defaultExpandedKeys = [parentNode.name]; this.pathParams = parentNode.name + "/" + node.name; - console.log(this.pathParams); + // console.log(this.pathParams); this.getlabels(); localStorage.setItem("currentData", JSON.stringify(node)); this.scrollView(); + EventBus.$emit("labelMark", this.labelsPoint); }, scrollView() { if (this.currentData) { @@ -184,11 +185,11 @@ export default { } }, findParentNode(childId, treeData) { - console.log(childId); - console.log(treeData); + //console.log(childId); + //console.log(treeData); // 递归查找父节点 return treeData.find((parent) => { - console.log(parent); + // console.log(parent); return ( parent.children && parent.children.find((child) => child.$treeNodeId === childId) @@ -233,7 +234,7 @@ export default { border-radius: 4px; .el-tree { overflow-y: auto; - height: calc(100% - 0px); + height: calc(100% - 24px); .el-tree-node__content { height: 32px; font-size: 14px;