|
|
|
|
@ -77,10 +77,15 @@
|
|
|
|
|
<el-form-item>
|
|
|
|
|
<el-button type="primary" @click="onSubmit">查询</el-button>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<!-- <el-form-item>
|
|
|
|
|
<el-button type="primary" @click="handleListRow">{{
|
|
|
|
|
tableShow ? "图片列表" : "表格列表"
|
|
|
|
|
}}</el-button>
|
|
|
|
|
</el-form-item> -->
|
|
|
|
|
</el-form>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="alarmContain" v-loading="loading">
|
|
|
|
|
<div class="alarmContain" v-loading="loading" v-if="tableShow">
|
|
|
|
|
<div class="alarmTable">
|
|
|
|
|
<el-table
|
|
|
|
|
ref="multipleTable"
|
|
|
|
|
@ -182,15 +187,12 @@
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="alarmPic">
|
|
|
|
|
<div
|
|
|
|
|
class="imgshow"
|
|
|
|
|
v-loading="alarmLoading"
|
|
|
|
|
@click="handleBigPicbox(selectRow)"
|
|
|
|
|
>
|
|
|
|
|
<div class="imgshow" v-loading="alarmLoading">
|
|
|
|
|
<!-- @click="handleBigPicbox(selectRow)" -->
|
|
|
|
|
<div
|
|
|
|
|
class="picshow"
|
|
|
|
|
v-if="selectRow.path !== '' && tableData.length !== 0"
|
|
|
|
|
v-viewer="OptionssalseImg"
|
|
|
|
|
>
|
|
|
|
|
<!-- <div
|
|
|
|
|
class="nosee"
|
|
|
|
|
@ -235,6 +237,72 @@
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="pictureBox" v-else>
|
|
|
|
|
<div class="piclist" v-if="tableData.length !== 0">
|
|
|
|
|
<el-card
|
|
|
|
|
class="box-card imgList"
|
|
|
|
|
v-for="(item, index) in tableData"
|
|
|
|
|
:key="index"
|
|
|
|
|
>
|
|
|
|
|
<div class="bigpic">
|
|
|
|
|
<div class="picshow">
|
|
|
|
|
<img :src="item.path + '!1366x768'" :ref="'picJpg' + index" />
|
|
|
|
|
<canvas
|
|
|
|
|
id="myCanvas"
|
|
|
|
|
class="myCanvas"
|
|
|
|
|
:ref="'myCanvas' + index"
|
|
|
|
|
></canvas>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="caption">
|
|
|
|
|
<p class="infoTop">
|
|
|
|
|
{{ item.lineName }} /
|
|
|
|
|
{{
|
|
|
|
|
item.displayName !== null && item.displayName !== ""
|
|
|
|
|
? item.displayName
|
|
|
|
|
: item.cmdid
|
|
|
|
|
}}
|
|
|
|
|
/
|
|
|
|
|
{{
|
|
|
|
|
item.alias !== null && item.alias !== ""
|
|
|
|
|
? item.alias
|
|
|
|
|
: item.channnelName
|
|
|
|
|
}}
|
|
|
|
|
/ 告警原因：<span class="alarmInfo">({{ item.enname }})</span>
|
|
|
|
|
</p>
|
|
|
|
|
<p class="infoBottom">
|
|
|
|
|
告警时间：{{
|
|
|
|
|
$moment(item.alarmTime).format("YYYY-MM-DD HH:mm:ss")
|
|
|
|
|
}}
|
|
|
|
|
<el-button
|
|
|
|
|
type="primary"
|
|
|
|
|
:loading="btnpicloading"
|
|
|
|
|
@click="handlePicList(item)"
|
|
|
|
|
>主动拍照</el-button
|
|
|
|
|
>
|
|
|
|
|
<el-button type="primary" @click="handlePicHistory(item)"
|
|
|
|
|
>历史图片</el-button
|
|
|
|
|
>
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</el-card>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="piclist" v-else>
|
|
|
|
|
<el-empty description="暂无数据"></el-empty>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="pageNation">
|
|
|
|
|
<el-pagination
|
|
|
|
|
@current-change="handleCurrentChange"
|
|
|
|
|
@size-change="handleSizeChange"
|
|
|
|
|
:current-page="page"
|
|
|
|
|
:page-size="pageSize"
|
|
|
|
|
layout="sizes, prev, pager, next, jumper,total"
|
|
|
|
|
:total="total"
|
|
|
|
|
>
|
|
|
|
|
</el-pagination>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 点击出现大图 -->
|
|
|
|
|
<div
|
|
|
|
|
@ -310,6 +378,7 @@ export default {
|
|
|
|
|
selectRow: {},
|
|
|
|
|
alarmLoading: false,
|
|
|
|
|
canvasloading: false,
|
|
|
|
|
tableShow: true, //表格展示
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
@ -400,7 +469,7 @@ 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);
|
|
|
|
|
})
|
|
|
|
|
@ -454,13 +523,21 @@ export default {
|
|
|
|
|
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);
|
|
|
|
|
console.log(top, left, width, height);
|
|
|
|
|
console.log(this.canvas.width, this.canvas.height);
|
|
|
|
|
//距离上面有空间
|
|
|
|
|
if (left > 32) {
|
|
|
|
|
this.ctx.fillText(this.textInfo, top, left - 14);
|
|
|
|
|
} else if (this.canvas.height - left + height > 32) {
|
|
|
|
|
this.ctx.fillText(this.textInfo, top, height - 14);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
this.ctx.closePath();
|
|
|
|
|
this.ctx.stroke();
|
|
|
|
|
},
|
|
|
|
|
@ -583,6 +660,22 @@ export default {
|
|
|
|
|
this.$refs.historyimg_ref.display();
|
|
|
|
|
this.$refs.historyimg_ref.getdataform(this.selectRow);
|
|
|
|
|
},
|
|
|
|
|
//切换图片
|
|
|
|
|
handleListRow() {
|
|
|
|
|
this.tableShow = !this.tableShow;
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
//在图片列表也执行 自动拍照和 查看历史图片
|
|
|
|
|
handlePicList(val) {
|
|
|
|
|
console.log(val);
|
|
|
|
|
this.selectRow = val;
|
|
|
|
|
this.handleCommandpic();
|
|
|
|
|
},
|
|
|
|
|
handlePicHistory(val) {
|
|
|
|
|
console.log(val);
|
|
|
|
|
this.selectRow = val;
|
|
|
|
|
this.handleHistory();
|
|
|
|
|
},
|
|
|
|
|
dateFormat(row, column) {
|
|
|
|
|
var date = row[column.property];
|
|
|
|
|
if (date == undefined) {
|
|
|
|
|
@ -640,6 +733,7 @@ export default {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.viewClose {
|
|
|
|
|
@ -726,7 +820,6 @@ export default {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
|
|
.picshow {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
@ -758,6 +851,7 @@ export default {
|
|
|
|
|
height: 100%;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
z-index: 2;
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.editorBtn {
|
|
|
|
|
@ -772,5 +866,89 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.pictureBox {
|
|
|
|
|
height: calc(100% - 90px);
|
|
|
|
|
max-height: calc(100% - 90px);
|
|
|
|
|
.el-empty {
|
|
|
|
|
margin: auto;
|
|
|
|
|
}
|
|
|
|
|
.piclist {
|
|
|
|
|
display: flex;
|
|
|
|
|
// justify-content: space-around;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
overflow: auto;
|
|
|
|
|
border: 1px solid #eee;
|
|
|
|
|
height: calc(100% - 2px);
|
|
|
|
|
}
|
|
|
|
|
.imgList {
|
|
|
|
|
width: calc((100% - 104px) / 3);
|
|
|
|
|
position: relative;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
margin: 8px;
|
|
|
|
|
position: relative;
|
|
|
|
|
padding: 4px;
|
|
|
|
|
border-radius: 3px;
|
|
|
|
|
background: #fff;
|
|
|
|
|
height: fit-content;
|
|
|
|
|
height: 320px;
|
|
|
|
|
.el-card__body {
|
|
|
|
|
padding: 0px;
|
|
|
|
|
}
|
|
|
|
|
.bigpic {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
.picshow {
|
|
|
|
|
position: relative;
|
|
|
|
|
.myCanvas {
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
z-index: 2;
|
|
|
|
|
left: 0;
|
|
|
|
|
top: 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
img {
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 250px;
|
|
|
|
|
object-fit: fill;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.caption {
|
|
|
|
|
padding: 9px;
|
|
|
|
|
color: #333;
|
|
|
|
|
.alarmInfo {
|
|
|
|
|
color: #e49e61;
|
|
|
|
|
}
|
|
|
|
|
.infoTop {
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
color: #000;
|
|
|
|
|
font-weight: normal;
|
|
|
|
|
margin-top: 2px;
|
|
|
|
|
padding-left: 5px;
|
|
|
|
|
padding-right: 5px;
|
|
|
|
|
}
|
|
|
|
|
.infoBottom {
|
|
|
|
|
color: #000;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
font-weight: normal;
|
|
|
|
|
margin-top: 6px;
|
|
|
|
|
padding-left: 5px;
|
|
|
|
|
padding-right: 5px;
|
|
|
|
|
.el-button--small {
|
|
|
|
|
margin-left: 24px;
|
|
|
|
|
padding: 4px;
|
|
|
|
|
width: 78px;
|
|
|
|
|
}
|
|
|
|
|
.el-button + .el-button {
|
|
|
|
|
margin-left: 10px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
fanluyan
2 years ago