From de7af2db3d238b0d02c9835593ad0eb19f6a938b Mon Sep 17 00:00:00 2001 From: fanluyan <754122931@qq.com> Date: Thu, 3 Aug 2023 17:50:56 +0800 Subject: [PATCH] =?UTF-8?q?=E5=9C=A8=E7=BA=BF=E7=A6=BB=E7=BA=BF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/utils/api/index.js | 7 ++- src/views/components/carouselChart.vue | 49 ++++++++++++++++++ src/views/realTimeMonitor/index.vue | 71 +++++++++++++++++++++++--- vue.config.js | 2 +- 4 files changed, 119 insertions(+), 10 deletions(-) diff --git a/src/utils/api/index.js b/src/utils/api/index.js index 021044a..21dc317 100644 --- a/src/utils/api/index.js +++ b/src/utils/api/index.js @@ -54,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", + }, }); } //获取图片接口 diff --git a/src/views/components/carouselChart.vue b/src/views/components/carouselChart.vue index 803411e..aeb294c 100644 --- a/src/views/components/carouselChart.vue +++ b/src/views/components/carouselChart.vue @@ -2,6 +2,7 @@
+
+ 下载图片
{ + 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("!")) { @@ -582,6 +618,19 @@ export default { 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; diff --git a/src/views/realTimeMonitor/index.vue b/src/views/realTimeMonitor/index.vue index 4362a13..2491621 100644 --- a/src/views/realTimeMonitor/index.vue +++ b/src/views/realTimeMonitor/index.vue @@ -22,10 +22,17 @@
- 全部 - 在线 - 离线 + 全部 + 在线 + 离线 + 刷新
{ setTimeout(this.getLineTreeStatus(), 0); @@ -401,7 +410,9 @@ export default { methods: { //获取当前选中的radio getRadio() { - console.log(); + console.log(this.zzradio); + localStorage.setItem("radio", JSON.stringify(this.zzradio)); + this.getLineTreeStatus(); }, //获取当前时间 getDateTime() { @@ -455,10 +466,11 @@ export default { if (this.filterText !== "") { this.$refs.tree.filter(this.filterText); } else { - getdyTreeListJoggle() + getdyTreeListJoggle({ type: this.zzradio }) .then((res) => { console.log(res); this.lineTreeData = res.data.list; + this.$nextTick(() => { this.$refs.tree.setCurrentKey(this.selectData.id); //一定要加这个选中了否则样式没有出来 }); @@ -484,11 +496,13 @@ export default { }, //获取左侧树结构 getLineTreeList() { - getdyTreeListJoggle() + console.log(this.zzradio); + getdyTreeListJoggle({ type: this.zzradio }) .then((res) => { console.log(res); this.lineTreeData = res.data.list; console.log(this.lineTreeData); + this.onlineNum = res.data.onlineNum; this.totalNum = res.data.totalNum; this.currentData = JSON.parse(localStorage.getItem("currentData")); @@ -521,6 +535,45 @@ export default { this.$refs.tree.setCurrentKey(this.currentNodekey); //一定要加这个选中了否则样式没有出来 }); } + // if (this.zzradio == -1) { + // this.lineTreeData = this.lineTreeData; + // } else if (this.zzradio == 1) { + // //在线 + // var data = JSON.parse(JSON.stringify(this.lineTreeData)); + // console.log(data); + // const filterId = (data, id) => { + // if (!Array.isArray(data)) { + // return data; + // } + // return data.filter((item) => { + // if ("list" in item) { + // item.list = filterId(item.list, id); + // } + // return item.onlinestatus !== 0; + // }); + // }; + // const filtredData = filterId(data); + // console.log(filtredData); + // this.lineTreeData = filtredData; + // } else if (this.zzradio == 0) { + // //离线 + // var data = JSON.parse(JSON.stringify(this.lineTreeData)); + // console.log(data); + // const filterId = (data, id) => { + // if (!Array.isArray(data)) { + // return data; + // } + // return data.filter((item) => { + // if ("list" in item) { + // item.list = filterId(item.list, id); + // } + // return item.onlinestatus !== 1; + // }); + // }; + // const filtredData = filterId(data); + // console.log(filtredData); + // this.lineTreeData = filtredData; + // } }) .catch((err) => { console.log(err); //代码错误、请求失败捕获 @@ -1224,6 +1277,10 @@ export default { margin: 0 auto; margin-bottom: 8px; font-size: 12px; + display: flex; + justify-content: space-around; + .refresh { + } .el-radio-group { display: flex; align-items: center; diff --git a/vue.config.js b/vue.config.js index 040028d..31ee2c5 100644 --- a/vue.config.js +++ b/vue.config.js @@ -30,7 +30,7 @@ module.exports = defineConfig({ "/api": { //表示拦截以/api开头的请求路径 target: "http://47.96.238.157:8093", //阿里云服务器环境 - //target: "http://180.166.218.222:40080", //dell + // target: "http://180.166.218.222:40080", //dell changOrigin: true, //是否开启跨域 pathRewrite: { "^/api": "", //重写api，把api变成空字符，因为我们真正请求的路径是没有api的