guzijian / wvp-GB28181-pro · Files

<template>
  <el-col v-loading="loading && treeData.length === 0">
    <div class="head-container">
      <el-row :gutter="20">
        <el-col :span="20">
          <el-input
            v-model="filterText"
            placeholder="输入关键字进行过滤"
            clearable
            size="small"
            prefix-icon="el-icon-search"
            style="margin-bottom: 10px"
            @input="handleFilterInput"
          />
        </el-col>
      </el-row>
    </div>
    <div class="head-container">
      <vue-easy-tree
        class="filter-tree"
        :data="treeData"
        height="calc(100vh - 110px)"
        :props="defaultProps"
        :default-expanded-keys="Array.from(expandedKeys)"
        node-key="code"
        ref="tree"
        :default-expand-all="expandAll"
        highlight-current
        :filter-node-method="filterNode"
        :check-strictly="true"
        :expand-on-click-node="false"
        @node-click="nodeClick"
        @node-contextmenu="nodeContextmenu"
        @node-expand="handleNodeExpand"
        @node-collapse="handleNodeCollapse"
        style="margin-top: 10px"
      >
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <el-tooltip :disabled="data.abnormalStatus === undefined"
                      :visible="tooltipVisible && hoveredNode === data" placement="right">
            <div slot="content" style="line-height: 23px">
              <b style="font-size: medium;margin-bottom: 10px">{{ `车牌号: ${data.carPlate}` }}</b><br>
              设备状态: <span class="status green" v-if="data.abnormalStatus === 1"><span class="dot"></span> 在线</span>
              <span class="status red" v-else-if="data.abnormalStatus === 20"><span class="dot"></span> 离线</span>
              <span v-else> 未知</span><br>
            </div>
            <span v-if="data.abnormalStatus !== undefined && data.children && data.abnormalStatus === 1">
                    <i class="el-icon-location" style="color: #409EFF"></i>{{ `${data.name}（在线）` }}
                </span>
                <span v-if="data.abnormalStatus !== undefined && data.abnormalStatus === 20">
                    <i class="el-icon-location" style="color: #909399"></i>{{ `${data.name}（离线）` }}
                </span>
                <span v-if="data.abnormalStatus !== undefined && data.abnormalStatus === 10">
                    <i class="el-icon-location" style="color: #909399"></i>{{ `${data.name}（未接入）` }}
                </span>
                <span v-if="data.abnormalStatus === undefined && data.children && data.children.length > 0 ">
                    {{ `${data.name}（${data.onlineData.length}/${data.children.length}）` }}
                </span>
                <span v-if="data.abnormalStatus === undefined && data.children && data.children.length === 0 ">
                    {{ `${data.name}（0/0）` }}
                </span>
                <span v-if="data.abnormalStatus === undefined && data.children === undefined ">
                    <i class="el-icon-video-camera-solid">&nbsp;&nbsp;</i>{{ `${data.name}` }}
                </span>
                <span v-if="$parent.intercomTarget === data.id" class="intercom-tag">
                    <i class="el-icon-microphone"></i> 对讲中
                </span>
          </el-tooltip>
        </span>
      </vue-easy-tree>
    </div>
  </el-col>
</template>

<script>

import userService from "../../service/UserService";
import VueEasyTree from "@wchbrad/vue-easy-tree/index";

export default {
  name: 'DeviceList',
  components: { VueEasyTree },
  props: {
    value: { type: String, default: '' }
  },
  data() {
    return {
      loading: false,
      treeData: [], // 只有第一次加载赋值，后面全靠 Diff 更新
      filterText: this.value,
      defaultProps: { label: 'name', children: 'children' },
      expandedKeys: new Set(),
      refreshTimer: null,
      tooltipVisible: false,
      hoveredNode: null,
      expandAll: !!sessionStorage.getItem('deviceId'),
      nodeLoading: {},
      loadedNodes: new Set(), // 记录已经手动加载过子节点的设备
      filterTimer: null,
      isDestroyed: false,
      deviceList: [
        "600201",
        "600202",
        "600203",
        "600204",
        "600205",
        "601101",
        "601102",
        "601103",
        "601104",
        "CS-010",
      ],
      enableTestSim: true // 新增：控制测试SIM卡功能的开关，默认关闭
    }
  },
  methods: {
    handleFilterInput() {
      if (this.filterTimer) clearTimeout(this.filterTimer);
      this.filterTimer = setTimeout(() => {
        this.$refs.tree.filter(this.filterText);
      }, 300);
    },

    handleTestSimChange() {
      // 开关状态改变时重新获取数据
      this.getDeviceListData(true);
    },

    handleNodeExpand(data) {
      this.expandedKeys.add(data.code)
    },

    handleNodeCollapse(data) {
      this.expandedKeys.delete(data.code)
    },

    filterNode(value, data, node) {
      if (!value) return true
      // 简化搜索逻辑，提升性能
      return (data.name && data.name.toUpperCase().indexOf(value.toUpperCase()) !== -1) ||
        (node.parent && node.parent.data && this.filterNode(value, node.parent.data, node.parent));
    },

    nodeClick(data, node, fun) {
      this.$emit('node-click', data, node)
    },

    nodeContextmenu(event, data, node, fun) {
      this.$emit('node-contextmenu', event, data, node);
    },

    getDeviceListData(isManual = false) {
      // 1. 获取滚动位置 (作为保险)
      let scrollTarget = null;
      let savedScrollTop = 0;
      const treeEl = this.$refs.tree ? this.$refs.tree.$el : null;
      if (treeEl) {
        scrollTarget = treeEl.querySelector('.vue-recycle-scroller') ||
          treeEl.querySelector('.el-scrollbar__wrap') || treeEl;
        if (scrollTarget) savedScrollTop = scrollTarget.scrollTop;
      }
      this.$axios({
        method: 'get',
        url: `/api/jt1078/query/car/tree/${userService.getUser().role.authority == 0?'all':userService.getUser().role.authority}`,
      }).then(res => {
        if (this.isDestroyed) return;

        // 只有在启用测试SIM模式时才应用测试逻辑
        if (this.enableTestSim) {
          //, '39045172840',39045172800
          const fixedSims = ['40028816490'];
          const toggleSim = '';

          // 计算当前时间处于哪个10分钟区间，用于实现 toggleSim 的状态切换
          // Math.floor(Date.now() / (10 * 60 * 1000)) 得到的是从1970年开始的第几个10分钟
          // 对 2 取模，结果为 0 或 1，实现周期切换
          const isEvenInterval = Math.floor(Date.now() / 600000) % 2 === 0;
          const dynamicStatus = isEvenInterval ? 1 : 20;

          // 递归遍历树结构，修改叶子节点状态
          const overrideSpecialSimStatus = (nodes) => {
            if (!Array.isArray(nodes)) return;
            nodes.forEach(node => {
              // 判断是否为最后一级（没有 children 或 children 为空）
              // 注意：具体判断叶子节点的字段可能需要根据你实际数据结构调整，通常是 children
              if (node.children && node.children.length > 0) {
                overrideSpecialSimStatus(node.children);
              } else {
                // 确保 sim 转为字符串进行比对，防止类型不一致
                const currentSim = String(node.sim);

                // 处理固定为 1 的 SIM
                if (fixedSims.includes(currentSim)) {
                  node.abnormalStatus = 1;
                }
                // 处理每10分钟切换的 SIM
                else if (currentSim === toggleSim) {
                  node.abnormalStatus = dynamicStatus;
                }
              }
            });
          };

          // 执行修改
          if (res.data && res.data.data && res.data.data.result) {
            overrideSpecialSimStatus(res.data.data.result);
          }
        }
        // 2. 【核心修改】原地差量更新，而不是替换
        //this.processingSimList(res.data.data.result)
        this.processingTreeData(res.data.data.result, 0)
        this.statisticsOnline(res.data.data.result)

        if (this.treeData.length === 0) {
          this.treeData = res.data.data.result; // 第一次直接赋值
        } else {
          this.smartUpdateTree(this.treeData, res.data.data.result); // 后续智能更新
        }
        // 将最新的树数据发送给父组件
        this.$emit('tree-loaded', this.treeData);
        if (isManual) this.loading = false;
        this.$nextTick(() => {
          // 重新过滤
          if (this.filterText) this.$refs.tree.filter(this.filterText);
          // 恢复滚动条 (因为是原地更新，大概率不需要这步，但为了保险加上)
          if (savedScrollTop > 0 && scrollTarget) {
            scrollTarget.scrollTop = savedScrollTop;
          }
        });
      }).catch(err => {
        console.error(err);
        if (isManual) this.loading = false;
      }).finally(() => {
        if (!this.isDestroyed) {
          this.refreshTimer = setTimeout(() => this.getDeviceListData(), 60000);
        }
      });
    },
    /**
     * 添加通道
     */
    addChannels(data) {
      // 根据不同条件确定标签配置
      let nvrLabels, rmLabels;

      if (data.sim2) {
        // 有 sim2 的情况
        if (this.deviceList.includes(data.name)) {
          nvrLabels = ['中门', '', '车前', '驾驶舱', '', '前车厢', '', '360'];
        } else {
          nvrLabels = ['中门', '', '车前', '驾驶舱', '前门', '前车厢', '后车厢', '360'];
        }
        rmLabels = [];
      } else {
        // 没有 sim2 的情况
        nvrLabels = ['ADAS', 'DSM', '路况', '司机', '整车前', '中门', '倒车', '前门客流', '后面客流'];
        rmLabels = [];
      }

      // 生成子通道的通用方法
      const createChannel = (label, index, sim) => ({
        id: `${data.id}_${sim}_${index + 1}`,
        code: `${data.id}_${sim}_${index + 1}`,
        pid: data.id,
        name: label,
        disabled: data.disabled,
        parent: data
      });

      // 生成 children 数组
      const children = [
        // 处理 nvr 标签
        ...nvrLabels
          .map((label, index) => label ? createChannel(label, index, data.sim) : null)
          .filter(Boolean),
        // 处理 rm 标签
        ...rmLabels
          .map((label, index) => label ? createChannel(label, index, data.sim2) : null)
          .filter(Boolean)
      ];

      data.children = children;
    },
    /**
     * 处理返回的tree数据
     */
    processingTreeData(data, pid, parent) {
      for (let i in data) {
        data[i].pid = pid
        data[i].parent = parent;
        if (data[i].children || (Array.isArray(data[i].children) && data[i].abnormalStatus === undefined)) {
          this.processingTreeData(data[i].children, data[i].id, data[i]);
        } else {
          data[i].name = data[i].code
          if (data[i].abnormalStatus !== 1) {
            data[i].disabled = true;
          }
          this.addChannels(data[i])
        }
      }
    },
    /**
     * 处理巡查列表数据
     */
    disableItemsByName(arr, targetName) {
      arr.forEach(item => {
        // 检查当前项是否是对象并且包含 name 属性且值为 targetName
        if (item && typeof item === 'object' && item.name === targetName) {
          item.disabled = true;
        }
        // 如果当前项有 children 属性且是数组，则递归调用自身
        if (item && Array.isArray(item.children)) {
          this.disableItemsByName(item.children, targetName);
        }
      });
    },
    /**
     * 原始sim列表数据 （用来验证视屏巡查车辆是否在线）
     * @param data 查询后台树列表
     */
    processingSimList(data) {
      if (data && data.length > 0) {
        for (let i in data) {
          if (data[i].children === undefined && data[i].abnormalStatus) {
            this.simList.push(data[i]);
          } else if (data[i].children && data[i].children.length > 0) {
            this.processingSimList(data[i].children);
          }
        }
      }
    },
    /**
     * 统计树节点下一级有多少在线数量
     */
    statisticsOnline(data) {
      for (let i in data) {
       if (data[i].abnormalStatus === undefined && data[i].children && data[i].children.length > 0) {
          data[i].onlineData = data[i].children.filter(item => item.abnormalStatus === 1);
        }
      }
    },
    /**
     * 核心算法：智能原地更新树数据
     * 作用：保持节点对象引用不变，只修改属性，从而保留展开状态和滚动位置
     */
    smartUpdateTree(currentList, newList) {
      // 建立新数据的 Map 索引，加速查找 O(N)
      const newMap = new Map();
      newList.forEach(item => newMap.set(item.code, item));

      // 1. 遍历旧列表 (倒序遍历以便安全删除)
      for (let i = currentList.length - 1; i >= 0; i--) {
        const currentNode = currentList[i];
        const newNode = newMap.get(currentNode.code);

        if (newNode) {
          // A. 找到匹配：更新属性 (Vue 会检测到属性变化并更新视图，但不会销毁组件)
          currentNode.name = newNode.name;
          currentNode.status = newNode.status;
          currentNode.gpsStatus = newNode.gpsStatus;
          // 如果有其他需要更新的字段在这里添加...

          // B. 处理子节点
          // 关键逻辑：如果该节点是我们手动加载过子节点的(Type 4)，
          // 且服务器返回的新数据里没有子节点（或者子节点很少），我们选择保留本地的。
          const isLocallyLoaded = this.loadedNodes.has(currentNode.code);

          if (isLocallyLoaded) {
            // 如果是手动加载的节点，通常忽略服务器的 children 更新，除非你想做深度同步
            // 这里保持你原有的逻辑：如果服务器没返回 children，就保留本地的
            if (newNode.children && newNode.children.length > 0) {
              // 仅当服务器真有数据时才尝试更新子级
              this.smartUpdateTree(currentNode.children, newNode.children);
            }
          } else {
            // 普通节点：递归更新子节点
            if (newNode.children && newNode.children.length > 0) {
              if (!currentNode.children) this.$set(currentNode, 'children', []);
              this.smartUpdateTree(currentNode.children, newNode.children);
            } else {
              // 服务器说没子节点了，我们也没手动加载过，那就清空
              if (currentNode.children && currentNode.children.length > 0) {
                currentNode.children = [];
              }
            }
          }

          // 处理完后从 Map 移除
          newMap.delete(currentNode.code);
        } else {
          // C. 没找到：说明该设备被删除了
          currentList.splice(i, 1);
        }
      }

      // 2. 处理新增节点 (Map 中剩下的就是新增的)
      newMap.forEach(newNode => {
        currentList.push(newNode);
      });
    }
  },
  created() {
    this.getDeviceListData(true);
  },
  mounted() {
    // 无需再进行 DOM 操作
  },
  beforeDestroy() {
    this.isDestroyed = true;
    if (this.refreshTimer) clearTimeout(this.refreshTimer);
    if (this.filterTimer) clearTimeout(this.filterTimer);
  }
}
</script>

<style scoped>
/* 样式保持不变，用于隐藏默认图标 */
.filter-tree ::v-deep .el-tree-node__content > .el-tree-node__expand-icon {
  display: none !important;
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  width: 100%;
  overflow: hidden;
}

.custom-expand-icon {
  color: #c0c4cc;
  font-size: 12px;
  margin-right: 5px;
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  cursor: pointer;
  transition: transform 0.3s ease-in-out;
  flex-shrink: 0;
}

.status { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.green .dot { background-color: #28a745; }
.red .dot { background-color: #dc3545; }
.node-content { display: flex; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.intercom-tag {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  color: #F56C6C; /* 红色醒目 */
  font-weight: bold;
  font-size: 12px;
  border: 1px solid #F56C6C;
  padding: 0 4px;
  border-radius: 4px;
  background-color: #fff;
  animation: flashBorder 1.5s infinite;
}

.intercom-tag i {
  margin-right: 2px;
}

@keyframes flashBorder {
  0% { box-shadow: 0 0 0 0 rgba(245, 108, 108, 0.7); transform: scale(1); }
  70% { box-shadow: 0 0 0 4px rgba(245, 108, 108, 0); transform: scale(1.05); }
  100% { box-shadow: 0 0 0 0 rgba(245, 108, 108, 0); transform: scale(1); }
}
</style>