添加收藏夹功能

src/fubingCommon/leftTree.vue

@@ -126,8 +126,8 @@ export default {
               : this.defaultExpandedKeys; //获取保存的defaultKey ;
 
           console.log(this.defaultExpandedKeys);
-          if (this.lineTreeData[0].list[0].list.length > 0) {
-          }
+          // if (this.lineTreeData[0].list[0].list.length > 0) {
+          // }
           if (
             this.currentData !== null &&
             Object.keys(this.currentData).length !== 0

src/utils/api/index.js

@@ -687,3 +687,11 @@ export function deletePicList(data) {
     data,
   });
 }
+
+export function addFavorList(data) {
+  return request({
+    url: "/api/addFavorList",
+    method: "post",
+    data,
+  });
+}

src/views/realTimeMonitor/components/parameterArea.vue

@@ -4,17 +4,12 @@
       <span @dblclick="handleDblClick(areaData.cmdid)">{{
         areaData.cmdid
       }}</span>
-      <!-- <el-tooltip
-        class="item"
-        effect="dark"
-        :content="!collect ? '取消收藏' : '添加收藏'"
-        placement="top"
+      <el-button
+        type="text"
+        :icon="areaData.isfavor == 1 ? 'el-icon-star-on' : 'el-icon-star-off'"
+        @click="addCollectClick"
+        >{{ areaData.isfavor == 1 ? "取消收藏" : "添加收藏" }}</el-button
       >
-        <i
-          :class="collect ? 'el-icon-star-off' : 'el-icon-star-on'"
-          @click="collectCourses"
-        ></i>
-      </el-tooltip> -->
     </div>
     <div class="paramsDate">
       <h3>日历快速查询</h3>
@@ -138,6 +133,7 @@
   </div>
 </template>
 <script>
+import EventBus from "@/utils/event-bus";
 import takePicButton from "./takePicButton.vue";
 import takeVideoButton from "./takeVideoButton.vue";
 import deviceInfoButton from "./deviceInfoButton.vue";
@@ -150,6 +146,7 @@ import {
   getChannelByTermidJoggle,
   updateTermCamera,
   getTermStatus,
+  addFavorList,
 } from "@/utils/api/index";
 export default {
   components: {
@@ -178,7 +175,7 @@ export default {
       selectDyId: "", //获取当前选中的电压线路等信息
       selectLineId: "",
       selectTowerId: "",
-      collect: false, //收藏
+      collectFlag: false, //收藏
     };
   },
 
@@ -222,8 +219,38 @@ export default {
       console.log(this.dateValue);
     },
     //点击收藏和取消收藏
-    collectCourses() {
-      this.collect = !this.collect;
+    addCollectClick() {
+      if (this.areaData.isfavor !== 1) {
+        this.$confirm("此操作将添加至收藏夹, 是否继续?", "提示", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning",
+        }).then(() => {
+          this.areaData.isfavor = 1;
+          addFavorList({ list: [this.areaData.id], type: 1 }).then((res) => {
+            EventBus.$emit("treelist");
+          });
+          this.$message({
+            type: "success",
+            message: "添加成功!",
+          });
+        });
+      } else {
+        this.$confirm("此操作将取消收藏, 是否继续?", "提示", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning",
+        }).then(() => {
+          this.areaData.isfavor = 0;
+          addFavorList({ list: [this.areaData.id], type: 0 }).then((res) => {
+            EventBus.$emit("treelist");
+          });
+          this.$message({
+            type: "success",
+            message: "取消收藏!",
+          });
+        });
+      }
     },
     //focus时间重新赋值
     handleDateFocus() {
@@ -365,17 +392,11 @@ export default {
     font-size: 14px;
     font-weight: normal;
     display: flex;
-    align-items: center;
-    i {
-      margin-left: 16px;
-      cursor: pointer;
-    }
-    .el-icon-star-off {
-      font-size: 18px;
-      color: #f08200;
+    justify-content: space-between;
+    span {
+      font-size: 12px;
     }
-    .el-icon-star-on {
-      font-size: 20px;
+    .el-button--text {
       color: #f08200;
     }
   }

src/views/realTimeMonitor/components/siderBar.vue

@@ -46,42 +46,85 @@
       @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">
+        <!-- v-if="node.name === '收藏夹'" -->
+        <span>
+          <span>
+            <span
+              v-if="node.label === '收藏夹'"
+              class="el-icon-collection"
+              style="margin-right: 6px"
+            ></span>
+            <span
+              v-if="node.level === 1 && node.label !== '收藏夹'"
+              class="iconfont icon-dianli"
+              style="margin-right: 6px"
+            ></span>
+            <span
+              v-if="node.level === 2 && data.bsManufacturer"
+              class="iconfont icon-dianlihangye"
+              style="margin-right: 6px"
+            >
+            </span>
+            <span
+              v-if="
+                node.label !== '收藏夹' && !data.bsManufacturer && !data.dyValue
+              "
+            >
+              <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>
+            <span>{{ node.label }} </span>
           </span>
-          <span
-            >{{ node.label }}
-            <span class="num">({{ data.list.length }}) </span></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 v-else>
+          <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 class="num">({{ data.list.length }}) </span></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> -->
       </span>
     </el-tree>
   </div>
 </template>
 <script>
+import EventBus from "@/utils/event-bus";
 import { getdyTreeListJoggle, getzzdyTreeList } from "@/utils/api/index";
 export default {
   data() {
@@ -102,6 +145,7 @@ export default {
       currentNodekey: "", //默认选中的节点树,
       role: "",
       treeStatustimer: null,
+      isfavorList: [],
     };
   },
   components: {},
@@ -127,6 +171,7 @@ export default {
     this.getRadio(); //获取列表在线离线全部
     this.getLineTreeList(); //获取树状图
     this.treeStatustimer = setInterval(this.getLineTreeStatus, 60000); // 每10秒刷新数据
+    EventBus.$on("treelist", this.getLineTreeStatus);
   },
   methods: {
     //获取当前选中的radio
@@ -147,6 +192,13 @@ export default {
           .then((res) => {
             console.log(res);
             this.lineTreeData = res.data.list;
+            this.isfavorList = res.data.favorlist;
+            this.lineTreeData.unshift({
+              id: 0,
+              name: "收藏夹",
+              bsManufacturer: "收藏夹",
+              list: this.isfavorList,
+            });
             this.onlineNum = res.data.onlineNum;
             this.totalNum = res.data.totalNum;
             this.currentData = JSON.parse(localStorage.getItem("currentData"));
@@ -179,97 +231,67 @@ export default {
     //获取树状图列表
     getLineTreeList() {
       console.log(this.zzradio);
-      if (this.role == 4) {
-        getzzdyTreeList({ type: this.zzradio })
-          .then((res) => {
-            this.lineTreeData = res.data.list;
-            this.onlineNum = res.data.onlineNum;
-            this.totalNum = res.data.totalNum;
-            this.currentData = JSON.parse(localStorage.getItem("currentData"));
-            this.lineTreeData.forEach((node) => {
-              if (node.list) {
-                node.list.forEach((child) => {
-                  this.defaultExpandedKeys.push(child.id);
-                });
-              } else {
-                this.defaultExpandedKeys.push(node.id);
-              }
-            });
-            this.defaultExpandedKeys =
-              JSON.parse(localStorage.getItem("defaultKey")) !== null
-                ? JSON.parse(localStorage.getItem("defaultKey"))
-                : this.defaultExpandedKeys; //获取保存的defaultKey ;
-
-            console.log(this.defaultExpandedKeys);
-            if (this.lineTreeData[0].list[0].list.length > 0) {
-            }
-            if (
-              this.currentData !== null &&
-              Object.keys(this.currentData).length !== 0
-            ) {
-              this.currentNodekey = this.currentData.id;
-              this.handleNodeClick(this.currentData);
+      getdyTreeListJoggle({ type: this.zzradio })
+        .then((res) => {
+          this.lineTreeData = res.data.list;
+          this.isfavorList = res.data.favorlist;
+          this.lineTreeData.unshift({
+            id: 0,
+            name: "收藏夹",
+            bsManufacturer: "收藏夹",
+            list: this.isfavorList,
+          });
+          this.onlineNum = res.data.onlineNum;
+          this.totalNum = res.data.totalNum;
+          this.currentData = JSON.parse(localStorage.getItem("currentData"));
+          this.lineTreeData.forEach((node) => {
+            if (node.list) {
+              node.list.forEach((child) => {
+                this.defaultExpandedKeys.push(child.id);
+              });
             } else {
-              this.currentData = this.lineTreeData[0]; //第一个选中的数据
-              this.currentNodekey = this.lineTreeData[0].id; //第一个数据
-              this.handleNodeClick(this.currentData);
+              this.defaultExpandedKeys.push(node.id);
             }
-            this.$nextTick(() => {
-              this.$refs.tree.setCurrentKey(this.currentNodekey); //一定要加这个选中了否则样式没有出来
-              this.scrollView();
-            });
-          })
-          .catch((err) => {
-            console.log(err); //代码错误、请求失败捕获
           });
-      } else {
-        getdyTreeListJoggle({ type: this.zzradio })
-          .then((res) => {
-            this.lineTreeData = res.data.list;
-            this.onlineNum = res.data.onlineNum;
-            this.totalNum = res.data.totalNum;
-            this.currentData = JSON.parse(localStorage.getItem("currentData"));
-            this.lineTreeData.forEach((node) => {
-              if (node.list) {
-                node.list.forEach((child) => {
-                  this.defaultExpandedKeys.push(child.id);
-                });
-              } else {
-                this.defaultExpandedKeys.push(node.id);
-              }
-            });
-            this.defaultExpandedKeys =
-              JSON.parse(localStorage.getItem("defaultKey")) !== null
-                ? JSON.parse(localStorage.getItem("defaultKey"))
-                : this.defaultExpandedKeys; //获取保存的defaultKey ;
+          this.defaultExpandedKeys =
+            JSON.parse(localStorage.getItem("defaultKey")) !== null
+              ? JSON.parse(localStorage.getItem("defaultKey"))
+              : this.defaultExpandedKeys; //获取保存的defaultKey ;
 
-            console.log(this.defaultExpandedKeys);
-            if (this.lineTreeData[0].list[0].list.length > 0) {
-            }
-            if (
-              this.currentData !== null &&
-              Object.keys(this.currentData).length !== 0
-            ) {
-              this.currentNodekey = this.currentData.id;
-              this.handleNodeClick(this.currentData);
-            } else {
-              this.currentData = this.lineTreeData[0]; //第一个选中的数据
-              this.currentNodekey = this.lineTreeData[0].id; //第一个数据
-              this.handleNodeClick(this.currentData);
-            }
-            this.$nextTick(() => {
-              this.$refs.tree.setCurrentKey(this.currentNodekey); //一定要加这个选中了否则样式没有出来
-              this.scrollView();
-            });
-          })
-          .catch((err) => {
-            console.log(err); //代码错误、请求失败捕获
+          console.log(this.defaultExpandedKeys);
+          // if (this.lineTreeData[0].list[0].list.length > 0) {
+          // }
+          if (
+            this.currentData !== null &&
+            Object.keys(this.currentData).length !== 0
+          ) {
+            this.currentNodekey = this.currentData.id;
+            this.handleNodeClick(this.currentData);
+          } else {
+            this.currentData = this.lineTreeData[0]; //第一个选中的数据
+            this.currentNodekey = this.lineTreeData[0].id; //第一个数据
+            this.handleNodeClick(this.currentData);
+          }
+          this.$nextTick(() => {
+            this.$refs.tree.setCurrentKey(this.currentNodekey); //一定要加这个选中了否则样式没有出来
+            this.scrollView();
           });
-      }
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
     },
 
     //点击当前选中的treenode
     handleNodeClick(data) {
+      if (data.name == "收藏夹") {
+        return;
+      }
+      if (data.isfavor == 0 || data.isfavor == null) {
+        this.collectFlag = false;
+      } else {
+        this.collectFlag = true;
+      }
       this.currentData = data;
       // this.scrollView();
       this.$store.commit("currentData", this.currentData); //将currentData保存在vuex中