|
|
|
|
@ -7,11 +7,8 @@
|
|
|
|
|
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"
|
|
|
|
|
/>
|
|
|
|
|
<div class="imgbox" v-if="picsrc">
|
|
|
|
|
<img ref="picJpg" :src="picsrc" />
|
|
|
|
|
<canvas
|
|
|
|
|
id="myCanvas"
|
|
|
|
|
class="myCanvas"
|
|
|
|
|
@ -21,6 +18,9 @@
|
|
|
|
|
@mousemove="mousemove"
|
|
|
|
|
></canvas>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="imgbox" v-else>
|
|
|
|
|
<img ref="picJpg" src="../../../../../assets/img/loading.jpg" />
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="setBox">
|
|
|
|
|
<div class="infoCompany">
|
|
|
|
|
@ -36,12 +36,16 @@
|
|
|
|
|
</p>
|
|
|
|
|
<p>
|
|
|
|
|
<label>选择通道：</label>
|
|
|
|
|
<el-select v-model="picvalue" placeholder="请选择">
|
|
|
|
|
<el-select
|
|
|
|
|
v-model="picvalue"
|
|
|
|
|
placeholder="请选择"
|
|
|
|
|
@change="changePic($event)"
|
|
|
|
|
>
|
|
|
|
|
<el-option
|
|
|
|
|
v-for="item in picoptions"
|
|
|
|
|
:key="item.id"
|
|
|
|
|
:label="item.name"
|
|
|
|
|
:value="item.name"
|
|
|
|
|
:value="item.id"
|
|
|
|
|
>
|
|
|
|
|
</el-option>
|
|
|
|
|
</el-select>
|
|
|
|
|
@ -64,7 +68,7 @@
|
|
|
|
|
</p>
|
|
|
|
|
<p>
|
|
|
|
|
<el-button type="primary" @click="restCanvas">重新绘制</el-button>
|
|
|
|
|
<el-button type="primary" @click="saveCanvas">保存绘制</el-button>
|
|
|
|
|
<!-- <el-button type="primary" @click="saveCanvas">保存绘制</el-button> -->
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
@ -76,6 +80,7 @@
|
|
|
|
|
</el-dialog>
|
|
|
|
|
</template>
|
|
|
|
|
<script>
|
|
|
|
|
import { updateCoordinate } from "@/utils/api/index";
|
|
|
|
|
export default {
|
|
|
|
|
props: {
|
|
|
|
|
title: String,
|
|
|
|
|
@ -98,10 +103,29 @@ export default {
|
|
|
|
|
picvalue: "",
|
|
|
|
|
linePoints: [],
|
|
|
|
|
localPoints: [],
|
|
|
|
|
picsrc: "",
|
|
|
|
|
channelId: "", //通道id
|
|
|
|
|
termId: "",
|
|
|
|
|
markId: "",
|
|
|
|
|
cmdid: "",
|
|
|
|
|
photoId: "",
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
mounted() {},
|
|
|
|
|
methods: {
|
|
|
|
|
//切换通道
|
|
|
|
|
changePic(val) {
|
|
|
|
|
var obj = {};
|
|
|
|
|
obj = this.picoptions.find(function (i) {
|
|
|
|
|
return i.id === val;
|
|
|
|
|
});
|
|
|
|
|
console.log(obj);
|
|
|
|
|
// console.log(id);
|
|
|
|
|
this.picsrc = obj.path;
|
|
|
|
|
this.channelId = obj.id;
|
|
|
|
|
this.photoId = obj.photoId;
|
|
|
|
|
// console.log(this.picsrc);
|
|
|
|
|
},
|
|
|
|
|
//获取线宽
|
|
|
|
|
handleChange(value) {
|
|
|
|
|
console.log(value);
|
|
|
|
|
@ -109,6 +133,7 @@ export default {
|
|
|
|
|
// 保存确定操作
|
|
|
|
|
submitForm() {
|
|
|
|
|
this.isShow = false;
|
|
|
|
|
this.saveCanvas();
|
|
|
|
|
},
|
|
|
|
|
display(val) {
|
|
|
|
|
this.isShow = true;
|
|
|
|
|
@ -116,22 +141,27 @@ export default {
|
|
|
|
|
this.pictureData = val; //获取当前列表数据
|
|
|
|
|
this.picoptions = val.list; //获取所有通道
|
|
|
|
|
this.picvalue = val.list[0].name; //获取第一个通道
|
|
|
|
|
this.picsrc = val.list[0].path;
|
|
|
|
|
this.channelId = val.list[0].id;
|
|
|
|
|
this.termId = val.id;
|
|
|
|
|
this.markId = val.markId;
|
|
|
|
|
this.cmdid = val.cmdid;
|
|
|
|
|
this.photoId = val.list[0].photoId;
|
|
|
|
|
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 !== "") {
|
|
|
|
|
//console.log(localStorage.getItem("piclinePoints"));
|
|
|
|
|
|
|
|
|
|
this.localPoints = val.lineList;
|
|
|
|
|
|
|
|
|
|
this.drawline();
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
hide() {
|
|
|
|
|
@ -242,7 +272,26 @@ export default {
|
|
|
|
|
//点击保存
|
|
|
|
|
saveCanvas() {
|
|
|
|
|
console.log(this.linePoints);
|
|
|
|
|
localStorage.setItem("piclinePoints", JSON.stringify(this.linePoints));
|
|
|
|
|
// localStorage.setItem(this.cmdid, JSON.stringify(this.linePoints));
|
|
|
|
|
updateCoordinate({
|
|
|
|
|
boderWidth: this.num,
|
|
|
|
|
channelId: this.channelId,
|
|
|
|
|
color: this.color,
|
|
|
|
|
height: this.imgpic.height,
|
|
|
|
|
id: this.markId,
|
|
|
|
|
list: this.linePoints,
|
|
|
|
|
termId: this.termId,
|
|
|
|
|
width: this.imgpic.width,
|
|
|
|
|
photoId: this.photoId,
|
|
|
|
|
})
|
|
|
|
|
.then((res) => {
|
|
|
|
|
console.log(res);
|
|
|
|
|
this.$message({
|
|
|
|
|
type: "success",
|
|
|
|
|
message: "绘制保存成功",
|
|
|
|
|
});
|
|
|
|
|
})
|
|
|
|
|
.catch((err) => {});
|
|
|
|
|
},
|
|
|
|
|
restCanvas() {
|
|
|
|
|
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
|
|
|
|
|
fanluyan
2 years ago