|
|
|
|
@ -0,0 +1,301 @@
|
|
|
|
|
<template>
|
|
|
|
|
<el-dialog
|
|
|
|
|
class="pictureTagsDialog"
|
|
|
|
|
title="图片绘制"
|
|
|
|
|
:visible.sync="isShow"
|
|
|
|
|
:close-on-click-modal="false"
|
|
|
|
|
width="1262px"
|
|
|
|
|
>
|
|
|
|
|
<div class="picPannel">
|
|
|
|
|
<div class="imgbox">
|
|
|
|
|
<img
|
|
|
|
|
ref="picJpg"
|
|
|
|
|
src="http://47.96.238.157/photos/2023/05/22/06/XYIGQ10C221000006_1_FF_20230522094507.jpg"
|
|
|
|
|
/>
|
|
|
|
|
<canvas
|
|
|
|
|
id="myCanvas"
|
|
|
|
|
class="myCanvas"
|
|
|
|
|
ref="myCanvas"
|
|
|
|
|
@mousedown="mousedown"
|
|
|
|
|
@mouseup="mouseup"
|
|
|
|
|
@mousemove="mousemove"
|
|
|
|
|
></canvas>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="setBox">
|
|
|
|
|
<div class="infoCompany">
|
|
|
|
|
<!-- <p><label>电压等级：</label><span>220kv</span></p> -->
|
|
|
|
|
<p>
|
|
|
|
|
<label>线路名称：</label><span>{{ pictureData.linename }}</span>
|
|
|
|
|
</p>
|
|
|
|
|
<p>
|
|
|
|
|
<label>杆塔名称：</label><span>{{ pictureData.towername }}</span>
|
|
|
|
|
</p>
|
|
|
|
|
<p>
|
|
|
|
|
<label>装置名称：</label><span>{{ pictureData.cmdid }}</span>
|
|
|
|
|
</p>
|
|
|
|
|
<p>
|
|
|
|
|
<label>选择通道：</label>
|
|
|
|
|
<el-select v-model="picvalue" placeholder="请选择">
|
|
|
|
|
<el-option
|
|
|
|
|
v-for="item in picoptions"
|
|
|
|
|
:key="item.id"
|
|
|
|
|
:label="item.name"
|
|
|
|
|
:value="item.name"
|
|
|
|
|
>
|
|
|
|
|
</el-option>
|
|
|
|
|
</el-select>
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="setColor">
|
|
|
|
|
<p>
|
|
|
|
|
<label>颜色：</label
|
|
|
|
|
><el-color-picker v-model="color"></el-color-picker>
|
|
|
|
|
</p>
|
|
|
|
|
<p>
|
|
|
|
|
<label>线宽：</label>
|
|
|
|
|
<el-input-number
|
|
|
|
|
v-model="num"
|
|
|
|
|
controls-position="right"
|
|
|
|
|
@change="handleChange"
|
|
|
|
|
:min="1"
|
|
|
|
|
:max="10"
|
|
|
|
|
></el-input-number>
|
|
|
|
|
</p>
|
|
|
|
|
<p>
|
|
|
|
|
<el-button type="primary" @click="restCanvas">重新绘制</el-button>
|
|
|
|
|
<el-button type="primary" @click="saveCanvas">保存绘制</el-button>
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div slot="footer" class="dialog-footer">
|
|
|
|
|
<el-button @click="isShow = false">取 消</el-button>
|
|
|
|
|
<el-button type="primary" @click="submitForm()">确 定</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
</template>
|
|
|
|
|
<script>
|
|
|
|
|
export default {
|
|
|
|
|
props: {
|
|
|
|
|
title: String,
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
canvas: null,
|
|
|
|
|
ctx: null,
|
|
|
|
|
imgpic: null,
|
|
|
|
|
drawingSurfaceImageData: "",
|
|
|
|
|
color: "#FF0000",
|
|
|
|
|
num: 5,
|
|
|
|
|
flag: false,
|
|
|
|
|
x: 0,
|
|
|
|
|
y: 0,
|
|
|
|
|
isShow: false,
|
|
|
|
|
fileList: [],
|
|
|
|
|
pictureData: "",
|
|
|
|
|
picoptions: [],
|
|
|
|
|
picvalue: "",
|
|
|
|
|
linePoints: [],
|
|
|
|
|
localPoints: [],
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
mounted() {},
|
|
|
|
|
methods: {
|
|
|
|
|
//获取线宽
|
|
|
|
|
handleChange(value) {
|
|
|
|
|
console.log(value);
|
|
|
|
|
},
|
|
|
|
|
// 保存确定操作
|
|
|
|
|
submitForm() {
|
|
|
|
|
this.isShow = false;
|
|
|
|
|
},
|
|
|
|
|
display(val) {
|
|
|
|
|
this.isShow = true;
|
|
|
|
|
console.log(val);
|
|
|
|
|
this.pictureData = val; //获取当前列表数据
|
|
|
|
|
this.picoptions = val.list; //获取所有通道
|
|
|
|
|
this.picvalue = val.list[0].name; //获取第一个通道
|
|
|
|
|
console.log("this.canvas");
|
|
|
|
|
this.$nextTick(function () {
|
|
|
|
|
// codeing
|
|
|
|
|
this.canvas = this.$refs.myCanvas;
|
|
|
|
|
this.imgpic = this.$refs.picJpg;
|
|
|
|
|
|
|
|
|
|
console.log(this.canvas);
|
|
|
|
|
console.log(this.imgpic);
|
|
|
|
|
this.canvas.width = this.imgpic.offsetWidth; //设置画布大小
|
|
|
|
|
this.canvas.height = this.imgpic.offsetHeight; //设置画布大小
|
|
|
|
|
this.ctx = this.canvas.getContext("2d");
|
|
|
|
|
console.log(localStorage.getItem("piclinePoints"));
|
|
|
|
|
this.localPoints = JSON.parse(localStorage.getItem("piclinePoints"));
|
|
|
|
|
if (this.localPoints !== "") {
|
|
|
|
|
this.drawline();
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
hide() {
|
|
|
|
|
this.isShow = false;
|
|
|
|
|
this.pictureData = "";
|
|
|
|
|
this.picoptions = [];
|
|
|
|
|
this.picvalue = "";
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
mousedown(e) {
|
|
|
|
|
console.log("鼠标落下");
|
|
|
|
|
this.saveDrawingSurface();
|
|
|
|
|
this.flag = true;
|
|
|
|
|
this.x = e.offsetX; // 鼠标落下时的X
|
|
|
|
|
this.y = e.offsetY; // 鼠标落下时的Y
|
|
|
|
|
console.log(this.x, this.y);
|
|
|
|
|
console.log(this.flag);
|
|
|
|
|
},
|
|
|
|
|
mouseup(e) {
|
|
|
|
|
console.log("鼠标抬起");
|
|
|
|
|
console.log(this.x, this.y, e.offsetX, e.offsetY);
|
|
|
|
|
this.drawRect(e);
|
|
|
|
|
this.flag = false;
|
|
|
|
|
this.linePoints.push({
|
|
|
|
|
x1: this.x,
|
|
|
|
|
y1: this.y,
|
|
|
|
|
x2: e.offsetX,
|
|
|
|
|
y2: e.offsetY,
|
|
|
|
|
});
|
|
|
|
|
console.log(this.linePoints);
|
|
|
|
|
},
|
|
|
|
|
//保存和恢复绘图面板
|
|
|
|
|
|
|
|
|
|
saveDrawingSurface() {
|
|
|
|
|
this.drawingSurfaceImageData = this.ctx.getImageData(
|
|
|
|
|
0,
|
|
|
|
|
0,
|
|
|
|
|
this.canvas.width,
|
|
|
|
|
this.canvas.height
|
|
|
|
|
);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
restoreDrawingSurface() {
|
|
|
|
|
this.ctx.putImageData(this.drawingSurfaceImageData, 0, 0);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
mousemove(e) {
|
|
|
|
|
console.log("鼠标移动");
|
|
|
|
|
if (this.flag) {
|
|
|
|
|
this.restoreDrawingSurface();
|
|
|
|
|
this.drawRect(e);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
drawRect(e) {
|
|
|
|
|
if (this.flag) {
|
|
|
|
|
console.log("绘制图形");
|
|
|
|
|
let x = this.x;
|
|
|
|
|
let y = this.y;
|
|
|
|
|
// ctx.save();
|
|
|
|
|
this.ctx.beginPath();
|
|
|
|
|
//设置线条颜色，必须放在绘制之前
|
|
|
|
|
this.ctx.strokeStyle = this.color;
|
|
|
|
|
// 线宽设置，必须放在绘制之前
|
|
|
|
|
this.ctx.lineWidth = this.num;
|
|
|
|
|
// console.log(x, y, e.offsetX, e.offsetY);
|
|
|
|
|
// this.ctx.strokeRect(x, y, e.offsetX - x, e.offsetY - y);
|
|
|
|
|
|
|
|
|
|
this.ctx.moveTo(x, y);
|
|
|
|
|
this.ctx.lineTo(e.offsetX, e.offsetY);
|
|
|
|
|
// this.ctx.moveTo(this.defult[0].x1, this.defult[0].y1);
|
|
|
|
|
// this.ctx.lineTo(this.defult[0].x2, this.defult[0].y2);
|
|
|
|
|
this.ctx.closePath();
|
|
|
|
|
|
|
|
|
|
this.ctx.stroke();
|
|
|
|
|
} else {
|
|
|
|
|
console.log("aaaaaaaa");
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
drawline() {
|
|
|
|
|
console.log(this.localPoints);
|
|
|
|
|
this.ctx.beginPath();
|
|
|
|
|
//设置线条颜色，必须放在绘制之前
|
|
|
|
|
this.ctx.strokeStyle = this.color;
|
|
|
|
|
// 线宽设置，必须放在绘制之前
|
|
|
|
|
this.ctx.lineWidth = this.num;
|
|
|
|
|
for (var i = 0; i < this.localPoints.length; i++) {
|
|
|
|
|
this.ctx.moveTo(this.localPoints[i].x1, this.localPoints[i].y1);
|
|
|
|
|
this.ctx.lineTo(this.localPoints[i].x2, this.localPoints[i].y2);
|
|
|
|
|
}
|
|
|
|
|
// this.ctx.moveTo(x, y);
|
|
|
|
|
// this.ctx.lineTo(e.offsetX, e.offsetY);
|
|
|
|
|
|
|
|
|
|
this.ctx.closePath();
|
|
|
|
|
|
|
|
|
|
this.ctx.stroke();
|
|
|
|
|
},
|
|
|
|
|
//点击保存
|
|
|
|
|
saveCanvas() {
|
|
|
|
|
console.log(this.linePoints);
|
|
|
|
|
localStorage.setItem("piclinePoints", JSON.stringify(this.linePoints));
|
|
|
|
|
},
|
|
|
|
|
restCanvas() {
|
|
|
|
|
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
|
|
|
|
this.linePoints = [];
|
|
|
|
|
console.log(this.linePoints);
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
<style lang="less">
|
|
|
|
|
.pictureTagsDialog {
|
|
|
|
|
.el-dialog {
|
|
|
|
|
height: 672px;
|
|
|
|
|
.el-dialog__body {
|
|
|
|
|
height: 540px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.picPannel {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: row;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
position: relative;
|
|
|
|
|
height: 100%;
|
|
|
|
|
.imgbox {
|
|
|
|
|
//flex: 1;
|
|
|
|
|
width: 960px;
|
|
|
|
|
height: 540px;
|
|
|
|
|
position: relative;
|
|
|
|
|
img {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
.myCanvas {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.setBox {
|
|
|
|
|
width: 230px;
|
|
|
|
|
padding: 12px;
|
|
|
|
|
border: 3px solid #2d8cf0;
|
|
|
|
|
.infoCompany {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
line-height: 32px;
|
|
|
|
|
margin-bottom: 16px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.setColor {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
line-height: 32px;
|
|
|
|
|
p {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
margin-bottom: 16px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
fanluyan
2 years ago