|
|
|
|
@ -182,12 +182,34 @@
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="alarmPic">
|
|
|
|
|
<div class="imgshow" @click="handleBigPicbox(selectRow)">
|
|
|
|
|
<div
|
|
|
|
|
class="imgshow"
|
|
|
|
|
v-loading="alarmLoading"
|
|
|
|
|
@click="handleBigPicbox(selectRow)"
|
|
|
|
|
>
|
|
|
|
|
<!-- @click="handleBigPicbox(selectRow)" -->
|
|
|
|
|
<div
|
|
|
|
|
class="picshow"
|
|
|
|
|
v-if="selectRow.path !== '' && tableData.length !== 0"
|
|
|
|
|
>
|
|
|
|
|
<img ref="picJpg" :src="photoPic" />
|
|
|
|
|
<!-- <div
|
|
|
|
|
class="nosee"
|
|
|
|
|
:style="'backgroundImage:url(' + photoPic + '!1280x720)'"
|
|
|
|
|
></div>
|
|
|
|
|
<viewer :options="OptionssalseImg" class="bigimgView">
|
|
|
|
|
<img
|
|
|
|
|
@load="imgOnload"
|
|
|
|
|
ref="picJpg"
|
|
|
|
|
class="animImg"
|
|
|
|
|
:src="photoPic + '!1280x720'"
|
|
|
|
|
/>
|
|
|
|
|
</viewer> -->
|
|
|
|
|
<img
|
|
|
|
|
@load="imgOnload"
|
|
|
|
|
ref="picJpg"
|
|
|
|
|
class="animImg"
|
|
|
|
|
:src="photoPic + '!1280x720'"
|
|
|
|
|
/>
|
|
|
|
|
<canvas id="myCanvas" class="myCanvas" ref="myCanvas"></canvas>
|
|
|
|
|
</div>
|
|
|
|
|
<img
|
|
|
|
|
@ -215,11 +237,18 @@
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 点击出现大图 -->
|
|
|
|
|
<div v-if="showBigpic" class="showPic" @click="closePic">
|
|
|
|
|
<div
|
|
|
|
|
v-if="showBigpic"
|
|
|
|
|
class="showPic"
|
|
|
|
|
@click="closePic"
|
|
|
|
|
v-loading="canvasloading"
|
|
|
|
|
>
|
|
|
|
|
<div class="picboxI">
|
|
|
|
|
<img class="maskPic" :src="bigPhotoPic" />
|
|
|
|
|
<!-- <canvas id="myCanvas" class="myCanvas" ref="myCanvas"></canvas> -->
|
|
|
|
|
<i @click="closePic" class="el-icon-circle-close"></i>
|
|
|
|
|
<img @load="imgOnload" class="maskPic" :src="bigPhotoPic" />
|
|
|
|
|
<canvas id="myCanvas" class="myCanvas" ref="myCanvas2"></canvas>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="viewClose">
|
|
|
|
|
<i @click="closePic" class="el-icon-close"></i>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<historyimg ref="historyimg_ref"></historyimg>
|
|
|
|
|
@ -243,6 +272,16 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
OptionssalseImg: {
|
|
|
|
|
inline: false,
|
|
|
|
|
button: true,
|
|
|
|
|
navbar: false,
|
|
|
|
|
title: false,
|
|
|
|
|
toolbar: false,
|
|
|
|
|
tooltip: false,
|
|
|
|
|
zoomable: true,
|
|
|
|
|
url: "src",
|
|
|
|
|
},
|
|
|
|
|
dyOptions: [{ id: 0, name: "全部" }], //电压数据
|
|
|
|
|
xlOptions: [{ id: 0, name: "全部" }], //线路数据
|
|
|
|
|
gtOptions: [{ id: 0, name: "全部" }], //杆塔数据
|
|
|
|
|
@ -269,6 +308,8 @@ export default {
|
|
|
|
|
textInfo: "",
|
|
|
|
|
bigPhotoPic: "", //大图路径
|
|
|
|
|
selectRow: {},
|
|
|
|
|
alarmLoading: false,
|
|
|
|
|
canvasloading: false,
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
@ -286,13 +327,19 @@ export default {
|
|
|
|
|
this.getTableList();
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
imgOnload() {
|
|
|
|
|
console.log("加载完成");
|
|
|
|
|
//this.alarmLoading = false;
|
|
|
|
|
this.canvasloading = false;
|
|
|
|
|
},
|
|
|
|
|
handleBigPicbox(val) {
|
|
|
|
|
if (val.path !== "" && tableData.length !== 0) {
|
|
|
|
|
this.canvasloading = true;
|
|
|
|
|
if (val.path !== "" && this.tableData.length !== 0) {
|
|
|
|
|
console.log(val);
|
|
|
|
|
this.bigPhotoPic = val.path;
|
|
|
|
|
this.showBigpic = true;
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
this.drawline(val);
|
|
|
|
|
this.drawline2(val);
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
@ -358,7 +405,6 @@ export default {
|
|
|
|
|
this.photoPic = res.data.list[0].path;
|
|
|
|
|
this.selectRow = res.data.list[0];
|
|
|
|
|
console.log(this.selectRow);
|
|
|
|
|
|
|
|
|
|
// 别忘了标签上定义ref 这里的 myTable就说获取的标签上的ref命的名
|
|
|
|
|
this.$refs.multipleTable.setCurrentRow(this.selectRow);
|
|
|
|
|
this.handleRowClick(this.selectRow);
|
|
|
|
|
@ -405,6 +451,37 @@ export default {
|
|
|
|
|
this.ctx.strokeStyle = "#ff0000";
|
|
|
|
|
// 线宽设置，必须放在绘制之前
|
|
|
|
|
this.ctx.lineWidth = 1;
|
|
|
|
|
// 绘制矩形
|
|
|
|
|
var scaleX = this.canvas.width / data.photoWidth, //this.iw图片的宽
|
|
|
|
|
scaleY = this.canvas.height / data.photoHeight; //this.ih图片的高
|
|
|
|
|
console.log(scaleX, scaleY);
|
|
|
|
|
var top = data.x * scaleX,
|
|
|
|
|
left = data.y * scaleY,
|
|
|
|
|
width = data.width * scaleX,
|
|
|
|
|
height = data.height * scaleY;
|
|
|
|
|
console.log(top, left, width, height);
|
|
|
|
|
// this.ctx.strokeStyle = "red"; //线的颜色
|
|
|
|
|
this.ctx.strokeRect(top, left, width, height); //绘制路径矩形
|
|
|
|
|
//this.ctx.strokeRect(data.x, data.y, data.width, data.height);
|
|
|
|
|
this.ctx.font = "24px normal";
|
|
|
|
|
this.ctx.fillStyle = "#ff0000";
|
|
|
|
|
this.ctx.fillText(this.textInfo, top, left + 24);
|
|
|
|
|
this.ctx.closePath();
|
|
|
|
|
this.ctx.stroke();
|
|
|
|
|
},
|
|
|
|
|
//绘制告警区域
|
|
|
|
|
drawline2(data) {
|
|
|
|
|
this.canvas = this.$refs.myCanvas2;
|
|
|
|
|
this.imgpic = this.$refs.picJpg;
|
|
|
|
|
this.textInfo = data.enname;
|
|
|
|
|
this.canvas.width = this.imgpic.offsetWidth; //设置画布大小
|
|
|
|
|
this.canvas.height = this.imgpic.offsetHeight; //设置画布大小
|
|
|
|
|
this.ctx = this.canvas.getContext("2d");
|
|
|
|
|
this.ctx.beginPath();
|
|
|
|
|
//设置线条颜色，必须放在绘制之前
|
|
|
|
|
this.ctx.strokeStyle = "#ff0000";
|
|
|
|
|
// 线宽设置，必须放在绘制之前
|
|
|
|
|
this.ctx.lineWidth = 1;
|
|
|
|
|
|
|
|
|
|
// 绘制矩形
|
|
|
|
|
var scaleX = this.canvas.width / data.photoWidth, //this.iw图片的宽
|
|
|
|
|
@ -427,8 +504,10 @@ export default {
|
|
|
|
|
//点击当前行
|
|
|
|
|
handleRowClick(row) {
|
|
|
|
|
//this.$refs.multipleTable.toggleRowSelection(row);
|
|
|
|
|
//this.alarmLoading = true;
|
|
|
|
|
console.log(row);
|
|
|
|
|
this.photoPic = row.path;
|
|
|
|
|
console.log(this.photoPic);
|
|
|
|
|
this.selectRow = row;
|
|
|
|
|
//未读变已读
|
|
|
|
|
if (row.isread == 0) {
|
|
|
|
|
@ -446,6 +525,11 @@ export default {
|
|
|
|
|
});
|
|
|
|
|
}, 300);
|
|
|
|
|
}
|
|
|
|
|
setTimeout(function () {
|
|
|
|
|
console.log("关闭遮罩");
|
|
|
|
|
this.alarmLoading = false;
|
|
|
|
|
}, 1000);
|
|
|
|
|
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
this.drawline(row);
|
|
|
|
|
});
|
|
|
|
|
@ -560,13 +644,25 @@ export default {
|
|
|
|
|
height: 100%;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
.el-icon-circle-close {
|
|
|
|
|
}
|
|
|
|
|
.viewClose {
|
|
|
|
|
-webkit-app-region: no-drag;
|
|
|
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
height: 80px;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: -40px;
|
|
|
|
|
top: -40px;
|
|
|
|
|
transition: background-color 0.15s;
|
|
|
|
|
width: 80px;
|
|
|
|
|
.el-icon-close {
|
|
|
|
|
bottom: 16px;
|
|
|
|
|
left: 16px;
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: -24px;
|
|
|
|
|
font-size: 48px;
|
|
|
|
|
color: #fff;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
top: -24px;
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@ -639,6 +735,20 @@ export default {
|
|
|
|
|
height: 100%;
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
.nosee {
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
z-index: 2;
|
|
|
|
|
}
|
|
|
|
|
.bigimgView {
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
z-index: 3;
|
|
|
|
|
opacity: 0;
|
|
|
|
|
}
|
|
|
|
|
img {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
@ -650,6 +760,7 @@ export default {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
z-index: 2;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.editorBtn {
|
|
|
|
|
|
fanluyan
2 years ago