|
|
|
|
@ -0,0 +1,172 @@
|
|
|
|
|
<template>
|
|
|
|
|
<el-dialog
|
|
|
|
|
class="pictureTagsDialog"
|
|
|
|
|
title="图片绘制"
|
|
|
|
|
:visible.sync="isShow"
|
|
|
|
|
:close-on-click-modal="false"
|
|
|
|
|
width="1000px"
|
|
|
|
|
>
|
|
|
|
|
<div class="picPannel">
|
|
|
|
|
<div class="imgbox">
|
|
|
|
|
<img
|
|
|
|
|
src="http://47.96.238.157/image/2023/04/24/01/DSH10H00000000001_1_FF_20230424192442.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>i1测试线路-SH</span></p>
|
|
|
|
|
<p><label>装置名称：</label><span>XY-SIMULATOR-0001</span></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">重新绘制</el-button>
|
|
|
|
|
<el-button type="primary">保存绘制</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 {
|
|
|
|
|
color: "#409EFF",
|
|
|
|
|
num: 1,
|
|
|
|
|
flag: false,
|
|
|
|
|
x: 0,
|
|
|
|
|
y: 0,
|
|
|
|
|
isShow: false,
|
|
|
|
|
fileList: [],
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
mounted() {},
|
|
|
|
|
methods: {
|
|
|
|
|
//获取线宽
|
|
|
|
|
handleChange(value) {
|
|
|
|
|
console.log(value);
|
|
|
|
|
},
|
|
|
|
|
// 保存确定操作
|
|
|
|
|
submitForm() {
|
|
|
|
|
this.isShow = false;
|
|
|
|
|
},
|
|
|
|
|
display() {
|
|
|
|
|
this.isShow = true;
|
|
|
|
|
},
|
|
|
|
|
hide() {
|
|
|
|
|
this.isShow = false;
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
mousedown(e) {
|
|
|
|
|
console.log("鼠标落下");
|
|
|
|
|
this.flag = true;
|
|
|
|
|
this.x = e.offsetX; // 鼠标落下时的X
|
|
|
|
|
this.y = e.offsetY; // 鼠标落下时的Y
|
|
|
|
|
console.log(this.x, this.y);
|
|
|
|
|
},
|
|
|
|
|
mouseup(e) {
|
|
|
|
|
console.log("鼠标抬起");
|
|
|
|
|
this.flag = false;
|
|
|
|
|
},
|
|
|
|
|
mousemove(e) {
|
|
|
|
|
console.log("鼠标移动");
|
|
|
|
|
this.drawRect(e);
|
|
|
|
|
},
|
|
|
|
|
drawRect(e) {
|
|
|
|
|
if (this.flag) {
|
|
|
|
|
console.log("绘制图形");
|
|
|
|
|
const canvas = this.$refs.myCanvas;
|
|
|
|
|
var ctx = canvas.getContext("2d");
|
|
|
|
|
let x = this.x;
|
|
|
|
|
let y = this.y;
|
|
|
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
|
|
|
ctx.beginPath();
|
|
|
|
|
//设置线条颜色，必须放在绘制之前
|
|
|
|
|
ctx.strokeStyle = this.color;
|
|
|
|
|
// 线宽设置，必须放在绘制之前
|
|
|
|
|
ctx.lineWidth = this.num;
|
|
|
|
|
console.log(x, y, e.offsetX - x, e.offsetY - y);
|
|
|
|
|
ctx.strokeRect(x, y, e.offsetX - x, e.offsetY - y);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
<style lang="less">
|
|
|
|
|
.pictureTagsDialog {
|
|
|
|
|
.picPannel {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: row;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
position: relative;
|
|
|
|
|
.imgbox {
|
|
|
|
|
width: 698px;
|
|
|
|
|
position: relative;
|
|
|
|
|
img {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
.myCanvas {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.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