|
|
|
@ -85,7 +85,7 @@
|
|
|
|
</el-form>
|
|
|
|
</el-form>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="alarmContain" v-loading="loading" v-if="tableShow">
|
|
|
|
<div class="alarmContain" v-loading="loading" v-if="!tableShow">
|
|
|
|
<div class="alarmTable">
|
|
|
|
<div class="alarmTable">
|
|
|
|
<el-table
|
|
|
|
<el-table
|
|
|
|
ref="multipleTable"
|
|
|
|
ref="multipleTable"
|
|
|
|
@ -99,6 +99,9 @@
|
|
|
|
@row-click="handleRowClick"
|
|
|
|
@row-click="handleRowClick"
|
|
|
|
highlight-current-row
|
|
|
|
highlight-current-row
|
|
|
|
>
|
|
|
|
>
|
|
|
|
|
|
|
|
<template slot="empty">
|
|
|
|
|
|
|
|
<el-empty :image-size="160" description="暂无数据"></el-empty>
|
|
|
|
|
|
|
|
</template>
|
|
|
|
<el-table-column min-width="45" label="序号">
|
|
|
|
<el-table-column min-width="45" label="序号">
|
|
|
|
<template slot-scope="scope">
|
|
|
|
<template slot-scope="scope">
|
|
|
|
<span>{{ (page - 1) * pageSize + scope.$index + 1 }}</span>
|
|
|
|
<span>{{ (page - 1) * pageSize + scope.$index + 1 }}</span>
|
|
|
|
@ -247,15 +250,12 @@
|
|
|
|
class="box-card imgList"
|
|
|
|
class="box-card imgList"
|
|
|
|
v-for="(item, index) in tableData"
|
|
|
|
v-for="(item, index) in tableData"
|
|
|
|
:key="index"
|
|
|
|
:key="index"
|
|
|
|
|
|
|
|
:class="current === index ? 'bgColor' : ''"
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<div class="bigpic">
|
|
|
|
<div class="bigpic">
|
|
|
|
<div class="picshow" @click="handlePicAlarm(item)">
|
|
|
|
<div class="picshow" @click="handlePicAlarm(item, index)">
|
|
|
|
<img :src="item.path + '!1366x768'" :ref="'picJpg' + index" />
|
|
|
|
<img :src="item.path + '!1366x768'" ref="picJpg" />
|
|
|
|
<canvas
|
|
|
|
<canvas id="myCanvas" class="myCanvas" ref="myCanvas"></canvas>
|
|
|
|
:id="'myCanvas' + index"
|
|
|
|
|
|
|
|
class="myCanvas"
|
|
|
|
|
|
|
|
:ref="'myCanvas' + index"
|
|
|
|
|
|
|
|
></canvas>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="caption">
|
|
|
|
<div class="caption">
|
|
|
|
@ -281,10 +281,10 @@
|
|
|
|
<el-button
|
|
|
|
<el-button
|
|
|
|
type="primary"
|
|
|
|
type="primary"
|
|
|
|
:loading="btnpicloading"
|
|
|
|
:loading="btnpicloading"
|
|
|
|
@click="handlePicList(item)"
|
|
|
|
@click.stop="handlePicList(item)"
|
|
|
|
>主动拍照</el-button
|
|
|
|
>主动拍照</el-button
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<el-button type="primary" @click="handlePicHistory(item)"
|
|
|
|
<el-button type="primary" @click.stop="handlePicHistory(item)"
|
|
|
|
>历史图片</el-button
|
|
|
|
>历史图片</el-button
|
|
|
|
>
|
|
|
|
>
|
|
|
|
</p>
|
|
|
|
</p>
|
|
|
|
@ -319,8 +319,8 @@
|
|
|
|
<img @load="imgOnload" class="maskPic img" :src="bigPhotoPic" />
|
|
|
|
<img @load="imgOnload" class="maskPic img" :src="bigPhotoPic" />
|
|
|
|
<canvas id="myCanvas" class="myCanvas" ref="myCanvasbig"></canvas>
|
|
|
|
<canvas id="myCanvas" class="myCanvas" ref="myCanvasbig"></canvas>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="viewClose">
|
|
|
|
<div class="viewClose" @click="closePic">
|
|
|
|
<i @click="closePic" class="el-icon-close"></i>
|
|
|
|
<i class="el-icon-close"></i>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<historyimg ref="historyimg_ref"></historyimg>
|
|
|
|
<historyimg ref="historyimg_ref"></historyimg>
|
|
|
|
@ -385,6 +385,7 @@ export default {
|
|
|
|
tableShow: true, //表格展示
|
|
|
|
tableShow: true, //表格展示
|
|
|
|
zoomD: 1,
|
|
|
|
zoomD: 1,
|
|
|
|
canvansdata: "",
|
|
|
|
canvansdata: "",
|
|
|
|
|
|
|
|
current: 0,
|
|
|
|
};
|
|
|
|
};
|
|
|
|
},
|
|
|
|
},
|
|
|
|
mounted() {
|
|
|
|
mounted() {
|
|
|
|
@ -450,8 +451,6 @@ export default {
|
|
|
|
document.querySelector(
|
|
|
|
document.querySelector(
|
|
|
|
".picboxI"
|
|
|
|
".picboxI"
|
|
|
|
).style.transform = `matrix(${this.zoomD}, 0, 0,${this.zoomD}, 0, 0)`;
|
|
|
|
).style.transform = `matrix(${this.zoomD}, 0, 0,${this.zoomD}, 0, 0)`;
|
|
|
|
|
|
|
|
|
|
|
|
this.drawline2(this.canvansdata);
|
|
|
|
|
|
|
|
});
|
|
|
|
});
|
|
|
|
},
|
|
|
|
},
|
|
|
|
// 小
|
|
|
|
// 小
|
|
|
|
@ -463,7 +462,6 @@ export default {
|
|
|
|
document.querySelector(
|
|
|
|
document.querySelector(
|
|
|
|
".picboxI"
|
|
|
|
".picboxI"
|
|
|
|
).style.transform = `matrix(${this.zoomD}, 0, 0, ${this.zoomD}, 0, 0)`;
|
|
|
|
).style.transform = `matrix(${this.zoomD}, 0, 0, ${this.zoomD}, 0, 0)`;
|
|
|
|
this.drawline2(this.canvansdata);
|
|
|
|
|
|
|
|
});
|
|
|
|
});
|
|
|
|
},
|
|
|
|
},
|
|
|
|
handleBigPicbox(val) {
|
|
|
|
handleBigPicbox(val) {
|
|
|
|
@ -615,8 +613,10 @@ export default {
|
|
|
|
this.ctx.closePath();
|
|
|
|
this.ctx.closePath();
|
|
|
|
this.ctx.stroke();
|
|
|
|
this.ctx.stroke();
|
|
|
|
},
|
|
|
|
},
|
|
|
|
//绘制告警区域
|
|
|
|
//绘制大图告警区域
|
|
|
|
drawline2(data) {
|
|
|
|
drawline2(data) {
|
|
|
|
|
|
|
|
console.log(data);
|
|
|
|
|
|
|
|
console.log(this.canvas);
|
|
|
|
this.canvas = this.$refs.myCanvasbig;
|
|
|
|
this.canvas = this.$refs.myCanvasbig;
|
|
|
|
this.imgpic = this.$refs.picJpg;
|
|
|
|
this.imgpic = this.$refs.picJpg;
|
|
|
|
this.textInfo = data.enname;
|
|
|
|
this.textInfo = data.enname;
|
|
|
|
@ -654,6 +654,49 @@ export default {
|
|
|
|
this.ctx.closePath();
|
|
|
|
this.ctx.closePath();
|
|
|
|
this.ctx.stroke();
|
|
|
|
this.ctx.stroke();
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
//绘制列表大图
|
|
|
|
|
|
|
|
drawlineList(data, index) {
|
|
|
|
|
|
|
|
console.log(data);
|
|
|
|
|
|
|
|
console.log(this.$refs.myCanvasbig);
|
|
|
|
|
|
|
|
console.log(this.$refs.picJpg);
|
|
|
|
|
|
|
|
console.log("picJpg" + index);
|
|
|
|
|
|
|
|
this.canvas = this.$refs.myCanvasbig;
|
|
|
|
|
|
|
|
this.imgpic = this.$refs.picJpg;
|
|
|
|
|
|
|
|
this.textInfo = data.enname;
|
|
|
|
|
|
|
|
this.canvas.width = this.imgpic[index].offsetWidth; //设置画布大小
|
|
|
|
|
|
|
|
this.canvas.height = this.imgpic[index].offsetHeight; //设置画布大小
|
|
|
|
|
|
|
|
console.log(this.canvas.width, this.canvas.height);
|
|
|
|
|
|
|
|
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图片的宽
|
|
|
|
|
|
|
|
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 = "16px normal";
|
|
|
|
|
|
|
|
this.ctx.fillStyle = "#ff0000";
|
|
|
|
|
|
|
|
//this.ctx.fillText(this.textInfo, top, left + 24);
|
|
|
|
|
|
|
|
//距离上面有空间
|
|
|
|
|
|
|
|
if (left > 32) {
|
|
|
|
|
|
|
|
this.ctx.fillText(this.textInfo, top, left - 4);
|
|
|
|
|
|
|
|
} else if (this.canvas.height - left + height > 32) {
|
|
|
|
|
|
|
|
this.ctx.fillText(this.textInfo, top, height - 4);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
this.ctx.closePath();
|
|
|
|
|
|
|
|
this.ctx.stroke();
|
|
|
|
|
|
|
|
},
|
|
|
|
//点击当前行
|
|
|
|
//点击当前行
|
|
|
|
handleRowClick(row) {
|
|
|
|
handleRowClick(row) {
|
|
|
|
//this.$refs.multipleTable.toggleRowSelection(row);
|
|
|
|
//this.$refs.multipleTable.toggleRowSelection(row);
|
|
|
|
@ -757,16 +800,20 @@ export default {
|
|
|
|
this.selectRow = val;
|
|
|
|
this.selectRow = val;
|
|
|
|
this.handleHistory();
|
|
|
|
this.handleHistory();
|
|
|
|
},
|
|
|
|
},
|
|
|
|
handlePicAlarm(val) {
|
|
|
|
handlePicAlarm(val, index) {
|
|
|
|
console.log(val);
|
|
|
|
console.log(val, index);
|
|
|
|
|
|
|
|
this.current = index;
|
|
|
|
|
|
|
|
this.canvansdata = val;
|
|
|
|
this.canvasloading = true;
|
|
|
|
this.canvasloading = true;
|
|
|
|
if (val.path !== "" && this.tableData.length !== 0) {
|
|
|
|
if (val.path !== "" && this.tableData.length !== 0) {
|
|
|
|
console.log(val);
|
|
|
|
console.log(val);
|
|
|
|
this.bigPhotoPic = val.path;
|
|
|
|
this.bigPhotoPic = val.path;
|
|
|
|
this.showBigpic = true;
|
|
|
|
this.showBigpic = true;
|
|
|
|
// this.$nextTick(() => {
|
|
|
|
|
|
|
|
// this.drawline2(val);
|
|
|
|
this.$nextTick(() => {
|
|
|
|
// });
|
|
|
|
console.log("huatu");
|
|
|
|
|
|
|
|
this.drawlineList(val, index);
|
|
|
|
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
dateFormat(row, column) {
|
|
|
|
dateFormat(row, column) {
|
|
|
|
@ -987,7 +1034,8 @@ export default {
|
|
|
|
border-radius: 3px;
|
|
|
|
border-radius: 3px;
|
|
|
|
background: #fff;
|
|
|
|
background: #fff;
|
|
|
|
height: fit-content;
|
|
|
|
height: fit-content;
|
|
|
|
height: auto;
|
|
|
|
//height: auto;
|
|
|
|
|
|
|
|
border: 2px solid transparent;
|
|
|
|
.el-card__body {
|
|
|
|
.el-card__body {
|
|
|
|
padding: 0px;
|
|
|
|
padding: 0px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@ -1004,6 +1052,7 @@ export default {
|
|
|
|
z-index: 2;
|
|
|
|
z-index: 2;
|
|
|
|
left: 0;
|
|
|
|
left: 0;
|
|
|
|
top: 0;
|
|
|
|
top: 0;
|
|
|
|
|
|
|
|
pointer-events: none;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@ -1046,6 +1095,9 @@ export default {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.bgColor {
|
|
|
|
|
|
|
|
border: 2px solid #e49e61;
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
</style>
|
|
|
|
|
fanluyan
2 years ago