|
|
|
|
@ -74,13 +74,25 @@
|
|
|
|
|
></el-option>
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item>
|
|
|
|
|
<el-input
|
|
|
|
|
v-model="formdata.search"
|
|
|
|
|
placeholder="请输入线路/杆塔/设备名称"
|
|
|
|
|
clearable
|
|
|
|
|
></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<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"
|
|
|
|
|
@ -94,6 +106,9 @@
|
|
|
|
|
@row-click="handleRowClick"
|
|
|
|
|
highlight-current-row
|
|
|
|
|
>
|
|
|
|
|
<template slot="empty">
|
|
|
|
|
<el-empty :image-size="160" description="暂无数据"></el-empty>
|
|
|
|
|
</template>
|
|
|
|
|
<el-table-column min-width="45" label="序号">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<span>{{ (page - 1) * pageSize + scope.$index + 1 }}</span>
|
|
|
|
|
@ -192,6 +207,7 @@
|
|
|
|
|
class="picshow"
|
|
|
|
|
v-if="selectRow.path !== '' && tableData.length !== 0"
|
|
|
|
|
>
|
|
|
|
|
<!-- v-viewer="OptionssalseImg" -->
|
|
|
|
|
<!-- <div
|
|
|
|
|
class="nosee"
|
|
|
|
|
:style="'backgroundImage:url(' + photoPic + '!1366x768)'"
|
|
|
|
|
@ -235,20 +251,87 @@
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="pictureBox" v-else v-loading="loading">
|
|
|
|
|
<div class="piclist" v-if="tableData.length !== 0">
|
|
|
|
|
<el-card
|
|
|
|
|
class="box-card imgList"
|
|
|
|
|
v-for="(item, index) in tableData"
|
|
|
|
|
:key="index"
|
|
|
|
|
:class="current === index ? 'bgColor' : ''"
|
|
|
|
|
>
|
|
|
|
|
<div class="bigpic">
|
|
|
|
|
<div class="picshow" @click="handlePicAlarm(item, index)">
|
|
|
|
|
<img :src="item.path + '!1366x768'" ref="picJpg" />
|
|
|
|
|
<!-- <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.stop="handlePicList(item)"
|
|
|
|
|
>主动拍照</el-button
|
|
|
|
|
>
|
|
|
|
|
<el-button type="primary" @click.stop="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 v-if="showBigpic" class="showPic" v-loading="canvasloading">
|
|
|
|
|
<div
|
|
|
|
|
v-if="showBigpic"
|
|
|
|
|
class="showPic"
|
|
|
|
|
@click="closePic"
|
|
|
|
|
v-loading="canvasloading"
|
|
|
|
|
class="picboxI"
|
|
|
|
|
@mousewheel.prevent="rollImg"
|
|
|
|
|
:style="{ transform: 'scale(' + zoomD + ')' }"
|
|
|
|
|
@mousedown="move"
|
|
|
|
|
>
|
|
|
|
|
<div class="picboxI">
|
|
|
|
|
<img @load="imgOnload" class="maskPic" :src="bigPhotoPic" />
|
|
|
|
|
<canvas id="myCanvas" class="myCanvas" ref="myCanvas2"></canvas>
|
|
|
|
|
<img @load="imgOnload" class="maskPic img" :src="bigPhotoPic" ref="" />
|
|
|
|
|
<canvas id="myCanvas" class="myCanvas" ref="myCanvasbig"></canvas>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="viewClose">
|
|
|
|
|
<i @click="closePic" class="el-icon-close"></i>
|
|
|
|
|
<div class="viewClose" @click="closePic">
|
|
|
|
|
<i class="el-icon-close"></i>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<historyimg ref="historyimg_ref"></historyimg>
|
|
|
|
|
@ -291,6 +374,7 @@ export default {
|
|
|
|
|
lineId: -1,
|
|
|
|
|
towerId: -1,
|
|
|
|
|
label: -1,
|
|
|
|
|
search: "",
|
|
|
|
|
// timeVal: "",
|
|
|
|
|
},
|
|
|
|
|
photoPic: "",
|
|
|
|
|
@ -310,6 +394,19 @@ export default {
|
|
|
|
|
selectRow: {},
|
|
|
|
|
alarmLoading: false,
|
|
|
|
|
canvasloading: false,
|
|
|
|
|
tableShow: true, //表格展示
|
|
|
|
|
zoomD: 1,
|
|
|
|
|
canvansdata: "",
|
|
|
|
|
current: 0,
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
created() {
|
|
|
|
|
var that = this;
|
|
|
|
|
document.onkeydown = function (e) {
|
|
|
|
|
var key = window.event.keyCode;
|
|
|
|
|
if (key === 13) {
|
|
|
|
|
that.onSubmit(); // 触发事件
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
@ -317,6 +414,10 @@ export default {
|
|
|
|
|
// new Date(new Date().toLocaleDateString()).getTime(),
|
|
|
|
|
// new Date().getTime(),
|
|
|
|
|
// ]);
|
|
|
|
|
// $("#elementToZoomOn").smartZoom({
|
|
|
|
|
// maxScale: 2,
|
|
|
|
|
// });
|
|
|
|
|
|
|
|
|
|
this.$set(
|
|
|
|
|
this.formdata,
|
|
|
|
|
"starttime",
|
|
|
|
|
@ -327,8 +428,66 @@ export default {
|
|
|
|
|
this.getTableList();
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
//移动demo
|
|
|
|
|
move(e) {
|
|
|
|
|
console.log(e);
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
// 获取元素
|
|
|
|
|
var personBox = document.querySelector(".picboxI");
|
|
|
|
|
var img = document.querySelector(".img");
|
|
|
|
|
var x = e.pageX - img.offsetLeft;
|
|
|
|
|
var y = e.pageY - img.offsetTop;
|
|
|
|
|
// 添加鼠标移动事件
|
|
|
|
|
personBox.addEventListener("mousemove", move);
|
|
|
|
|
function move(e) {
|
|
|
|
|
personBox.style.left = e.pageX - x + "px";
|
|
|
|
|
personBox.style.top = e.pageY - y + "px";
|
|
|
|
|
}
|
|
|
|
|
// 添加鼠标抬起事件，鼠标抬起，将事件移除
|
|
|
|
|
img.addEventListener("mouseup", function () {
|
|
|
|
|
personBox.removeEventListener("mousemove", move);
|
|
|
|
|
});
|
|
|
|
|
// 鼠标离开父级元素，把事件移除
|
|
|
|
|
personBox.addEventListener("mouseout", function () {
|
|
|
|
|
personBox.removeEventListener("mousemove", move);
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
// 缩放图片
|
|
|
|
|
rollImg(e) {
|
|
|
|
|
let direction = e.deltaY > 0 ? "down" : "up";
|
|
|
|
|
if (direction === "up") {
|
|
|
|
|
// 滑轮向上滚动
|
|
|
|
|
this.large();
|
|
|
|
|
} else {
|
|
|
|
|
// 滑轮向下滚动
|
|
|
|
|
this.Small();
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
//大
|
|
|
|
|
large() {
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
if (this.zoomD < 6) {
|
|
|
|
|
this.zoomD += 0.1;
|
|
|
|
|
}
|
|
|
|
|
document.querySelector(
|
|
|
|
|
".picboxI"
|
|
|
|
|
).style.transform = `matrix(${this.zoomD}, 0, 0,${this.zoomD}, 0, 0)`;
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
// 小
|
|
|
|
|
Small() {
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
if (this.zoomD > 0.3) {
|
|
|
|
|
this.zoomD -= 0.1;
|
|
|
|
|
}
|
|
|
|
|
document.querySelector(
|
|
|
|
|
".picboxI"
|
|
|
|
|
).style.transform = `matrix(${this.zoomD}, 0, 0, ${this.zoomD}, 0, 0)`;
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
handleBigPicbox(val) {
|
|
|
|
|
this.canvasloading = true;
|
|
|
|
|
this.canvansdata = val;
|
|
|
|
|
if (val.path !== "" && this.tableData.length !== 0) {
|
|
|
|
|
console.log(val);
|
|
|
|
|
this.bigPhotoPic = val.path;
|
|
|
|
|
@ -340,6 +499,7 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
closePic() {
|
|
|
|
|
this.showBigpic = false;
|
|
|
|
|
this.zoomD = 1;
|
|
|
|
|
},
|
|
|
|
|
//获取电压信息
|
|
|
|
|
getSearchdy() {
|
|
|
|
|
@ -400,7 +560,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);
|
|
|
|
|
})
|
|
|
|
|
@ -426,11 +585,13 @@ export default {
|
|
|
|
|
//点击分页
|
|
|
|
|
handleCurrentChange(val) {
|
|
|
|
|
this.page = val;
|
|
|
|
|
this.tableData = [];
|
|
|
|
|
this.getTableList();
|
|
|
|
|
},
|
|
|
|
|
//每页条数
|
|
|
|
|
handleSizeChange(val) {
|
|
|
|
|
this.pageSize = val;
|
|
|
|
|
this.tableData = [];
|
|
|
|
|
this.getTableList();
|
|
|
|
|
},
|
|
|
|
|
//绘制告警区域
|
|
|
|
|
@ -454,23 +615,34 @@ 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.font = "16px 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 - 4);
|
|
|
|
|
} else if (this.canvas.height - left + height > 32) {
|
|
|
|
|
this.ctx.fillText(this.textInfo, top, height - 4);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
this.ctx.closePath();
|
|
|
|
|
this.ctx.stroke();
|
|
|
|
|
},
|
|
|
|
|
//绘制告警区域
|
|
|
|
|
//绘制大图告警区域
|
|
|
|
|
drawline2(data) {
|
|
|
|
|
this.canvas = this.$refs.myCanvas2;
|
|
|
|
|
console.log(data);
|
|
|
|
|
console.log(this.canvas);
|
|
|
|
|
this.canvas = this.$refs.myCanvasbig;
|
|
|
|
|
this.imgpic = this.$refs.picJpg;
|
|
|
|
|
this.textInfo = data.enname;
|
|
|
|
|
this.canvas.width = this.imgpic.offsetWidth; //设置画布大小
|
|
|
|
|
this.canvas.height = this.imgpic.offsetHeight; //设置画布大小
|
|
|
|
|
console.log(this.canvas.width, this.canvas.height);
|
|
|
|
|
this.ctx = this.canvas.getContext("2d");
|
|
|
|
|
this.ctx.beginPath();
|
|
|
|
|
//设置线条颜色，必须放在绘制之前
|
|
|
|
|
@ -490,9 +662,105 @@ export default {
|
|
|
|
|
// 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.font = "12px normal";
|
|
|
|
|
this.ctx.fillStyle = "#ff0000";
|
|
|
|
|
this.ctx.fillText(this.textInfo, top, left + 24);
|
|
|
|
|
//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();
|
|
|
|
|
},
|
|
|
|
|
//绘制所有的图片告警区域
|
|
|
|
|
drawlineListAll(val) {
|
|
|
|
|
for (let i = 0; i < val.length; i++) {
|
|
|
|
|
console.log(i);
|
|
|
|
|
console.log(this.$refs.myCanvas);
|
|
|
|
|
console.log(this.$refs.picJpg);
|
|
|
|
|
this.canvas = this.$refs.myCanvas;
|
|
|
|
|
this.imgpic = this.$refs.picJpg;
|
|
|
|
|
this.textInfo = val[i].enname;
|
|
|
|
|
console.log(this.textInfo);
|
|
|
|
|
console.log(this.imgpic.offsetWidth);
|
|
|
|
|
console.log(this.canvas);
|
|
|
|
|
this.canvas.width = this.imgpic.offsetWidth; //设置画布大小
|
|
|
|
|
this.canvas.height = this.imgpic.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 / val[i].photoWidth, //this.iw图片的宽
|
|
|
|
|
scaleY = this.canvas.height / val[i].photoHeight; //this.ih图片的高
|
|
|
|
|
console.log(scaleX, scaleY);
|
|
|
|
|
var top = val[i].x * scaleX,
|
|
|
|
|
left = val[i].y * scaleY,
|
|
|
|
|
width = val[i].width * scaleX,
|
|
|
|
|
height = val[i].height * scaleY;
|
|
|
|
|
console.log(top, left, width, height);
|
|
|
|
|
// this.ctx.strokeStyle = "red"; //线的颜色
|
|
|
|
|
this.ctx.strokeRect(top, left, width, height); //绘制路径矩形
|
|
|
|
|
//this.ctx.strokeRect(val[i].x, val[i].y, val[i].width, val[i].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();
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
//绘制列表大图
|
|
|
|
|
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 = "12px 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();
|
|
|
|
|
},
|
|
|
|
|
@ -583,6 +851,42 @@ export default {
|
|
|
|
|
this.$refs.historyimg_ref.display();
|
|
|
|
|
this.$refs.historyimg_ref.getdataform(this.selectRow);
|
|
|
|
|
},
|
|
|
|
|
//切换图片
|
|
|
|
|
handleListRow() {
|
|
|
|
|
this.tableShow = !this.tableShow;
|
|
|
|
|
this.zoomD = 1;
|
|
|
|
|
if (!this.tableShow) {
|
|
|
|
|
this.drawlineListAll(this.tableData);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
//在图片列表也执行 自动拍照和 查看历史图片
|
|
|
|
|
handlePicList(val) {
|
|
|
|
|
console.log(val);
|
|
|
|
|
this.selectRow = val;
|
|
|
|
|
this.handleCommandpic();
|
|
|
|
|
},
|
|
|
|
|
handlePicHistory(val) {
|
|
|
|
|
console.log(val);
|
|
|
|
|
this.selectRow = val;
|
|
|
|
|
this.handleHistory();
|
|
|
|
|
},
|
|
|
|
|
handlePicAlarm(val, index) {
|
|
|
|
|
console.log(val, index);
|
|
|
|
|
this.current = index;
|
|
|
|
|
this.canvansdata = val;
|
|
|
|
|
this.canvasloading = true;
|
|
|
|
|
if (val.path !== "" && this.tableData.length !== 0) {
|
|
|
|
|
console.log(val);
|
|
|
|
|
this.bigPhotoPic = val.path;
|
|
|
|
|
this.showBigpic = true;
|
|
|
|
|
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
console.log("huatu");
|
|
|
|
|
this.drawlineList(val, index);
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
dateFormat(row, column) {
|
|
|
|
|
var date = row[column.property];
|
|
|
|
|
if (date == undefined) {
|
|
|
|
|
@ -617,8 +921,8 @@ export default {
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
.picboxI {
|
|
|
|
|
position: relative;
|
|
|
|
|
max-width: 1366px;
|
|
|
|
|
max-height: 768px;
|
|
|
|
|
width: 1366px;
|
|
|
|
|
height: 768px;
|
|
|
|
|
margin: auto;
|
|
|
|
|
animation-name: scaleDraw;
|
|
|
|
|
/*关键帧名称*/
|
|
|
|
|
@ -627,11 +931,15 @@ export default {
|
|
|
|
|
animation-iteration-count: 1;
|
|
|
|
|
/*动画播放的次数*/
|
|
|
|
|
animation-duration: 0.65s;
|
|
|
|
|
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
img {
|
|
|
|
|
max-width: 1366px;
|
|
|
|
|
max-height: 768px;
|
|
|
|
|
margin: auto;
|
|
|
|
|
position: absolute;
|
|
|
|
|
cursor: grab;
|
|
|
|
|
}
|
|
|
|
|
.myCanvas {
|
|
|
|
|
position: absolute;
|
|
|
|
|
@ -640,6 +948,7 @@ export default {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.viewClose {
|
|
|
|
|
@ -697,7 +1006,7 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
.alarmContain {
|
|
|
|
|
display: flex;
|
|
|
|
|
height: calc(100% - 90px);
|
|
|
|
|
height: calc(100% - 98px);
|
|
|
|
|
padding: 0px 8px;
|
|
|
|
|
.alarmTable {
|
|
|
|
|
width: 50%;
|
|
|
|
|
@ -726,7 +1035,6 @@ export default {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
|
|
.picshow {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
@ -758,6 +1066,7 @@ export default {
|
|
|
|
|
height: 100%;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
z-index: 2;
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.editorBtn {
|
|
|
|
|
@ -772,5 +1081,94 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.pictureBox {
|
|
|
|
|
height: calc(100% - 136px);
|
|
|
|
|
max-height: calc(100% - 136px);
|
|
|
|
|
.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: auto;
|
|
|
|
|
border: 2px solid transparent;
|
|
|
|
|
.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;
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
img {
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 250px;
|
|
|
|
|
object-fit: fill;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.caption {
|
|
|
|
|
padding: 9px;
|
|
|
|
|
color: #333;
|
|
|
|
|
.alarmInfo {
|
|
|
|
|
color: #e49e61;
|
|
|
|
|
}
|
|
|
|
|
.infoTop {
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
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;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.bgColor {
|
|
|
|
|
border: 2px solid #e49e61;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
fanluyan
2 years ago