@@ -343,8 +355,12 @@ import {
getSearchInfo,
getAlarmList,
getAlarmTypeList,
- getLatestPhotoJoggle,
- getReturnedPhotoJoggle,
+ // getLatestPhotoJoggle,
+ // getReturnedPhotoJoggle,
+ getTermStatus,
+ takePicJoggle,
+ getTakePicPhotoStatusJoggle,
+ getTakePicStatusJoggle,
readAlarm,
} from "@/utils/api/index";
import historyimg from "./components/historyimg.vue";
@@ -368,6 +384,7 @@ export default {
dyOptions: [{ id: -1, name: "全部" }], //电压数据
xlOptions: [{ id: -1, name: "全部" }], //线路数据
gtOptions: [{ id: -1, name: "全部" }], //杆塔数据
+
gjOptions: [{ id: -1, label: -1, name: "全部" }], //告警数据
formdata: {
dyId: -1,
@@ -394,10 +411,12 @@ export default {
selectRow: {},
alarmLoading: false,
canvasloading: false,
- tableShow: true, //表格展示
+ tableShow: false, //表格展示
zoomD: 1,
canvansdata: "",
current: 0,
+ requestId: "", //请求拍照返回的requestid
+ picTime: "", //请求拍照返回的时间
};
},
created() {
@@ -439,7 +458,10 @@ export default {
var y = e.pageY - img.offsetTop;
// 添加鼠标移动事件
personBox.addEventListener("mousemove", move);
+ console.log(personBox.addEventListener("mousemove", move));
+ console.log(personBox.style);
function move(e) {
+ console.log(personBox.style.left);
personBox.style.left = e.pageX - x + "px";
personBox.style.top = e.pageY - y + "px";
}
@@ -489,12 +511,13 @@ export default {
this.canvasloading = true;
this.canvansdata = val;
if (val.path !== "" && this.tableData.length !== 0) {
- console.log(val);
this.bigPhotoPic = val.path;
this.showBigpic = true;
- this.$nextTick(() => {
- this.drawline2(val);
- });
+ setTimeout(() => {
+ this.$nextTick(() => {
+ this.drawline2(val);
+ });
+ }, 100);
}
},
closePic() {
@@ -560,8 +583,17 @@ export default {
this.photoPic = res.data.list[0].path;
this.selectRow = res.data.list[0];
console.log(this.selectRow);
- this.$refs.multipleTable.setCurrentRow(this.selectRow);
- this.handleRowClick(this.selectRow);
+
+ if (this.tableShow) {
+ this.$nextTick(() => {
+ this.$refs.multipleTable.setCurrentRow(this.selectRow);
+ this.handleRowClick(this.selectRow);
+ });
+ } else {
+ this.$nextTick(() => {
+ this.drawlineListAll(this.tableData);
+ });
+ }
})
.catch((err) => {
console.log(err);
@@ -636,9 +668,12 @@ export default {
//绘制大图告警区域
drawline2(data) {
console.log(data);
+ console.log(document.getElementById("bigCanvas"));
+ console.log(document.getElementById("bigimg"));
+ this.canvas = document.getElementById("bigCanvas");
+ this.imgpic = document.getElementById("bigimg");
console.log(this.canvas);
- this.canvas = this.$refs.myCanvasbig;
- this.imgpic = this.$refs.picJpg;
+ console.log(this.imgpic);
this.textInfo = data.enname;
this.canvas.width = this.imgpic.offsetWidth; //设置画布大小
this.canvas.height = this.imgpic.offsetHeight; //设置画布大小
@@ -662,7 +697,7 @@ 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 = "12px normal";
+ this.ctx.font = "14px normal";
this.ctx.fillStyle = "#ff0000";
//this.ctx.fillText(this.textInfo, top, left + 24);
//距离上面有空间
@@ -674,14 +709,15 @@ export default {
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;
+ console.log(document.getElementById("canvas_" + i));
+ console.log(document.getElementById("img" + i));
+ this.canvas = document.getElementById("canvas_" + i);
+ this.imgpic = document.getElementById("img" + i);
this.textInfo = val[i].enname;
console.log(this.textInfo);
console.log(this.imgpic.offsetWidth);
@@ -721,56 +757,16 @@ export default {
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();
- },
//点击当前行
handleRowClick(row) {
//this.$refs.multipleTable.toggleRowSelection(row);
console.log(this.$refs.picJpg.complete);
this.alarmLoading = true;
+ if (row.path == "" || row.path == null) {
+ this.alarmLoading = false;
+ }
this.photoPic = row.path;
-
this.selectRow = row;
//未读变已读
if (row.isread == 0) {
@@ -788,39 +784,112 @@ export default {
});
}, 300);
}
-
this.$nextTick(() => {
this.drawline(row);
this.imgOnload();
});
},
- //手动拍照
+
+ //主动拍照
handleCommandpic() {
- this.btnpicloading = true;
- getLatestPhotoJoggle({
- captureType: 0,
- channel: this.selectRow.channelId,
+ getTermStatus({ termId: this.selectRow.termId }).then((res) => {
+ console.log(res);
+ if (res.data.isonline) {
+ takePicJoggle({
+ captureType: 0,
+ channel: this.selectRow.channelId,
+ termId: this.selectRow.termId,
+ preset: 255,
+ })
+ .then((res) => {
+ console.log(res);
+ this.requestId = res.data.requestId; //获取requestid 判断装置是否下发
+ this.picTime = res.data.taketime; //获取时间 判断获取最新图片
+ console.log(this.requestId);
+ this.btnpicloading = true;
+ this.statusTimer = window.setInterval(() => {
+ this.getTakePicStatus(res.data);
+ this.statusNum++;
+ }, 3000);
+ })
+ .catch((err) => {
+ console.log(err); //代码错误、请求失败捕获
+ });
+ } else {
+ this.$message({
+ duration: 1500,
+ showClose: true,
+ message: "装置下线,发送指令失败",
+ type: "error",
+ });
+ }
+ });
+ },
+ //获取装置是否下发状态
+ getTakePicStatus(data) {
+ console.log(data);
+ getTakePicStatusJoggle({
+ requestid: data.requestId,
termId: this.selectRow.termId,
- preset: 255,
- }).then((res) => {
- this.$message({
- duration: 1500,
- showClose: true,
- message: "手动拍照请求成功!",
- type: "success",
+ photoTime: new Date(data.taketime).getTime(),
+ })
+ .then((res) => {
+ console.log(res);
+ //res.data 0 状态未知 1 成功 2失败
+ if (
+ res.data.cmaStatus == 0 &&
+ res.data.picStatus == false &&
+ this.statusNum >= 5
+ ) {
+ this.statusNum = 0;
+ clearInterval(this.statusTimer);
+ this.statusTimer = null;
+ this.btnpicloading = false;
+ this.btnvideoloading = false;
+ this.$message({
+ duration: 1500,
+ showClose: true,
+ message: "下发指令超时,请重试!",
+ type: "warning",
+ });
+ } else if (res.data.cmaStatus == 1 || res.data.picStatus == true) {
+ this.$message({
+ duration: 1500,
+ showClose: true,
+ message: "下发指令成功!",
+ type: "success",
+ });
+ this.statusNum = 0;
+ clearInterval(this.statusTimer);
+ this.statusTimer = null;
+ this.timer = window.setInterval(() => {
+ this.newPicApi();
+ this.i++;
+ }, 8000);
+ } else if (res.data == 2) {
+ this.statusNum = 0;
+ clearInterval(this.statusTimer);
+ this.statusTimer = null;
+ this.$message({
+ duration: 1500,
+ showClose: true,
+ message: "下发指令失败!",
+ type: "error",
+ });
+ }
+ })
+ .catch((err) => {
+ console.log(err); //代码错误、请求失败捕获
});
- this.timer = window.setInterval(() => {
- this.newPicApi(res.data);
- this.i++;
- }, 5000);
- });
},
//获取最新图片
- newPicApi(val) {
- getReturnedPhotoJoggle({
- photoTime: val,
+ newPicApi() {
+ getTakePicPhotoStatusJoggle({
+ photoTime: new Date(this.picTime).getTime(),
termId: this.selectRow.termId,
+ requestid: this.requestId,
}).then((res) => {
+ console.log(res.data);
if (res.data == true && this.i < 10) {
clearInterval(this.timer);
this.timer = null;
@@ -846,9 +915,10 @@ export default {
}
});
},
+
//历史图片
- handleHistory() {
- this.$refs.historyimg_ref.display();
+ handleHistory(val) {
+ this.$refs.historyimg_ref.display(val);
this.$refs.historyimg_ref.getdataform(this.selectRow);
},
//切换图片
@@ -856,7 +926,14 @@ export default {
this.tableShow = !this.tableShow;
this.zoomD = 1;
if (!this.tableShow) {
- this.drawlineListAll(this.tableData);
+ this.$nextTick(() => {
+ this.drawlineListAll(this.tableData);
+ });
+ } else {
+ this.$nextTick(() => {
+ this.$refs.multipleTable.setCurrentRow(this.selectRow);
+ this.handleRowClick(this.selectRow);
+ });
}
},
@@ -869,22 +946,39 @@ export default {
handlePicHistory(val) {
console.log(val);
this.selectRow = val;
- this.handleHistory();
+ this.handleHistory(val);
},
handlePicAlarm(val, index) {
console.log(val, index);
this.current = index;
- this.canvansdata = val;
this.canvasloading = true;
+ this.canvansdata = val;
if (val.path !== "" && this.tableData.length !== 0) {
console.log(val);
this.bigPhotoPic = val.path;
this.showBigpic = true;
+ setTimeout(() => {
+ this.$nextTick(() => {
+ this.drawline2(val);
+ });
+ }, 100);
- this.$nextTick(() => {
- console.log("huatu");
- this.drawlineList(val, index);
- });
+ //未读变已读
+ if (val.isread == 0) {
+ setTimeout(function () {
+ readAlarm({
+ id: val.id,
+ })
+ .then((res) => {
+ console.log(res);
+ val.isread = 1;
+ console.log(val.isread);
+ })
+ .catch((err) => {
+ console.log(err);
+ });
+ }, 300);
+ }
}
},
dateFormat(row, column) {
@@ -917,12 +1011,14 @@ export default {
right: 0;
top: 0;
z-index: 9999;
+ width: 100%;
+ height: 100%;
display: flex;
cursor: pointer;
.picboxI {
position: relative;
- width: 1366px;
- height: 768px;
+ width: 85%;
+ height: 85%;
margin: auto;
animation-name: scaleDraw;
/*关键帧名称*/
@@ -935,18 +1031,20 @@ export default {
align-items: center;
justify-content: center;
img {
- max-width: 1366px;
- max-height: 768px;
+ max-width: 100%;
+ max-height: 100%;
+
margin: auto;
position: absolute;
cursor: grab;
}
.myCanvas {
position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
+ // top: 0;
+ // left: 0;
+ max-width: 100%;
+ max-height: 100%;
+ margin: 0 auto;
cursor: pointer;
pointer-events: none;
}
@@ -1018,7 +1116,7 @@ export default {
background-color: rgba(18, 128, 113, 0.2);
}
.readbox {
- color: #e49e61;
+ color: #169e8c;
}
}
.pageNation {
@@ -1088,35 +1186,37 @@ export default {
margin: auto;
}
.piclist {
- display: flex;
- // justify-content: space-around;
- flex-wrap: wrap;
+ // 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);
+ width: calc((100% - 40px) / 4);
position: relative;
display: inline-block;
- margin: 8px;
+ margin: 2px;
position: relative;
- padding: 4px;
border-radius: 3px;
background: #fff;
- height: fit-content;
- //height: auto;
+ height: 30%;
border: 2px solid transparent;
- .el-card__body {
- padding: 0px;
- }
.bigpic {
width: 100%;
height: 100%;
background-size: 100% 100%;
+ position: relative;
.picshow {
position: relative;
- .myCanvas {
+ height: 100%;
+ img {
+ cursor: pointer;
+ width: 100%;
+ height: 100%;
+ }
+ .canvasAll {
position: absolute;
width: 100%;
height: 100%;
@@ -1126,48 +1226,65 @@ export default {
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;
+ .caption {
+ padding: 6px;
+ color: #fff;
+ position: absolute;
+ left: 0;
+ bottom: 0px;
+ background: rgba(0, 0, 0, 0.5);
+ width: calc(100% - 12px);
+ .alarmInfo {
+ color: #fff;
+ }
+ .infoTop {
+ font-size: 14px;
+ color: #fff;
+ font-weight: normal;
+ margin-top: 2px;
+ padding-left: 5px;
+ padding-right: 5px;
+ .readbox {
+ color: #169e8c;
+ }
+ }
+ .infoBottom {
+ color: #fff;
+ font-size: 12px;
+ font-weight: normal;
+ margin-top: 6px;
+ padding-left: 5px;
+ padding-right: 5px;
+ display: flex;
+ justify-content: space-between;
+ .el-button--small {
+ margin-left: 24px;
+ padding: 4px;
+ width: 78px;
+ }
+ .el-button + .el-button {
+ margin-left: 10px;
+ }
}
- .el-button + .el-button {
- margin-left: 10px;
+ }
+ .toolsBtn {
+ position: absolute;
+ right: 4px;
+ top: 4px;
+ z-index: 2;
+ .el-button {
+ width: auto;
+ background: rgba(0, 0, 0, 0.5);
+ border: 1px solid transparent;
+ color: #fff;
+ font-size: 20px;
+ padding: 2px;
}
}
}
}
.bgColor {
- border: 2px solid #e49e61;
+ border: 2px solid #169e8c;
}
}
}
diff --git a/src/views/components/carouselChart.vue b/src/views/components/carouselChart.vue
index 4407390..aeb294c 100644
--- a/src/views/components/carouselChart.vue
+++ b/src/views/components/carouselChart.vue
@@ -2,6 +2,7 @@
+
-
+
下载图片
+
-
-
-
![]()
-
-
-
-
-
-
![]()
-
-
-
-
+
+
+
@@ -177,6 +164,35 @@
+
+
+
+
+
![]()
+
+
+
+
+
+
@@ -203,6 +219,7 @@ export default {
url: "src",
},
isshowArrow: true, //判断是否显示切换按钮
+ mediaType: "", //判断图片类型是视频还是图片
bigPicPath: "", //大图地址
videopath: "",
smallPicPath: "", //小图地址
@@ -222,11 +239,16 @@ export default {
showBigpic: false,
flagline: true,
markEnable: "",
+ zoomD: 1,
+ canvasloading: false,
+ bigImgPath: "",
};
},
mounted() {
console.log(this.terminalPhoto);
+ this.mediaType = this.terminalPhoto[0].mediaType;
this.bigPicPath = this.terminalPhoto[0].path + "!1366x768";
+
// this.bigPicPath = this.terminalPhoto[0].path + "!1366x768";
this.fiveList = this.terminalPhoto.slice(this.page - 1, this.pagesize);
this.total = this.terminalPhoto.length / this.pagesize;
@@ -253,17 +275,136 @@ export default {
watch: {
terminalPhoto: function (newVal, oldVal) {
this.bigPicPath = this.terminalPhoto[0].path + "!1366x768";
+
this.fiveList = this.terminalPhoto.slice(this.page - 1, this.pagesize);
this.total = this.terminalPhoto.length / this.pagesize;
},
},
created() {},
methods: {
- handleBigPicbox() {
+ downLoadPic(url, name) {
+ const image = new Image();
+ image.setAttribute("crossOrigin", "anonymous");
+ image.src = url;
+ image.onload = () => {
+ const canvas = document.createElement("canvas");
+ canvas.width = image.width;
+ canvas.height = image.height;
+ const ctx = canvas.getContext("2d");
+ ctx.drawImage(image, 0, 0, image.width, image.height);
+ canvas.toBlob((blob) => {
+ const url = URL.createObjectURL(blob);
+ this.download(url, name);
+ // 用完释放URL对象
+ URL.revokeObjectURL(url);
+ });
+ };
+ },
+ download(href, name) {
+ const eleLink = document.createElement("a");
+ eleLink.download = name;
+ eleLink.href = href;
+ eleLink.click();
+ eleLink.remove();
+ },
+ // showbigpicPath(data) {
+ // console.log(data);
+ // if (data.includes("!")) {
+ // this.bigPicPath = data.substring(0, data.length - 9);
+ // } else {
+ // this.bigPicPath = data;
+ // this.bgbigPath = data;
+ // }
+
+ // console.log(this.bigPicPath);
+ // },
+ // handleBigPicbox() {
+ // this.showBigpic = true;
+ // },
+ //移动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);
+ console.log(personBox.addEventListener("mousemove", move));
+ console.log(personBox.style);
+ function move(e) {
+ console.log(personBox.style.left);
+ 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)`;
+ });
+ },
+ imgOnload() {
+ console.log("加载完成");
+ this.canvasloading = false;
+ },
+ //放大图
+ handleBigPicbox(val) {
+ console.log(val);
+ //this.canvasloading = true;
this.showBigpic = true;
+ this.bigImgPath = val.substring(0, val.length - 9);
},
- closePic() {
- this.showBigpic = false;
+ closePic(e) {
+ console.log(e);
+ var btn = this.$refs.bigimgref;
+ console.log(btn);
+ if (btn) {
+ if (!btn.contains(event.target)) {
+ //按钮.app-download以外的区域
+ this.zoomD = 1;
+ this.showBigpic = false;
+ }
+ }
+ //
+ // this.showBigpic = false;
},
openline() {
this.flagline = true;
@@ -324,13 +465,17 @@ export default {
(this.page - 1) * this.pagesize,
this.page * this.pagesize
);
+
this.bigPicPath = this.fiveList[this.activeSmall].path + "!1366x768";
+
this.videopath = this.fiveList[this.activeSmall].thumb;
},
//大图点击左侧切换图片
leftClick() {
this.bigNum--; //执行下一张
+ this.mediaType = this.terminalPhoto[this.bigNum].mediaType;
this.bigPicPath = this.terminalPhoto[this.bigNum].path + "!1366x768";
+
this.activeSmall--;
console.log("activeSmall", this.activeSmall, "bigNum", this.bigNum);
console.log(this.page);
@@ -356,7 +501,9 @@ export default {
//点击右侧切换图片
rightClick() {
this.bigNum++; //执行下一张
+ this.mediaType = this.terminalPhoto[this.bigNum].mediaType;
this.bigPicPath = this.terminalPhoto[this.bigNum].path + "!1366x768";
+
this.activeSmall++;
console.log("activeSmall", this.activeSmall, "bigNum", this.bigNum);
if (this.activeSmall > 4) {
@@ -383,7 +530,9 @@ export default {
console.log(row);
console.log();
this.activeSmall = index;
+ this.mediaType = row.mediaType;
this.bigPicPath = row.path + "!1366x768";
+ // this.bgbigPath = row.path + "!1366x768";
getCoordinate({
channelId: row.channelId,
needPic: "1",
@@ -460,67 +609,28 @@ export default {
width: 100%;
display: flex;
flex-direction: column;
- height: calc(100% - 0px);
+ height: calc(100% - 32px);
box-sizing: border-box;
- .showPic {
- position: fixed;
- background-color: rgba(0, 0, 0, 0.5);
- bottom: 0;
- left: 0;
- overflow: hidden;
- right: 0;
- top: 0;
- z-index: 9999;
- display: flex;
- cursor: pointer;
- .picboxI {
- position: relative;
- max-width: 1366px;
- max-height: 768px;
- margin: auto;
- animation-name: scaleDraw;
- /*关键帧名称*/
- animation-timing-function: ease;
- /*动画的速度曲线*/
- animation-iteration-count: 1;
- /*动画播放的次数*/
- animation-duration: 0.65s;
- overflow: hidden;
- border: 2px solid #f00;
- img {
- width: 100%;
- height: 100%;
- margin: auto;
- }
- }
- .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;
- color: #fff;
- font-size: 18px;
- }
- }
- }
.picTop {
width: 100%;
height: 80%;
overflow: hidden;
margin-bottom: 4px;
position: relative;
+ .downBtn {
+ position: absolute;
+ background: rgba(0, 0, 0, 0.5);
+ border: none;
+ right: 8px;
+ bottom: 16px;
+ color: #fff;
+ z-index: 5;
+ &:hover {
+ background: rgba(0, 0, 0, 0.9);
+ color: #169e8c;
+ }
+ }
&:hover {
.arrow {
opacity: 1;
@@ -548,6 +658,9 @@ export default {
position: absolute;
z-index: 3;
opacity: 0;
+ .animImg {
+ opacity: 0;
+ }
}
.mark {
position: absolute;
@@ -709,6 +822,75 @@ export default {
right: 16px;
}
}
+ //放大图
+ .showPic {
+ position: fixed;
+ background-color: rgba(0, 0, 0, 50%);
+ bottom: 0;
+ left: 0;
+ overflow: hidden;
+ right: 0;
+ top: 0;
+ z-index: 9999;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ cursor: pointer;
+ .picboxI {
+ position: relative;
+ width: 85%;
+ height: 85%;
+ margin: auto;
+ animation-name: scaleDraw;
+ /*关键帧名称*/
+ animation-timing-function: ease;
+ /*动画的速度曲线*/
+ animation-iteration-count: 1;
+ /*动画播放的次数*/
+ animation-duration: 0.65s;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ img {
+ max-width: 100%;
+ max-height: 100%;
+
+ margin: auto;
+ position: absolute;
+ cursor: grab;
+ }
+ .myCanvas {
+ position: absolute;
+ // top: 0;
+ // left: 0;
+ max-width: 100%;
+ max-height: 100%;
+ margin: 0 auto;
+ cursor: pointer;
+ pointer-events: none;
+ }
+ }
+ .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;
+ color: #fff;
+ font-size: 18px;
+ }
+ }
+ }
}
@keyframes scaleDraw {
/*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
@@ -721,6 +903,5 @@ export default {
transform: scale(1);
}
}
-
// https://v1.github.surmon.me/vue-awesome-swiper/
diff --git a/src/views/devicePhotoSchedule/components/adddeviceDialog copy.vue b/src/views/devicePhotoSchedule/components/adddeviceDialog copy.vue
new file mode 100644
index 0000000..d559381
--- /dev/null
+++ b/src/views/devicePhotoSchedule/components/adddeviceDialog copy.vue
@@ -0,0 +1,260 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/views/devicePhotoSchedule/components/adddeviceDialog.vue b/src/views/devicePhotoSchedule/components/adddeviceDialog.vue
index 717a4e4..fb39916 100644
--- a/src/views/devicePhotoSchedule/components/adddeviceDialog.vue
+++ b/src/views/devicePhotoSchedule/components/adddeviceDialog.vue
@@ -20,12 +20,12 @@
-
+
@@ -54,7 +56,7 @@
icon="el-icon-plus"
type="primary"
@click="addModule()"
- v-if="index + 1 == ruleForm.list.length"
+ v-if="index + 1 == ruleForm.listTime.length"
>
@@ -91,24 +93,25 @@ export default {
if (val == null) {
return (this.ruleForm = {
name: "",
- list: [
+ listTime: [
{
time: "",
span: "",
},
],
+ list: [],
remark: "",
});
}
//this.ruleForm = val;
this.ruleForm = JSON.parse(JSON.stringify(val));
- this.ruleForm.list.forEach((val) => {
+ this.ruleForm.listTime.forEach((val) => {
this.$set(val, "time", [val.startTime, val.endTime]);
});
},
addModule() {
//新增一行
- this.ruleForm.list.push({
+ this.ruleForm.listTime.push({
time: "",
span: "",
});
@@ -135,10 +138,42 @@ export default {
this.$refs.formInfo.validate((valid) => {
if (valid) {
// delete this.ruleForm.time;
- this.ruleForm.list.forEach((val) => {
- this.$set(val, "startTime", val.time[0]);
- this.$set(val, "endTime", val.time[1]);
+
+ this.ruleForm.listTime.forEach((val) => {
+ this.$set(val, "startTime", new Date(val.time[0]));
+ this.$set(val, "endTime", new Date(val.time[1]));
+ // console.log(val.time[0]);
+ // console.log(typeof val.time[0]);
+ // console.log(new Date(val.time[0]));
+ // console.log(new Date(val.time[1]));
+ // console.log(new Date(val.time[0]).getHours());
+ // console.log(new Date(val.time[0]).getMinutes());
});
+
+ let arr = [];
+ for (var i = 0; i < this.ruleForm.listTime.length; i++) {
+ console.log(this.ruleForm.listTime);
+
+ arr.push(
+ {
+ hour: Math.floor(this.ruleForm.listTime[i].span / 60),
+ minute: this.ruleForm.listTime[i].span % 60,
+ preset: 255,
+ },
+ {
+ hour: this.ruleForm.listTime[i].startTime.getHours(),
+ minute: this.ruleForm.listTime[i].startTime.getMinutes(),
+ preset: 255,
+ },
+ {
+ hour: this.ruleForm.listTime[i].endTime.getHours(),
+ minute: this.ruleForm.listTime[i].endTime.getMinutes(),
+ preset: 255,
+ }
+ );
+ }
+ console.log(arr);
+ this.ruleForm.list = arr;
if (this.title == "新增") {
addScheduleRulel(this.ruleForm)
.then((res) => {
diff --git a/src/views/devicePhotoSchedule/components/setdevice.vue b/src/views/devicePhotoSchedule/components/setdevice.vue
index 3e6a8b4..495aaf2 100644
--- a/src/views/devicePhotoSchedule/components/setdevice.vue
+++ b/src/views/devicePhotoSchedule/components/setdevice.vue
@@ -14,13 +14,29 @@
{{
- val.startTime.substring(0, val.startTime.lastIndexOf(":"))
+ new Date(val.startTime).getHours() < 10
+ ? "0" + new Date(val.startTime).getHours()
+ : new Date(val.startTime).getHours()
+ }}:
+ {{
+ new Date(val.startTime).getMinutes() < 10
+ ? "0" + new Date(val.startTime).getMinutes()
+ : new Date(val.startTime).getMinutes()
}}
~
- {{
- val.endTime.substring(0, val.endTime.lastIndexOf(":"))
- }}
+ {{
+ new Date(val.endTime).getHours() < 10
+ ? "0" + new Date(val.endTime).getHours()
+ : new Date(val.endTime).getHours()
+ }}:
+ {{
+ new Date(val.endTime).getMinutes() < 10
+ ? "0" + new Date(val.endTime).getMinutes()
+ : new Date(val.endTime).getMinutes()
+ }}
间隔:{{ val.span }}分钟
@@ -65,6 +81,10 @@
:max="9"
>
{});
},
- //// 给数组里的每一个对象都添加一个isEdit属性
+ // 给数组里的每一个对象都添加一个isEdit属性
getChildren(data) {
console.log(data);
return data.map((item) => {
@@ -211,10 +235,34 @@ export default {
this.allCheckNode = this.$refs.tree.getCheckedNodes();
// console.log(this.allCheckNode);
console.log(nodeObj);
+ console.log(this.allCheckNode);
this.isactive = nodeObj.id;
this.isCheck = this.$refs.tree.getCheckedNodes().indexOf(nodeObj) > -1;
console.log(this.isCheck);
},
+ // //获取开始时间和结束时间的偏移量
+ // getruleSchedule() {
+ // for (var j = 0; j < this.allCheckNode.length; j++) {
+ // console.log(this.allCheckNode[j].offsetNum);
+ // for (var i = 0; i < this.ruleSchedule.length; i++) {
+ // console.log(typeof this.ruleSchedule[i].startTime);
+ // console.log(this.ruleSchedule[i].startTime);
+ // var Stime = moment(this.ruleSchedule[i].startTime).format("HH:mm");
+ // var Etime = moment(this.ruleSchedule[i].endTime).format("HH:mm");
+ // console.log(Stime, Etime);
+
+ // // this.ruleSchedule[i].startTime = new Date(
+ // // this.ruleSchedule[i].startTime
+ // // );
+ // // this.ruleSchedule[i].endTime = new Date(this.ruleSchedule[i].endTime);
+ // // console.log(this.ruleSchedule[i].startTime);
+ // // console.log(this.ruleSchedule[i].endTime);
+ // // moment().add(offsetSeconds, "seconds").toObject();
+
+ // // console.log(time);
+ // }
+ // }
+ // },
// 保存确定操作
submitForm() {
@@ -224,19 +272,165 @@ export default {
},
//时间表
sureSum() {
- //console.log(this.termidArr);
console.log(this.checkedAisle);
+
var ruleBox = [];
+ //循环装置
for (var i = 0; i < this.allCheckNode.length; i++) {
- var parmsobj = {
- termid: this.allCheckNode[i].id,
- channelidlist: [this.checkedAisle],
- offset: this.allCheckNode[i].offsetNum,
- };
- console.log(parmsobj);
- ruleBox.push(parmsobj);
+ console.log(this.allCheckNode[i].bsManufacturer);
+ if (
+ this.allCheckNode[i].bsManufacturer == null ||
+ this.allCheckNode[i].bsManufacturer == undefined
+ ) {
+ console.log(this.allCheckNode[i].offsetNum);
+ //循环时间规则
+ let timearr = [];
+ let dayArr = [];
+ for (var j = 0; j < this.ruleSchedule.length; j++) {
+ console.log(this.ruleSchedule);
+ console.log(this.ruleSchedule[j].startTime);
+ // var Stime = moment(this.ruleSchedule[j].startTime).format("HH:mm");
+ // var Etime = moment(this.ruleSchedule[j].endTime).format("HH:mm");
+
+ var Stime = moment(this.ruleSchedule[j].startTime)
+ .add(this.allCheckNode[i].offsetNum, "minute")
+ .format();
+ var Etime = moment(this.ruleSchedule[j].endTime)
+ .add(this.allCheckNode[i].offsetNum, "minute")
+ .format();
+ var lastETime = moment(this.ruleSchedule[j].endTime).format();
+
+ var spanTime = this.ruleSchedule[j].span;
+ console.log(spanTime);
+ console.log(moment(this.ruleSchedule[j].endTime).hour());
+ //判断湖南规约
+ if (this.allCheckNode[i].protocol == "65283") {
+ console.log("湖南规约");
+ console.log(Stime, Etime);
+ console.log(typeof Stime);
+ console.log(
+ moment(this.ruleSchedule[j].endTime)
+ .add(this.allCheckNode[i].offsetNum, "minute")
+ .hour()
+ );
+ console.log(
+ moment(this.ruleSchedule[j].endTime)
+ .add(this.allCheckNode[i].offsetNum, "minute")
+ .minute()
+ );
+
+ //如果偏移之后的时间是第二天,那么不做偏移
+ console.log(moment().isSame(moment(Etime), "day"));
+ //判断是不是同一天
+ if (moment().isSame(moment(Etime), "day")) {
+ //如果是同一天
+ timearr.push(
+ {
+ hour: Math.floor(this.ruleSchedule[j].span / 60),
+ minute: this.ruleSchedule[j].span % 60,
+ preset: 255,
+ },
+ {
+ hour: moment(this.ruleSchedule[j].startTime)
+ .add(this.allCheckNode[i].offsetNum, "minute")
+ .hour(),
+ minute: moment(this.ruleSchedule[j].startTime)
+ .add(this.allCheckNode[i].offsetNum, "minute")
+ .minute(),
+ preset: 255,
+ },
+ {
+ hour: moment(this.ruleSchedule[j].endTime)
+ .add(this.allCheckNode[i].offsetNum, "minute")
+ .hour(),
+ minute: moment(this.ruleSchedule[j].endTime)
+ .add(this.allCheckNode[i].offsetNum, "minute")
+ .minute(),
+ preset: 255,
+ }
+ );
+ } else {
+ timearr.push(
+ {
+ hour: Math.floor(this.ruleSchedule[j].span / 60),
+ minute: this.ruleSchedule[j].span % 60,
+ preset: 255,
+ },
+ {
+ hour: moment(this.ruleSchedule[j].startTime)
+ .add(this.allCheckNode[i].offsetNum, "minute")
+ .hour(),
+ minute: moment(this.ruleSchedule[j].startTime)
+ .add(this.allCheckNode[i].offsetNum, "minute")
+ .minute(),
+ preset: 255,
+ },
+ {
+ hour: moment(this.ruleSchedule[j].endTime).hour(),
+ minute: moment(this.ruleSchedule[j].endTime).minute(),
+ preset: 255,
+ }
+ );
+ }
+
+ console.log(timearr);
+ }
+ ////判断河南规约
+ if (this.allCheckNode[i].protocol == "65286") {
+ console.log("河南规约");
+ //偏移时间
+ //this.getDayArr(startDay, endDay);
+
+ let startDay = Stime;
+ let endDay = Etime;
+ var lastendDay = lastETime;
+ console.log(lastETime);
+ console.log(startDay, endDay);
+ let startVal = this.$moment(new Date(startDay)).format(
+ "YYYY-MM-DD HH:mm"
+ );
+ console.log(startVal);
+ console.log(moment().isSame(moment(endDay), "day"));
+ while (this.$moment(startVal).isBefore(endDay)) {
+ dayArr.push(startVal);
+ // 自增
+ startVal = this.$moment(new Date(startVal))
+ .add(spanTime, "minute")
+ .format("YYYY-MM-DD HH:mm");
+ console.log(startVal);
+ }
+
+ // // 将结束日期的天放进数组
+ if (!moment().isSame(moment(endDay), "day")) {
+ dayArr.push(
+ this.$moment(new Date(lastETime)).format("YYYY-MM-DD HH:mm")
+ );
+ }
+
+ console.log(dayArr);
+ for (var k = 0; k < dayArr.length; k++) {
+ //console.log(moment(dayArr[k]).hour());
+ timearr.push({
+ hour: moment(dayArr[k]).hour(),
+ minute: moment(dayArr[k]).minute(),
+ preset: 255,
+ });
+ }
+ // return dayArr;
+ }
+ }
+
+ var parmsobj = {
+ termid: this.allCheckNode[i].id,
+ channelid: this.checkedAisle,
+ offset: this.allCheckNode[i].offsetNum,
+ list: timearr,
+ };
+ console.log(parmsobj);
+ ruleBox.push(parmsobj);
+ }
+ console.log(ruleBox);
}
- console.log(ruleBox);
setScheduleRulel({
list: ruleBox,
scheduleid: this.selid,
@@ -252,14 +446,19 @@ export default {
}, 3000);
})
.catch((err) => {
- this.$message({
- duration: 1500,
- showClose: true,
- message: "添加失败",
- type: "error",
- });
+ // this.$message({
+ // duration: 1500,
+ // showClose: true,
+ // message: "添加失败",
+ // type: "error",
+ // });
});
},
+ //获取到时间规则,把时间规则转化为对应的规约格式
+ //湖南规约
+ getHnTime() {},
+ //河南规约
+ getZzTime() {},
//根据requestid查询时间表下发状态
requestTime() {
this.sureloading = true;
@@ -274,7 +473,6 @@ export default {
arr
) {
console.log(value, index, arr);
-
return value.status !== 1;
});
if (this.requestList.length == 0) {
diff --git a/src/views/devicePhotoSchedule/components/setdevicebak.vue b/src/views/devicePhotoSchedule/components/setdevicebak.vue
deleted file mode 100644
index d3255b3..0000000
--- a/src/views/devicePhotoSchedule/components/setdevicebak.vue
+++ /dev/null
@@ -1,386 +0,0 @@
-
-
-
-
时间表规则
-
-
-
- {{
- val.startTime.substring(0, val.startTime.lastIndexOf(":"))
- }}
- ~
- {{
- val.endTime.substring(0, val.endTime.lastIndexOf(":"))
- }}
- 间隔:{{ val.span }}分钟
-
-
-
设置通道
-
-
-
-
- {{ val.name }}
-
-
-
-
-
-
- {{ data.name }}
-
-
-
- {{ data.name }}
-
-
-
-
-
-
-
-
-
-
diff --git a/src/views/devicePhotoSchedule/index copy.vue b/src/views/devicePhotoSchedule/index copy.vue
new file mode 100644
index 0000000..40c3a2c
--- /dev/null
+++ b/src/views/devicePhotoSchedule/index copy.vue
@@ -0,0 +1,280 @@
+
+
+
+
+
diff --git a/src/views/devicePhotoSchedule/index.vue b/src/views/devicePhotoSchedule/index.vue
index 40c3a2c..a4c6dea 100644
--- a/src/views/devicePhotoSchedule/index.vue
+++ b/src/views/devicePhotoSchedule/index.vue
@@ -13,7 +13,7 @@
{{ scope.row.name }}
-
{{
- val.startTime.substring(0, val.startTime.lastIndexOf(":"))
+ new Date(val.startTime).getHours() < 10
+ ? "0" + new Date(val.startTime).getHours()
+ : new Date(val.startTime).getHours()
+ }}:
+ {{
+ new Date(val.startTime).getMinutes() < 10
+ ? "0" + new Date(val.startTime).getMinutes()
+ : new Date(val.startTime).getMinutes()
}}
+
~
- {{
- val.endTime.substring(0, val.endTime.lastIndexOf(":"))
- }}
+ {{
+ new Date(val.endTime).getHours() < 10
+ ? "0" + new Date(val.endTime).getHours()
+ : new Date(val.endTime).getHours()
+ }}:
+ {{
+ new Date(val.endTime).getMinutes() < 10
+ ? "0" + new Date(val.endTime).getMinutes()
+ : new Date(val.endTime).getMinutes()
+ }}
间隔:{{ val.span }}分钟
-
@@ -127,6 +129,8 @@ export default {
return {
title: "", //弹窗标题
deviceTableData: [],
+ newList: [],
+ listTime: [],
//multipleSelection: [], //获取当前选中
page: 1, // 当前页数
pageSize: 20, // 每页数量
@@ -146,9 +150,94 @@ export default {
pagesize: this.pageSize,
})
.then((res) => {
+ this.newList = [];
this.deviceTableData = res.data.list;
this.total = res.data.total;
this.loading = false;
+ // for (var i = 0; i < this.deviceTableData.list.length; i++) {
+ // console.log(this.deviceTableData.list[i]);
+ // }
+ console.log(this.deviceTableData);
+
+ for (var i = 0; i < this.deviceTableData.length; i++) {
+ var arr = [];
+ console.log(this.deviceTableData[i]);
+ for (var k = 0; k < this.deviceTableData[i].list.length; k++) {
+ if (k % 3 == 0) {
+ var obj = {};
+ obj.span =
+ this.deviceTableData[i].list[k].hour * 60 +
+ this.deviceTableData[i].list[k].minute;
+ console.log("时间间隔");
+ } else if (k % 3 == 1) {
+ console.log("开始时间");
+ console.log("a");
+ // obj.startTime =
+ // this.deviceTableData[i].list[k].hour +
+ // ":" +
+ // this.deviceTableData[i].list[k].minute;
+ // console.log(new Date());
+ let timeDate = new Date();
+ timeDate.setHours(this.deviceTableData[i].list[k].hour);
+ timeDate.setMinutes(this.deviceTableData[i].list[k].minute);
+ console.log(timeDate);
+ // console.log(new Date().getHours());
+ // console.log(
+ // new Date().setHours(this.deviceTableData[i].list[k].hour)
+ // );
+ // console.log(d.getHours() + ":" + d.getMinutes());
+ // if (timeDate.getHours() < 10) {
+ // console.log(timeDate.getHours());
+ // obj.startTime =
+ // "0" + timeDate.getHours() + ":" + timeDate.getMinutes();
+ // } else {
+
+ // }
+
+ // let timeHour =
+ // timeDate.getHours() < 10
+ // ? "0" + timeDate.getHours()
+ // : timeDate.getHours();
+ // let timeMinute =
+ // timeDate.getMinutes() < 10
+ // ? "0" + timeDate.getMinutes()
+ // : timeDate.getMinutes();
+ obj.startTime = timeDate.toUTCString();
+ } else if (k % 3 == 2) {
+ console.log("结束时间");
+ obj.endTime =
+ this.deviceTableData[i].list[k].hour +
+ ":" +
+ this.deviceTableData[i].list[k].minute;
+ let timeDate = new Date();
+ timeDate.setHours(this.deviceTableData[i].list[k].hour);
+ timeDate.setMinutes(this.deviceTableData[i].list[k].minute);
+ // obj.endTime = c.toJSON();
+ let timeHour =
+ timeDate.getHours() < 10
+ ? "0" + timeDate.getHours()
+ : timeDate.getHours();
+ let timeMinute =
+ timeDate.getMinutes() < 10
+ ? "0" + timeDate.getMinutes()
+ : timeDate.getMinutes();
+ //obj.startTime = timeHour + ":" + timeMinute;
+ // obj.endTime = timeHour + ":" + timeMinute;
+ obj.endTime = timeDate.toUTCString();
+ arr.push(obj);
+ }
+ console.log(this.deviceTableData[i].list[k]);
+ }
+ this.newList.push({
+ id: this.deviceTableData[i].id,
+ list: this.deviceTableData[i].list,
+ name: this.deviceTableData[i].name,
+ remark: this.deviceTableData[i].remark,
+ listTime: arr,
+ });
+ }
+ console.log("this.newList");
+ console.log(this.newList);
})
.catch((err) => {});
},
diff --git a/src/views/management/monitoringEquipment/photographicDevice/index.vue b/src/views/management/monitoringEquipment/photographicDevice/index.vue
index f1e3772..472481d 100644
--- a/src/views/management/monitoringEquipment/photographicDevice/index.vue
+++ b/src/views/management/monitoringEquipment/photographicDevice/index.vue
@@ -3,9 +3,20 @@
拍照装置管理
-
新增
+
+ 新增
+ 导出
+
@@ -150,6 +161,13 @@
:formatter="dateFormat"
>
+
+
+
+
+
+
+ {{ picInfoData.linename }}-{{ picInfoData.towername }}-({{
+ picInfoData.alias !== null && picInfoData.alias !== ""
+ ? picInfoData.alias
+ : picInfoData.channnelname
+ }}) {{ $moment(picInfoData.photoTime).format("YYYY-MM-DD ") }}
+
+
+
diff --git a/src/views/realTimeMonitor/picIndex.vue b/src/views/realTimeMonitor/picIndex.vue
new file mode 100644
index 0000000..c1876cf
--- /dev/null
+++ b/src/views/realTimeMonitor/picIndex.vue
@@ -0,0 +1,1070 @@
+
+
+
+
+
+
+
+
+
+
+
+ {{ towertitle }}
+ {{
+ address
+ }}
+
+
+
+
+
+
+
+
日历快速查询
+
+
+
+
+
选择通道监拍点
+
+
+
+ {{
+ item.alias !== null && item.alias !== ""
+ ? item.alias
+ : item.label
+ }}
+
+
+
+
+
+
+
操作项
+
+
+
+ 主动拍照
+
+
+ {{
+ item.alias !== null && item.alias !== ""
+ ? item.alias
+ : item.label
+ }}
+
+
+
+
+ 主动录像
+
+
+ {{
+ item.alias !== null && item.alias !== ""
+ ? item.alias
+ : item.label
+ }}
+
+
+
+
+ 装置信息
+ 拍照时间表
+
+
+
+ 声光报警
+
+
+ 开启
+ 关闭
+
+
+
+
+
+ 线缆显示
+
+
+ 开启
+ 关闭
+
+
+
+ 获取GPS位置
+
+
+
+ GPS开关
+
+
+ 开启GPS
+ 关闭GPS
+
+
+
+ 历史图片
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/views/realTimeMonitor/picturemain.vue b/src/views/realTimeMonitor/picturemain.vue
deleted file mode 100644
index 14bae6d..0000000
--- a/src/views/realTimeMonitor/picturemain.vue
+++ /dev/null
@@ -1,191 +0,0 @@
-
-
-
-
{{ photoData.text }}
-
- 监拍设备:14套 监拍点:14个 视频:0套 测温:0 套 微气象:0 套
-
-
-
-
-
-
{{ photoData.children[0].text }};大号侧
-
-
-
-
-
-
-
-
-
-
-
- -
-
- {{ item.captureTime }}
-
-
-
-
-
-
{{ photoData.children[0].text }};小号测
-
-
-
-
-
-
-
-
-
-
-
- -
-
- {{ item.captureTime }}
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/src/views/realTimeMonitor/previewContain.vue b/src/views/realTimeMonitor/previewContain.vue
new file mode 100644
index 0000000..6a91c75
--- /dev/null
+++ b/src/views/realTimeMonitor/previewContain.vue
@@ -0,0 +1,175 @@
+
+
+
+
+
+
+
+
+
+
![]()
+
+
![]()
+
+

+
+
+ {{ item.linename }}-{{ item.towername }}-({{
+ item.alias !== null && item.alias !== ""
+ ? item.alias
+ : item.channnelname
+ }})
+
+
+ {{ $moment(item.photoTime).format("YYYY-MM-DD HH:mm:ss") }}
+
+
无抓拍
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/views/realTimeSearch/index.vue b/src/views/realTimeSearch/index.vue
index 6a0619b..23df418 100644
--- a/src/views/realTimeSearch/index.vue
+++ b/src/views/realTimeSearch/index.vue
@@ -10,7 +10,9 @@
:key="item.id"
:label="item.name"
:value="item.id"
- >
+ >
+ {{ item.name }}
+
@@ -61,7 +63,11 @@
@@ -79,6 +85,8 @@
type="datetime"
placeholder="开始日期"
value-format="timestamp"
+ :picker-options="pickerOptions"
+ default-time="00:00:00"
>
@@ -89,6 +97,7 @@
default-time="23:59:59"
placeholder="结束日期"
value-format="timestamp"
+ :picker-options="pickerOptions"
class="ml10"
>
@@ -98,7 +107,7 @@
-
+
-
+
@@ -196,6 +209,11 @@ import { getSearchInfo, getRealtimePhoto } from "@/utils/api/index";
export default {
data() {
return {
+ pickerOptions: {
+ disabledDate(date) {
+ return date.getTime() > Date.now(); // 禁用大于今天的日期
+ },
+ },
OptionssalseImg: {
inline: false,
button: true,
@@ -210,7 +228,7 @@ export default {
xlOptions: [{ id: -1, name: "全部" }], //线路数据
gtOptions: [{ id: -1, name: "全部" }], //杆塔数据
zzOptions: [{ id: -1, name: "全部" }], //装置数据
- tdOptions: [{ id: -1, name: "全部" }], //通道数据
+ tdOptions: [{ id: -1, name: "全部", alias: null }], //通道数据
formdata: {
dyid: -1,
lineid: -1,
@@ -235,7 +253,7 @@ export default {
that.onSubmit(); // 触发事件
}
};
- console.log(this.$route.query);
+
// this.formdata.search = this.$route.query.name;
// console.log(this.formdata.search);
},
@@ -244,15 +262,37 @@ export default {
// new Date(new Date().toLocaleDateString()).getTime(),
// new Date().getTime(),
// ]);
- this.$set(
- this.formdata,
- "starttime",
- new Date(new Date().toLocaleDateString()).getTime()
- );
+
this.$set(this.formdata, "endtime", new Date().getTime());
- this.getSearchdy();
+
+ if (JSON.stringify(this.$route.query) === "{}") {
+ this.$set(
+ this.formdata,
+ "starttime",
+ new Date(new Date().toLocaleDateString()).getTime()
+ );
+ this.getSearchdy();
+ } else {
+ console.log(this.$route.query);
+ this.getSearchdy();
+ console.log(this.$route.query.date);
+ this.formdata.dyid = this.$route.query.dyId;
+ this.formdata.lineid = this.$route.query.lineId;
+ this.formdata.towerid = this.$route.query.towerId;
+ this.formdata.channelid = this.$route.query.channelId;
+ this.formdata.termid = this.$route.query.termId;
+
+ this.$set(this.formdata, "starttime", this.$route.query.date);
+ }
},
methods: {
+ showbigpicPath(item, index) {
+ console.log(item, index);
+ var personBox = document.querySelector(".bigpath" + index);
+ console.log(personBox.src);
+ console.log(item.path);
+ personBox.src = item.path;
+ },
//获取电压信息
getSearchdy() {
getSearchInfo({ type: 1 })
@@ -265,7 +305,14 @@ export default {
// this.formdata.dyid = res.data.list[0].id;
// }
this.dyOptions = this.dyOptions.concat(res.data.list);
- this.formdata.dyid = this.dyOptions[0].id;
+ console.log(this.dyOptions);
+ //this.formdata.dyid = this.dyOptions[0].id;
+ if (JSON.stringify(this.$route.query) === "{}") {
+ this.formdata.dyid = this.dyOptions[0].id;
+ } else {
+ this.formdata.dyid = Number(this.$route.query.dyId);
+ }
+
// this.$set(this.formdata, 'dyid', this.dyOptions[0].id)
this.getSearchxl();
})
@@ -277,7 +324,13 @@ export default {
.then((res) => {
this.xlOptions = [{ id: -1, name: "全部" }];
this.xlOptions = this.xlOptions.concat(res.data.list);
- this.formdata.lineid = this.xlOptions[0].id;
+ // this.formdata.lineid = this.xlOptions[0].id;
+ if (JSON.stringify(this.$route.query) === "{}") {
+ this.formdata.lineid = this.xlOptions[0].id;
+ } else {
+ this.formdata.lineid = Number(this.$route.query.lineId);
+ }
+
this.getSearchgt();
})
.catch((err) => {});
@@ -288,7 +341,13 @@ export default {
.then((res) => {
this.gtOptions = [{ id: -1, name: "全部" }];
this.gtOptions = this.gtOptions.concat(res.data.list);
- this.formdata.towerid = this.gtOptions[0].id;
+ // this.formdata.towerid = this.gtOptions[0].id;
+ if (JSON.stringify(this.$route.query) === "{}") {
+ this.formdata.towerid = this.gtOptions[0].id;
+ } else {
+ this.formdata.towerid = Number(this.$route.query.towerId);
+ }
+
this.getSearchzz();
})
.catch((err) => {});
@@ -299,7 +358,13 @@ export default {
.then((res) => {
this.zzOptions = [{ id: -1, name: "全部" }];
this.zzOptions = this.zzOptions.concat(res.data.list);
- this.formdata.termid = this.zzOptions[0].id;
+ // this.formdata.termid = this.zzOptions[0].id;
+ if (JSON.stringify(this.$route.query) === "{}") {
+ this.formdata.termid = this.zzOptions[0].id;
+ } else {
+ this.formdata.termid = Number(this.$route.query.termId);
+ }
+
this.getSearchtd();
})
.catch((err) => {});
@@ -308,13 +373,20 @@ export default {
getSearchtd() {
getSearchInfo({ type: 5, id: this.formdata.termid })
.then((res) => {
- this.tdOptions = [{ id: -1, name: "全部" }];
+ this.tdOptions = [{ id: -1, name: "全部", alias: null }];
this.tdOptions = this.tdOptions.concat(res.data.list);
- this.formdata.channelid = this.tdOptions[0].id;
+ //this.formdata.channelid = this.tdOptions[0].id;
+ if (JSON.stringify(this.$route.query) === "{}") {
+ this.formdata.channelid = this.tdOptions[0].id;
+ } else {
+ this.formdata.channelid = Number(this.$route.query.channelId);
+ }
+
// if (this.signtype == 0) {
// this.getPicData();
// }
// this.signtype = 1;
+ this.getPicData();
})
.catch((err) => {});
},
diff --git a/src/views/stritl/index copy.vue b/src/views/stritl/index copy.vue
deleted file mode 100644
index e95bac0..0000000
--- a/src/views/stritl/index copy.vue
+++ /dev/null
@@ -1,502 +0,0 @@
-
-
-
-
-
{{ numberUnits.name }}
-
-
-
-
{{ hazardClass.name }}
-
-
-
-
{{ monitLine.name }}
-
-
-
-
-
-
-
-
-
-
{{ hazardType.name }}
-
-
-
-
{{ deviceInfo.name }}
-
-
- 在运数
- {{ infoData.deviceCount }}
-
-
- 在线数
- {{ infoData.hasPhotoCount }}
-
-
- 杆塔覆盖率
- {{ infoData.deviceCoverage }}%
-
-
- 在线率
- {{ infoData.hasPhotoRate }}%
-
-
-
-
-
{{ deviceOnline.name }}
-
-
-
-
-
-
-
线路分布(总计:5)
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
{{ patrolOpinions.name }}
-
-
注意:{{ patrolOpinions.month }}
-
- {{ patrolOpinions.info1 }}
- {{ patrolOpinions.info2 }}
-
-
-
往年同期隐患比例分布图
-
-
-
-
-
-
-
-
-
diff --git a/src/views/stritl/index.vue b/src/views/stritl/index.vue
index f79e003..a1fdfdc 100644
--- a/src/views/stritl/index.vue
+++ b/src/views/stritl/index.vue
@@ -1,13 +1,558 @@
- 首页
+
+
+
+ 装置数量统计
+
+
+
+
+ 装置总数
+ {{ termDataNum.totalNum }}
+
+
+ 在线数量
+ {{ termDataNum.onlineNum }}
+
+
+ 离线率
+ {{ (termDataNum.offlinePercent * 100).toFixed(2) }}%
+
+
+ 在线率
+ {{ (termDataNum.onlinePercent * 100).toFixed(2) }}%
+
+
+
+
+
+ 装置在线统计
+
+
+
+
+
+ 7天告警数量统计
+
+ 当前日期前七天
+
+
+
+
+
+
+ 告警类型统计
+
+
+
+
+
+
+
+
+
+ 导出
+
+
+
+
+
+
+
+
+
+
+
+
+ dialogTableVisible: false,
+ onLineData: [],
+ exportLoading: false,
+ };
+ },
+ created() {
+ console.log(window.devicePixelRatio);
+ },
+ mounted() {
+ this.getDateTime(); //获取当前时间
+ this.getTermData();
+ this.getWeekAlarmStatistics();
+ this.getTodayAlarmStatistics();
+ },
+ watch: {
+ "$store.state.collapse"(val) {
+ console.log(val);
+ setTimeout(() => {
+ //echarts得重绘方法
+ this.myChart1.resize();
+ this.myChart2.resize();
+ this.myChart3.resize();
+ this.myChart4.resize();
+ }, 300);
+ },
+ },
+ methods: {
+ //查看在线列表
+ handleLook() {
+ this.dialogTableVisible = true;
+ this.exportLoading = true;
+ getOnlineTerminalList()
+ .then((res) => {
+ console.log(res);
+ this.onLineData = res.data;
+ this.exportLoading = false;
+ console.log(this.onLineData);
+ })
+ .catch((err) => {});
+ },
+ //导出
+ handleExport() {
+ window.location.href = "/api/api/getOnlineTerminalListExcel";
+ },
+ // 隐患数量统计
+ changedate() {
+ console.log(this.dateValue.getTime());
+ this.dateValue = this.dateValue.getTime();
+ this.getWeekAlarmStatistics();
+ },
+ // 隐患分类统计
+ changedate2() {
+ console.log(this.dateValue2.getTime());
+ this.dateValue2 = this.dateValue2.getTime();
+ this.getTodayAlarmStatistics();
+ },
+ //获取当前时间
+ getDateTime() {
+ console.log(new Date());
+ this.dateValue = new Date().getTime();
+ this.dateValue2 = new Date().getTime();
+ console.log(this.dateValue);
+ //console.log(this.$moment(this.dateValue).format("yy-MM-DD"));
+ },
+ //装置数量统计
+ getTermData() {
+ this.numloading = true;
+ this.pieloading = true;
+ getTermStatistics()
+ .then((res) => {
+ console.log(res);
+ this.termDataNum = res.data;
+ this.numloading = false;
+ this.pieloading = false;
+ this.getEchart2();
+ })
+ .catch((err) => {});
+ },
+ //获取7天告警统计
+ getWeekAlarmStatistics() {
+ this.barloading = true;
+ getWeekAlarmStatistics({ starttime: this.dateValue })
+ .then((res) => {
+ console.log(res);
+ this.weekData = res.data.list;
+ this.barloading = false;
+ this.getEchart3();
+ })
+ .catch((err) => {});
+ },
+ //获取当天告警分类统计
+ getTodayAlarmStatistics() {
+ this.pie2loading = true;
+ getTodayAlarmStatistics({ starttime: this.dateValue2 })
+ .then((res) => {
+ console.log(res);
+ this.todayAlarm = res.data.list;
+ this.pie2loading = false;
+ this.getEchart4();
+ })
+ .catch((err) => {});
+ },
+ //装置数量统计
+ getEchart2() {
+ this.$nextTick(() => {
+ console.log(this.termDataNum);
+ this.$echarts.init(document.getElementById("echart2")).dispose();
+ this.myChart2 = this.$echarts.init(document.getElementById("echart2"));
+ let option = {
+ // title: {
+ // text: "装置在线统计",
+ // },
+ color: ["#169e8c", "#bbb"],
+ tooltip: {
+ trigger: "item",
+ },
+ legend: {
+ type: "scroll",
+ orient: "vertical",
+ right: 10,
+ top: 20,
+ bottom: 20,
+ },
+ series: [
+ {
+ type: "pie",
+ radius: ["40%", "70%"],
+ avoidLabelOverlap: false,
+ itemStyle: {
+ borderRadius: 10,
+ borderColor: "#fff",
+ borderWidth: 2,
+ },
+ label: {
+ show: true,
+ fontSize: 16,
+ fontWeight: "bold",
+ formatter: "{b}\n{d}%",
+ },
+ emphasis: {
+ label: {
+ show: true,
+ fontSize: 26,
+ fontWeight: "bold",
+ formatter: "{b}\n{d}%",
+ },
+ },
+ labelLine: {
+ show: true,
+ },
+ data: [
+ { value: this.termDataNum.onlineNum, name: "在线" },
+ { value: this.termDataNum.offlineNum, name: "离线" },
+ ],
+ },
+ ],
+ };
+ this.myChart2.setOption(option);
+ window.addEventListener("resize", () => {
+ this.myChart2.resize();
+ });
+ });
+ },
+ //获取7天告警统计
+ getEchart3() {
+ this.$nextTick(() => {
+ this.$echarts.init(document.getElementById("echart3")).dispose();
+ this.myChart3 = this.$echarts.init(document.getElementById("echart3"));
+ let option = {
+ // title: {
+ // text: "隐患分类统计",
+ // },
+ color: ["#169e8c"],
+ tooltip: {
+ trigger: "axis",
+ axisPointer: {
+ type: "shadow",
+ },
+ },
+ grid: {
+ //与绝对定位相似,top,left,right,bottom 设定是根据上级盒子宽高来计算
+ top: "10%",
+ left: "10%",
+ right: "10%",
+ bottom: "10%",
+ },
+ xAxis: {
+ type: "category",
+ data: this.weekData.map((x) => {
+ return this.$moment(x.date).format("MM-DD");
+ }),
+ axisTick: {
+ alignWithLabel: true,
+ },
+ },
+ yAxis: { type: "value" },
+ series: [
+ {
+ name: "告警数量",
+ data: this.weekData.map((x) => {
+ return x.num;
+ }),
+ type: "bar",
+ showBackground: true,
+ backgroundStyle: { color: "rgba(180, 180, 180, 0.2)" },
+ },
+ ],
+ };
+ this.myChart3.setOption(option);
+ window.addEventListener("resize", () => {
+ this.myChart3.resize();
+ });
+ });
+ },
+ //获取当天告警分类统计
+ getEchart4() {
+ this.$nextTick(() => {
+ this.$echarts.init(document.getElementById("echart4")).dispose();
+ this.myChart4 = this.$echarts.init(document.getElementById("echart4"));
+ let arr = [];
+ this.todayAlarm.forEach((element) => {
+ arr.push({
+ value: element.num, //将数组的num值赋给value
+ name: element.enname, //将数组的name值赋给name
+ });
+ });
+ let option = {
+ // title: {
+ // text: "隐患分类统计",
+ // },
+ // tooltip: {
+ // trigger: "axis",
+ // axisPointer: {
+ // type: "shadow",
+ // },
+ // },
+ // xAxis: {
+ // type: "category",
+ // data: this.todayAlarm.map((item) => {
+ // return item.enname;
+ // }),
+ // axisTick: {
+ // alignWithLabel: true,
+ // },
+ // },
+ // yAxis: { type: "value" },
+ // series: [
+ // {
+ // name: "告警数量",
+ // data: this.todayAlarm.map((item) => {
+ // return item.num;
+ // }),
+ // type: "bar",
+ // showBackground: true,
+ // backgroundStyle: { color: "rgba(180, 180, 180, 0.2)" },
+ // },
+ // ],
+
+ // title: {
+ // text: "装置在线统计",
+ // },
+ tooltip: {
+ trigger: "item",
+ },
+ legend: {
+ type: "scroll",
+ orient: "vertical",
+ right: 10,
+ top: 20,
+ bottom: 20,
+ },
+ series: [
+ {
+ type: "pie",
+ radius: ["40%", "70%"],
+ avoidLabelOverlap: false,
+
+ itemStyle: {
+ borderRadius: 10,
+ borderColor: "#fff",
+ borderWidth: 2,
+ },
+ label: {
+ show: true,
+ fontSize: 16,
+ fontWeight: "bold",
+ formatter: "{b}\n{d}%",
+ },
+ emphasis: {
+ label: {
+ show: true,
+ fontSize: 26,
+ fontWeight: "bold",
+ formatter: "{b}\n{d}%",
+ },
+ },
+ labelLine: {
+ show: true,
+ },
+ data: arr,
+ },
+ ],
+ };
+ this.myChart4.setOption(option);
+ window.addEventListener("resize", () => {
+ this.myChart4.resize();
+ });
+ });
+ },
+ },
+};
+
diff --git a/src/views/system/globalTools/index.vue b/src/views/system/globalTools/index.vue
index efc0f7e..1560627 100644
--- a/src/views/system/globalTools/index.vue
+++ b/src/views/system/globalTools/index.vue
@@ -16,6 +16,21 @@
+
+
+ 设置告警通道
+
+
+
+
+
+
+
设置告警可信度
@@ -43,6 +58,7 @@ import {
updateAlarmTypeList,
getMarkEnableStatus,
updateMarkEnableStatus,
+ updateAlarmChannel,
} from "@/utils/api/index";
export default {
@@ -52,6 +68,8 @@ export default {
lineValue: false,
lineNum: 0,
probList: [],
+ tdOptions: [{ id: -1, name: "全部", alias: null }], //通道数据
+ channel: "",
};
},
created() {
@@ -64,11 +82,15 @@ export default {
getMarkEnableStatus()
.then((res) => {
console.log(res);
- if (res.data === 1) {
+ if (res.data.imgMark === 1) {
this.lineValue = true;
+ console.log("绘制开启");
} else {
this.lineValue = false;
+ console.log("绘制关闭");
}
+ this.channel = res.data.alarmChannel;
+ console.log(this.channel);
})
.catch((err) => {});
},
@@ -93,6 +115,8 @@ export default {
getAlarmTypeList().then((res) => {
console.log(res);
this.probList = res.data.list;
+ this.tdOptions = [{ id: -1, name: "全部", alias: null }];
+ this.tdOptions = this.tdOptions.concat(res.data.channellist);
});
},
setProb() {
@@ -113,6 +137,25 @@ export default {
console.log(err);
});
},
+ //获取告警通道
+ handleChange(val) {
+ console.log(val);
+ updateAlarmChannel({ channel: this.channel })
+ .then((res) => {
+ console.log(res);
+ if (res.code === 200) {
+ this.$message({
+ duration: 1500,
+ showClose: true,
+ message: "告警通道设置成功",
+ type: "success",
+ });
+ }
+ })
+ .catch((err) => {
+ console.log(err);
+ });
+ },
},
};
diff --git a/vue.config.js b/vue.config.js
index 0c32024..31ee2c5 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -29,11 +29,11 @@ module.exports = defineConfig({
proxy: {
"/api": {
//表示拦截以/api开头的请求路径
- // target: "http://47.96.238.157:8093", //阿里云服务器环境
- target: "http://180.166.218.222:40080", //dell
+ target: "http://47.96.238.157:8093", //阿里云服务器环境
+ // target: "http://180.166.218.222:40080", //dell
changOrigin: true, //是否开启跨域
pathRewrite: {
- "^/api": "/api", //重写api,把api变成空字符,因为我们真正请求的路径是没有api的
+ "^/api": "", //重写api,把api变成空字符,因为我们真正请求的路径是没有api的
},
},
},