diff --git a/src/App.vue b/src/App.vue index 87c4ae6..2577842 100644 --- a/src/App.vue +++ b/src/App.vue @@ -4,12 +4,16 @@ diff --git a/src/assets/css/element.less b/src/assets/css/element.less index 2af53cf..c2dbdc4 100644 --- a/src/assets/css/element.less +++ b/src/assets/css/element.less @@ -72,3 +72,6 @@ .el-select-dropdown { margin-top: 4px !important; } +.el-link { + font-size: 12px; +} diff --git a/src/assets/fonts/iconfont.css b/src/assets/fonts/iconfont.css index e5912cc..2e77ad2 100644 --- a/src/assets/fonts/iconfont.css +++ b/src/assets/fonts/iconfont.css @@ -1,6 +1,6 @@ @font-face { font-family: "iconfont"; /* Project id */ - src: url('iconfont.ttf?t=1683175912652') format('truetype'); + src: url('iconfont.ttf?t=1690188947515') format('truetype'); } .iconfont { @@ -11,6 +11,18 @@ -moz-osx-font-smoothing: grayscale; } +.icon-paizhao:before { + content: "\e6ba"; +} + +.icon-paizhao-xianxing:before { + content: "\e8d1"; +} + +.icon-tuiguanglishitupianjinqun:before { + content: "\e613"; +} + .icon-gongsi:before { content: "\e62e"; } @@ -23,11 +35,27 @@ content: "\e791"; } +.icon-shexiangtoulixian:before { + content: "\e7b2"; +} + .icon-video-camera:before { content: "\e962"; } +.icon-shexiangtou-lixian:before { + content: "\ef1c"; +} + +.icon-shexiangtou-zaixian:before { + content: "\ef1d"; +} + .icon-shudianxianlu_2722010801:before { content: "\efed"; } +.icon-tupian_normal:before { + content: "\e681"; +} + diff --git a/src/assets/fonts/iconfont.ttf b/src/assets/fonts/iconfont.ttf index 6cd3db6..21ab318 100644 Binary files a/src/assets/fonts/iconfont.ttf and b/src/assets/fonts/iconfont.ttf differ diff --git a/src/assets/img/nodatapic.jpg b/src/assets/img/nodatapic.jpg new file mode 100644 index 0000000..100f935 Binary files /dev/null and b/src/assets/img/nodatapic.jpg differ diff --git a/src/assets/img/nodatapic2.jpg b/src/assets/img/nodatapic2.jpg new file mode 100644 index 0000000..6a25538 Binary files /dev/null and b/src/assets/img/nodatapic2.jpg differ diff --git a/src/components/common/Sidebar.vue b/src/components/common/Sidebar.vue index c87b0de..3cfdbf5 100644 --- a/src/components/common/Sidebar.vue +++ b/src/components/common/Sidebar.vue @@ -51,13 +51,13 @@ export default { data() { return { - activeIndex: "/realTimeMonitor", + activeIndex: "/stritl", items: [ - // { - // icon: "el-icon-s-home", - // index: "/videoHistory", - // title: "首页", - // }, + { + icon: "el-icon-s-home", + index: "/stritl", + title: "首页", + }, { icon: "el-icon-camera", index: "/realTimeMonitor", @@ -134,11 +134,11 @@ export default { }, ], items1: [ - // { - // icon: "el-icon-s-home", - // index: "stritl", - // title: "首页", - // }, + { + icon: "el-icon-s-home", + index: "stritl", + title: "首页", + }, { icon: "el-icon-camera", index: "/realTimeMonitor", @@ -215,11 +215,11 @@ export default { }, ], items2: [ - // { - // icon: "el-icon-s-home", - // index: "stritl", - // title: "首页", - // }, + { + icon: "el-icon-s-home", + index: "stritl", + title: "首页", + }, { icon: "el-icon-camera", index: "/realTimeMonitor", diff --git a/src/components/common/devicePixelRatio.js b/src/components/common/devicePixelRatio.js new file mode 100644 index 0000000..d43985e --- /dev/null +++ b/src/components/common/devicePixelRatio.js @@ -0,0 +1,60 @@ +class DevicePixelRatio { + constructor() { + //this.flag = false; + } + //获取系统类型 + _getSystem() { + let flag = false; + var agent = navigator.userAgent.toLowerCase(); + // var isMac = /macintosh|mac os x/i.test(navigator.userAgent); + // if(isMac) { + // return false; + // } + //现只针对windows处理,其它系统暂无该情况,如有,继续在此添加 + if (agent.indexOf("windows") >= 0) { + return true; + } + } + //获取页面缩放比例 + // _getDevicePixelRatio() { + // let t = this; + // } + //监听方法兼容写法 + _addHandler(element, type, handler) { + if (element.addEventListener) { + element.addEventListener(type, handler, false); + } else if (element.attachEvent) { + element.attachEvent("on" + type, handler); + } else { + element["on" + type] = handler; + } + } + //校正浏览器缩放比例 + _correct() { + let t = this; + //页面devicePixelRatio(设备像素比例)变化后,计算页面body标签zoom修改其大小,来抵消devicePixelRatio带来的变化。 + document.getElementsByTagName("body")[0].style.zoom = + 1 / window.devicePixelRatio; + } + //监听页面缩放 + _watch() { + let t = this; + t._addHandler(window, "resize", function () { + //注意这个方法是解决全局有两个window.resize + //重新校正 + t._correct(); + }); + } + //初始化页面比例 + init() { + let t = this; + if (t._getSystem()) { + //判断设备,目前只在windows系统下校正浏览器缩放比例 + //初始化页面校正浏览器缩放比例 + t._correct(); + //开启监听页面缩放 + t._watch(); + } + } +} +export default DevicePixelRatio; diff --git a/src/router/index.js b/src/router/index.js index 7e7467b..50c18af 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -13,7 +13,7 @@ const routes = [ component: () => import(/* webpackChunkName: "home" */ "../components/common/Home.vue"), meta: { title: "首页" }, - redirect: "/realTimeMonitor", + redirect: "/stritl", children: [ { path: "/stritl", diff --git a/src/utils/api/index.js b/src/utils/api/index.js index 4e2cf6e..21dc317 100644 --- a/src/utils/api/index.js +++ b/src/utils/api/index.js @@ -7,6 +7,40 @@ export function loginJoggle(data) { data, }); } +//获取装置总数图表 +export function getTermStatistics(data) { + return request({ + url: "/api/getTermStatistics", + method: "get", + params: data, + }); +} +//获取一周的装置告警 + +export function getWeekAlarmStatistics(data) { + return request({ + url: "/api/getWeekAlarmStatistics", + method: "get", + params: data, + }); +} +//获取当天告警分类统计 +export function getTodayAlarmStatistics(data) { + return request({ + url: "/api/getTodayAlarmStatistics", + method: "get", + params: data, + }); +} +//获取所有杆塔下的图片列表,实时监控 + +export function getTowerAndPhotoList(data) { + return request({ + url: "/api/getTowerAndPhotoList", + method: "post", + data, + }); +} //声光报警 export function alarmMarkJoggle(data) { return request({ @@ -20,8 +54,11 @@ export function alarmMarkJoggle(data) { export function getdyTreeListJoggle(data) { return request({ url: "/api/getdyTreeList", - method: "post", - data, + method: "get", + params: data, + headers: { + "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8", + }, }); } //获取图片接口 @@ -498,14 +535,26 @@ export function setTermGPSJoggle(data) { } //手动拍照 -export function getLatestPhotoJoggle(data) { +export function takePicJoggle(data) { return request({ - url: "/api/getLatestPhoto", - method: "post", - data, + url: "/api/takePic", + method: "get", + + params: data, + // data, + // headers: { + // "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8", + // }, + }); +} +//手动拍 获取装置状态 +export function getTakePicStatusJoggle(data) { + return request({ + url: "/api/getTakePicStatus", + method: "get", + params: data, }); } - //获取所有通道列表 export function getAllChannelListJoggle(data) { @@ -527,11 +576,11 @@ export function getAllTowerJoggle(data) { } //手动拍照获取最新图片 -export function getReturnedPhotoJoggle(data) { +export function getTakePicPhotoStatusJoggle(data) { return request({ - url: "/api/getReturnedPhoto", - method: "post", - data, + url: "/api/getTakePicPhotoStatus", + method: "get", + params: data, }); } @@ -706,7 +755,18 @@ export function updateMarkEnableStatus(data) { }, }); } +//全局设置通道 +export function updateAlarmChannel(data) { + return request({ + url: "/api/updateAlarmChannel", + method: "post", + data, + headers: { + "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8", + }, + }); +} ///api/getTermStatus export function getTermStatus(data) { return request({ @@ -718,3 +778,41 @@ export function getTermStatus(data) { }, }); } + +//导出数据 + +export function getTerminalListExcel() { + return request({ + url: "/api/getTerminalListExcel", + method: "post", + responseType: "blob", + }); +} + +//首页查看数据 + +export function getOnlineTerminalList(data) { + return request({ + url: "/api/getOnlineTerminalList", + method: "get", + params: data, + }); +} +//导出数据 +export function getOnlineTerminalListExcel() { + return request({ + url: "/api/getOnlineTerminalListExcel", + method: "post", + responseType: "blob", + }); +} + +//调节焦距 + +export function updateTermCamera(data) { + return request({ + url: "/api/updateTermCamera", + method: "get", + params: data, + }); +} diff --git a/src/views/Login.vue b/src/views/Login.vue index 60ac9e3..fc7f9a5 100644 --- a/src/views/Login.vue +++ b/src/views/Login.vue @@ -108,7 +108,7 @@ export default { if (res.code == 200) { this.$store.commit("SET_TOKEN", res.data.sessionId); //将token保存在vuex中 this.$store.commit("SET_USERINFO", res.data); //将用户信息保存在vuex中 - this.$router.push("/realTimeMonitor"); + this.$router.push("/stritl"); this.$message({ duration: 1500, diff --git a/src/views/alarmHandling/components/historyimg copy.vue b/src/views/alarmHandling/components/historyimg copy.vue new file mode 100644 index 0000000..df3a804 --- /dev/null +++ b/src/views/alarmHandling/components/historyimg copy.vue @@ -0,0 +1,111 @@ + + + diff --git a/src/views/alarmHandling/components/historyimg.vue b/src/views/alarmHandling/components/historyimg.vue index 9ea3750..12ef6fc 100644 --- a/src/views/alarmHandling/components/historyimg.vue +++ b/src/views/alarmHandling/components/historyimg.vue @@ -1,37 +1,46 @@ diff --git a/src/views/alarmHandling/index copy.vue b/src/views/alarmHandling/index copy.vue new file mode 100644 index 0000000..bbba1df --- /dev/null +++ b/src/views/alarmHandling/index copy.vue @@ -0,0 +1,1269 @@ + + + + diff --git a/src/views/alarmHandling/index.vue b/src/views/alarmHandling/index.vue index 599a52d..1fd3db4 100644 --- a/src/views/alarmHandling/index.vue +++ b/src/views/alarmHandling/index.vue @@ -37,6 +37,7 @@ > + - - +
@@ -244,7 +232,7 @@ > 历史图片 @@ -253,55 +241,73 @@
-
-
- - +
+ + +
+
+ + +
-

- {{ item.lineName }} / - {{ - item.displayName !== null && item.displayName !== "" - ? item.displayName - : item.cmdid - }} - / - {{ - item.alias !== null && item.alias !== "" - ? item.alias - : item.channnelName - }} - / 告警原因:({{ item.enname }}) + [已读] + [未读] + + {{ item.lineName }} / + {{ + item.displayName !== null && item.displayName !== "" + ? item.displayName + : item.cmdid + }} + / + {{ + item.alias !== null && item.alias !== "" + ? item.alias + : item.channnelName + }} +

- 告警时间:{{ + {{ $moment(item.alarmTime).format("YYYY-MM-DD HH:mm:ss") - }} - 主动拍照 - 历史图片 + }} + ({{ item.enname }})

- +
@@ -327,8 +333,14 @@ :style="{ transform: 'scale(' + zoomD + ')' }" @mousedown="move" > - - + +
@@ -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 @@ - - - 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 @@
- @@ -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 @@

拍照装置管理

- 新增 +
+ 新增 + 导出 +
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 @@ + + + + + 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 @@ - - - - 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 @@ + + + + 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 @@ - - - - - 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 @@ + + 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的 }, }, },