在线离线

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",
+    },
   });
 }
 //获取图片接口

src/views/components/carouselChart.vue

@@ -2,6 +2,7 @@
   <div class="thumb-example">
     <div class="picTop">
       <!-- 判断是否是图片并且不为空 -->
+
       <div
         class="bigimg"
         v-if="
@@ -10,6 +11,16 @@
         "
         :style="bigPicPath ? 'backgroundImage:url(' + bigPicPath + ')' : ''"
       >
+        <el-button
+          class="downBtn"
+          @click.stop="
+            downLoadPic(
+              bigPicPath.substring(0, bigPicPath.length - 9),
+              bigPicPath.substring(0, bigPicPath.length - 9)
+            )
+          "
+          >下载图片</el-button
+        >
         <!--  @click="handleBigPicbox(bigPicPath)"  v-viewer="OptionssalseImg"-->
         <div
           class="nosee"
@@ -271,6 +282,31 @@ export default {
   },
   created() {},
   methods: {
+    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("!")) {
@@ -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;

src/views/realTimeMonitor/index.vue

@@ -22,10 +22,17 @@
         </div>
         <div class="radioFilter">
           <el-radio-group v-model="zzradio" @input="getRadio">
-            <el-radio label="-1">全部</el-radio>
-            <el-radio label="1">在线</el-radio>
-            <el-radio label="2">离线</el-radio>
+            <el-radio :label="-1">全部</el-radio>
+            <el-radio :label="1">在线</el-radio>
+            <el-radio :label="0">离线</el-radio>
           </el-radio-group>
+          <el-button
+            class="refresh"
+            @click="getLineTreeStatus"
+            type="text"
+            icon="el-icon-refresh-right"
+            >刷新</el-button
+          >
         </div>
         <el-tree
           ref="tree"
@@ -376,7 +383,7 @@ export default {
       selectLineId: "",
       selectTowerId: "",
       currentData: "", //保存选中的数据
-      zzradio: "-1",
+      zzradio: -1,
     };
   },
   watch: {
@@ -393,6 +400,8 @@ export default {
   },
   created() {
     //获取日期
+    this.zzradio = JSON.parse(localStorage.getItem("radio"));
+    this.getRadio();
     this.getLineTreeList();
     this.treetimer = window.setInterval(() => {
       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;

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的