From 7f97e2b080f53b3af7511a2b7d00ba6a6a3011a8 Mon Sep 17 00:00:00 2001
From: fanluyan <754122931@qq.com>
Date: Wed, 13 Dec 2023 13:48:31 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=B7=BB=E5=8A=A0=E6=94=B6?=
 =?UTF-8?q?=E8=97=8F=E5=92=8C=E5=88=A0=E9=99=A4=E5=9B=BE=E7=89=87=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/api/index.js                 |  16 +
 src/views/components/carouselChart.vue |   3 +
 src/views/realTimeMonitor/index.vue    | 440 ++++++++++++++++++-------
 src/views/realTimeSearch/index.vue     |  75 ++++-
 vue.config.js                          |   4 +-
 5 files changed, 413 insertions(+), 125 deletions(-)

diff --git a/src/utils/api/index.js b/src/utils/api/index.js
index ac83717..95f23d8 100644
--- a/src/utils/api/index.js
+++ b/src/utils/api/index.js
@@ -817,3 +817,19 @@ export function updateTermCamera(data) {
     params: data,
   });
 }
+//删除图片
+export function deletePicList(data) {
+  return request({
+    url: "/api/deletePicList",
+    method: "post",
+    data,
+  });
+}
+
+export function addFavorList(data) {
+  return request({
+    url: "/api/addFavorList",
+    method: "post",
+    data,
+  });
+}
diff --git a/src/views/components/carouselChart.vue b/src/views/components/carouselChart.vue
index d18a851..ae213e3 100644
--- a/src/views/components/carouselChart.vue
+++ b/src/views/components/carouselChart.vue
@@ -65,6 +65,7 @@
       <ul class="smallPicBox">
         <li
           v-for="(item, index) in fiveList"
+          :key="index"
           @click="handleBigpic(item, index)"
           :class="activeSmall === index ? 'borderActive' : ''"
         >
@@ -292,6 +293,8 @@ export default {
   },
   watch: {
     terminalPhoto: function (newVal, oldVal) {
+      console.log("我是图片我变了");
+      this.terminalPhoto = oldVal.concat(newVal);
       this.bigPicPath = this.terminalPhoto[0].path + "!1366x768";
       this.fiveList = this.terminalPhoto.slice(this.page - 1, this.pagesize);
       this.total = this.terminalPhoto.length / this.pagesize;
diff --git a/src/views/realTimeMonitor/index.vue b/src/views/realTimeMonitor/index.vue
index 2850913..c958976 100644
--- a/src/views/realTimeMonitor/index.vue
+++ b/src/views/realTimeMonitor/index.vue
@@ -3,6 +3,21 @@
     <div class="monitor-container">
       <!-- 左侧数据列表树 -->
       <div class="sideBar">
+        <div class="tabMenu">
+          <el-radio-group v-model="favorVal" @input="getfavRadio">
+            <el-radio-button :label="-1">全部</el-radio-button>
+            <el-radio-button :label="1">收藏</el-radio-button>
+          </el-radio-group>
+          <div class="deviceNum">
+            <el-statistic title="在线 / 总数">
+              <template slot="formatter">
+                （<span>{{ onlineNum ? onlineNum : 0 }}</span> /
+                <span>{{ totalNum ? totalNum : 0 }}</span
+                >）
+              </template>
+            </el-statistic>
+          </div>
+        </div>
         <div class="searchBar">
           <el-input
             placeholder="输入关键字进行过滤"
@@ -11,16 +26,7 @@
           >
           </el-input>
         </div>
-        <div class="deviceNum">
-          <el-statistic title="装置在线 / 总数">
-            <template slot="formatter">
-              （<span>{{ onlineNum ? onlineNum : 0 }}</span> /
-              <span>{{ totalNum ? totalNum : 0 }}</span
-              >）
-            </template>
-          </el-statistic>
-        </div>
-        <div class="radioFilter">
+        <div class="radioFilter" v-if="favorVal != 1">
           <el-radio-group v-model="zzradio" @input="getRadio">
             <el-radio :label="-1">全部</el-radio>
             <el-radio :label="1">在线</el-radio>
@@ -34,58 +40,94 @@
             >刷新</el-button
           >
         </div>
-        <el-tree
-          ref="tree"
-          :data="lineTreeData"
-          :props="defaultProps"
-          node-key="id"
-          default-expand-all
-          highlight-current
-          :expand-on-click-node="false"
-          :filter-node-method="filterNode"
-          :current-node-key="currentNodekey"
-          @node-click="handleNodeClick"
-        >
-          <span class="custom-tree-node" slot-scope="{ node, data }">
-            <span v-if="node.level === 1">
-              <span
-                class="iconfont icon-dianli"
-                style="margin-right: 6px"
-              ></span>
-              <span>{{ node.label }} </span>
-            </span>
-            <span v-else-if="node.level === 2">
-              <span
-                class="iconfont icon-dianlihangye"
-                style="margin-right: 6px"
-              >
+        <div class="treeboxAll">
+          <el-tree
+            v-if="showFavor"
+            ref="favortree"
+            :data="favorData"
+            default-expand-all
+            node-key="id"
+            :props="defaultProps"
+            highlight-current
+            :current-node-key="currentNodekey"
+            @node-click="handleFavorNodeClick"
+          >
+            <span class="custom-tree-node" slot-scope="{ node, data }">
+              <span>
+                <span
+                  class="iconfont icon-shexiangtoulixian"
+                  v-if="data.onlinestatus == 0"
+                  :class="data.onlinestatus == 0 ? 'disconnect' : ''"
+                  style="margin-right: 6px"
+                ></span>
+                <span
+                  class="iconfont icon-shexiangtou-lixian"
+                  v-else
+                  :class="data.onlinestatus == 0 ? 'disconnect' : ''"
+                  style="margin-right: 6px"
+                ></span>
+                <span
+                  :id="data.id"
+                  :class="data.onlinestatus == 0 ? 'disconnect' : ''"
+                  >{{ node.label }}</span
+                >
               </span>
-              <span>{{ node.label }} </span>
             </span>
-            <span v-else>
-              <span
-                class="iconfont icon-shexiangtoulixian"
-                v-if="data.onlinestatus == 0"
-                :class="data.onlinestatus == 0 ? 'disconnect' : ''"
-                style="margin-right: 6px"
-              ></span>
-              <span
-                class="iconfont icon-shexiangtou-lixian"
-                v-else
-                :class="data.onlinestatus == 0 ? 'disconnect' : ''"
-                style="margin-right: 6px"
-              ></span>
-              <span
-                :id="data.id"
-                :class="data.onlinestatus == 0 ? 'disconnect' : ''"
-                >{{ node.label }}</span
-              >
-            </span>
-            <!-- <span :class="data.onlinestatus == 0 ? 'disconnect' : ''"
+          </el-tree>
+          <el-tree
+            v-else
+            ref="tree"
+            :data="lineTreeData"
+            :props="defaultProps"
+            node-key="id"
+            default-expand-all
+            highlight-current
+            :expand-on-click-node="false"
+            :filter-node-method="filterNode"
+            :current-node-key="currentNodekey"
+            @node-click="handleNodeClick"
+          >
+            <span class="custom-tree-node" slot-scope="{ node, data }">
+              <span v-if="node.level === 1">
+                <span
+                  class="iconfont icon-dianli"
+                  style="margin-right: 6px"
+                ></span>
+                <span>{{ node.label }} </span>
+              </span>
+              <span v-else-if="node.level === 2">
+                <span
+                  class="iconfont icon-dianlihangye"
+                  style="margin-right: 6px"
+                >
+                </span>
+                <span>{{ node.label }} </span>
+              </span>
+              <span v-else>
+                <span
+                  class="iconfont icon-shexiangtoulixian"
+                  v-if="data.onlinestatus == 0"
+                  :class="data.onlinestatus == 0 ? 'disconnect' : ''"
+                  style="margin-right: 6px"
+                ></span>
+                <span
+                  class="iconfont icon-shexiangtou-lixian"
+                  v-else
+                  :class="data.onlinestatus == 0 ? 'disconnect' : ''"
+                  style="margin-right: 6px"
+                ></span>
+                <span
+                  :id="data.id"
+                  :class="data.onlinestatus == 0 ? 'disconnect' : ''"
+                  >{{ node.label }}</span
+                >
+              </span>
+              <!-- <span :class="data.onlinestatus == 0 ? 'disconnect' : ''"
               >{{ node.level }}---{{ node.label }}</span
             > -->
-          </span>
-        </el-tree>
+            </span>
+          </el-tree>
+        </div>
       </div>
       <div class="resize" title="收缩侧边栏"></div>
 
@@ -113,7 +155,14 @@
         </div>
         <div class="parameterArea">
           <div class="zzbox">
-            {{ zzCmdid }}
+            <b>{{ zzCmdid }}</b>
+            <!-- <b>{{ collectFlag }}</b> -->
+            <el-button
+              type="text"
+              :icon="collectFlag ? 'el-icon-star-on' : 'el-icon-star-off'"
+              @click="addCollectClick"
+              >{{ collectFlag ? "取消收藏" : "添加收藏" }}</el-button
+            >
           </div>
           <div class="paramsDate">
             <h3>日历快速查询</h3>
@@ -314,6 +363,7 @@ import {
   getTakePicStatusJoggle,
   setTermGPSJoggle,
   updateTermCamera,
+  addFavorList,
 } from "@/utils/api/index";
 import previewContain from "./previewContain.vue";
 import carouselChart from "../components/carouselChart.vue";
@@ -321,6 +371,7 @@ import setschedule from "./components/setschedule.vue";
 import infoDialog from "./components/infoDialog.vue";
 import gpsPosition from "./components/gpsPosition.vue";
 import morePicPreveiw from "./components/morePicPreveiw.vue";
+
 import { number } from "echarts";
 export default {
   components: {
@@ -387,9 +438,22 @@ export default {
       selectTowerId: "",
       currentData: "", //保存选中的数据
       zzradio: -1,
+
+      favorVal: -1, //收藏夹默认选中
+      showFavor: false,
+      collectFlag: false,
+      favorData: [
+        {
+          id: 1,
+          name: "收藏夹",
+          list: [],
+        },
+      ],
     };
   },
   watch: {
+    //增量刷新内容
+
     filterText(val) {
       console.log(val);
       this.$refs.tree.filter(val);
@@ -427,6 +491,22 @@ export default {
     }, 300000);
   },
   methods: {
+    //获取收藏
+    getfavRadio() {
+      console.log("点击了收藏");
+      console.log(this.showFavor);
+      console.log(this.favorVal);
+      if (this.favorVal == -1) {
+        console.log("全部");
+        this.showFavor = false;
+        this.getLineTreeList();
+      } else {
+        console.log("收藏");
+        this.showFavor = true;
+        this.getFavorTreeList();
+      }
+    },
+    //
     //获取当前选中的radio
     getRadio() {
       console.log(this.zzradio);
@@ -451,6 +531,11 @@ export default {
       this.zztermId = data.id;
       this.zzprotocol = data.protocol;
       this.CurrentData = data;
+      if (data.isfavor == 0 || data.isfavor == null) {
+        this.collectFlag = false;
+      } else {
+        this.collectFlag = true;
+      }
       //this.previewData = data;
       if (data.dyValue) {
         this.LineFlag = true;
@@ -554,52 +639,74 @@ export default {
           this.$nextTick(() => {
             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); //代码错误、请求失败捕获
         });
     },
-
+    //获取收藏夹结构数据
+    getFavorTreeList() {
+      getdyTreeListJoggle({ type: this.zzradio })
+        .then((res) => {
+          console.log(res);
+          this.favorData[0].list = res.data.favorlist;
+          console.log(this.favorData);
+          this.onlineNum = res.data.onlineNum;
+          this.totalNum = res.data.totalNum;
+          this.currentData = this.favorData[0].list[0];
+          console.log(this.currentData);
+          this.handleFavorNodeClick(this.currentData);
+          this.$nextTick(() => {
+            this.$refs.favortree.setCurrentKey(this.currentData.id); //一定要加这个选中了否则样式没有出来
+          });
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+    getupdateFavorTreeList() {
+      getdyTreeListJoggle({ type: this.zzradio })
+        .then((res) => {
+          console.log(res);
+          this.favorData[0].list = res.data.favorlist;
+          console.log(this.favorData);
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+    handleFavorNodeClick(data) {
+      this.clearfun();
+      console.log(data, "11111111");
+      this.selectData = data;
+      this.zztermId = data.id;
+      this.zzprotocol = data.protocol;
+      this.CurrentData = data;
+      //this.previewData = data;
+      if (data.isfavor == 0 || data.isfavor == null) {
+        this.collectFlag = false;
+      } else {
+        this.collectFlag = true;
+      }
+      console.log(this.collectFlag, "22222222");
+      if (data.name == "收藏夹") {
+        return;
+      } else {
+        console.log("杆塔");
+        this.LineFlag = false;
+        this.towerFlag = true;
+        this.towertitle = data.name;
+        this.zzCmdid = data.cmdid;
+        //this.previewData = data;
+        if (data.isfavor == 0 || data.isfavor == null) {
+          this.collectFlag = false;
+        } else {
+          this.collectFlag = true;
+        }
+        this.getChannelList(data.id);
+        // this.getTerminalPhotoList(id, date, data.id);
+      }
+    },
     //获取通道的接口
     getChannelList(id) {
       getChannelByTermidJoggle({ termid: id })
@@ -703,6 +810,51 @@ export default {
           console.log(err); //代码错误、请求失败捕获
         });
     },
+    addCollectClick() {
+      if (!this.collectFlag) {
+        this.$confirm("此操作将添加至收藏夹, 是否继续?", "提示", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning",
+        })
+          .then(() => {
+            this.collectFlag = true;
+            addFavorList({ list: [this.zztermId], type: 1 }).then((res) => {
+              this.getupdateFavorTreeList();
+            });
+            this.$message({
+              type: "success",
+              message: "添加成功!",
+            });
+          })
+          .catch(() => {
+            this.$message({
+              type: "info",
+              message: "已取消该操作",
+            });
+          });
+      } else {
+        this.$confirm("此操作将取消收藏, 是否继续?", "提示", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning",
+        }).then(() => {
+          this.collectFlag = false;
+          addFavorList({ list: [this.zztermId], type: 0 }).then((res) => {
+            this.getFavorTreeList();
+          });
+          this.$message({
+            type: "success",
+            message: "取消收藏!",
+          }).catch(() => {
+            this.$message({
+              type: "info",
+              message: "已取消该操作",
+            });
+          });
+        });
+      }
+    },
     //点击图片列表执行函数
     jumpTowerPic(data) {
       console.log("我是从子组件过来的数据");
@@ -1270,30 +1422,68 @@ export default {
       //border-right: 1px solid @border-color-base;
       display: flex;
       flex-direction: column;
-      padding: 16px 0px;
-      .searchBar {
-        width: 94%;
-        margin: 0 auto;
+      // padding: 16px 0px;
+      .barHead {
+        width: calc(100% - 12px);
+        height: 32px;
+        background: linear-gradient(180deg, #4cdbc8 10%, #128071);
+        line-height: 32px;
+        display: flex;
+        align-items: center;
+        padding-left: 12px;
         margin-bottom: 8px;
+        .el-divider--vertical {
+          width: 2px;
+          margin-left: 0px;
+        }
+        h2 {
+          color: #fff;
+          font-size: 16px;
+          font-weight: normal;
+        }
       }
-      .deviceNum {
-        width: 94%;
-        margin: 0 auto;
+      .tabMenu {
         margin-bottom: 8px;
-        height: 20px;
-        line-height: 20px;
-        font-size: 12px;
-        .el-statistic {
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          .head {
+        padding-left: 12px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-top: 8px;
+        .el-radio-group {
+          .el-radio-button {
+            margin-right: 12px;
+            .el-radio-button__inner {
+              border-radius: 4px;
+              border: 1px solid #dcdfe6;
+              box-shadow: none;
+            }
           }
-          .con {
-            color: #169e8c;
+        }
+        .deviceNum {
+          // width: 94%;
+          // margin: 0 auto;
+          // margin-bottom: 8px;
+          height: 20px;
+          line-height: 20px;
+          font-size: 12px;
+          .el-statistic {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            .head {
+            }
+            .con {
+              color: #169e8c;
+            }
           }
         }
       }
+      .searchBar {
+        width: 94%;
+        margin: 0 auto;
+        margin-bottom: 8px;
+      }
+
       .radioFilter {
         width: 94%;
         margin: 0 auto;
@@ -1312,9 +1502,11 @@ export default {
           }
         }
       }
-      .el-tree {
+      .treeboxAll {
         overflow-y: auto;
         overflow-x: hidden;
+      }
+      .el-tree {
         .el-tree-node__content {
           height: 32px;
           font-size: 12px;
@@ -1412,11 +1604,17 @@ export default {
         .zzbox {
           height: 32px;
           line-height: 32px;
-          color: #169e8c;
-          font-size: 14px;
-          font-weight: normal;
+          display: flex;
           //margin-bottom: 16px;
           //background-color: #169e8cb0;
+          b {
+            color: #169e8c;
+            font-size: 14px;
+            font-weight: normal;
+          }
+          .el-button--text {
+            color: #f08200;
+          }
         }
         .paramsDate,
         .monitorItemBox,
diff --git a/src/views/realTimeSearch/index.vue b/src/views/realTimeSearch/index.vue
index ca1fb6a..0eca190 100644
--- a/src/views/realTimeSearch/index.vue
+++ b/src/views/realTimeSearch/index.vue
@@ -130,7 +130,6 @@
               </div>
 
               <!-- <el-image :src="item.path" lazy></el-image> -->
-
               <div class="caption">
                 <p class="infoTop">
                   {{ item.linename }} /
@@ -156,6 +155,14 @@
                   }} -->
                 </p>
               </div>
+              <div class="deleteBox" v-if="role != 2">
+                <el-button
+                  title="删除照片"
+                  type="primary"
+                  icon="el-icon-delete"
+                  @click.stop="deletePic(item)"
+                ></el-button>
+              </div>
             </div>
             <div class="bigpic" v-else>
               <!-- <el-image :src="item.path" lazy></el-image> -->
@@ -232,7 +239,11 @@
 </template>
 
 <script>
-import { getSearchInfo, getRealtimePhoto } from "@/utils/api/index";
+import {
+  getSearchInfo,
+  getRealtimePhoto,
+  deletePicList,
+} from "@/utils/api/index";
 export default {
   data() {
     return {
@@ -281,9 +292,11 @@ export default {
       current: 0,
       //告警
       alarmList: "",
+      role: "",
     };
   },
   created() {
+    this.role = localStorage.getItem("role");
     var that = this;
     document.onkeydown = function (e) {
       var key = window.event.keyCode;
@@ -1000,6 +1013,37 @@ export default {
       }
       this.getPicData();
     },
+    deletePic(val) {
+      console.log(val);
+      let deleteArr = [];
+      deleteArr.push(val.picid);
+      console.log(deleteArr);
+      deletePicList({ list: deleteArr })
+        .then((res) => {
+          console.log(res);
+          this.$confirm("此操作将永久删除该图片, 是否继续?", "提示", {
+            confirmButtonText: "确定",
+            cancelButtonText: "取消",
+            type: "warning",
+          })
+            .then(() => {
+              this.$message({
+                type: "success",
+                showClose: true,
+                message: "删除成功!",
+              });
+              this.getPicData();
+            })
+            .catch(() => {
+              this.$message({
+                type: "info",
+                showClose: true,
+                message: "已取消删除",
+              });
+            });
+        })
+        .catch((err) => {});
+    },
     //点击分页
     handleCurrentChange(val) {
       this.page = val;
@@ -1240,6 +1284,7 @@ export default {
         width: 100%;
         height: 100%;
         background-size: 100% 100%;
+        position: relative;
         .picshow {
           width: 100%;
           height: 250px;
@@ -1254,6 +1299,11 @@ export default {
             pointer-events: none;
           }
         }
+        &:hover {
+          .deleteBox {
+            display: block;
+          }
+        }
       }
       img {
         cursor: pointer;
@@ -1286,6 +1336,27 @@ export default {
           margin-left: 4px;
         }
       }
+      .deleteBox {
+        position: absolute;
+        right: 4px;
+        top: 4px;
+        z-index: 2;
+        display: none;
+        .el-button {
+          width: auto;
+          background: rgba(0, 0, 0, 0.5);
+          border: 1px solid transparent;
+          color: #fff;
+          font-size: 16px;
+          padding: 3px;
+        }
+        &:hover {
+          .el-button {
+            background: #f56c6c;
+            //color: #f56c6c;
+          }
+        }
+      }
     }
     .noPicBox {
       display: flex;
diff --git a/vue.config.js b/vue.config.js
index a369230..c73b21a 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -29,9 +29,9 @@ module.exports = defineConfig({
     proxy: {
       "/api": {
         //表示拦截以/api开头的请求路径
-        target: "http://47.96.238.157:8093", //阿里云服务器环境
+
         //target: "http://180.166.218.222:40080", //dell服务器环境
-        //target: "http://192.168.50.42:81/", //湖南
+        target: "http://192.168.50.42:8093/", //湖南
         changOrigin: true, //是否开启跨域
         pathRewrite: {
           "^/api": "", //重写api，把api变成空字符，因为我们真正请求的路径是没有api的