通过轮询动态修改tree节点的是否可选状态以及在线数量和总数量

本方法目前只能说能达到效果,部分步骤没有实现优化和提高通用性,后期会修改

这是tree在templete里的静态代码

<el-tree
  ref="vehicleTree"
  :data="vehicleTreeData"
  show-checkbox
  :props="defaultProps"
  :filter-node-method="filterNode"
  @check="getVehicle"
 />

这是data里的树的默认props,动态修改展示的label和可选状态disable,这里会修改每个节点的label和disable属性,是本文的核心代码

defaultProps: {
    children: "children",
    label: (data, node) => {
      if (data.groupfatherid == "root") {
        return `总机构(${this.onlineVechicleVnameList.length}/${
          this.devicesList.length
        })`;
      }
      if (data.groupname && data.groupid == 18) {
        return `车队1(${this.onlineNumber1}/${this.AllVehiclenum1})`;
      }
      if (data.groupname && data.groupid == 19) {
        return `车队2(${this.onlineNumber2}/${this.AllVehiclenum2})`;
      }
      if (data.groupname && data.groupid == 20) {
        return `车队3(${this.onlineNumber3}/${this.AllVehiclenum3})`;
      }
    
      return data.vname;
    },
    disabled: (data, node) => {
      // console.log(this.onlineVechicleVnameList, 1231231231231);
      // console.log(data.vname);
      // console.log(data.vname.slice(0, -2));
      // console.log(this.onlineVechicleVnameList.includes(data.vname));
      if (data.groupname) {
        return false;
      }
      if (
        this.onlineVechicleVnameList.includes(data.vname) ||
        this.onlineVechicleVnameList.includes(data.vname.slice(0, -2))
      ) {
        return false;
      }
      return true;
    }
 }

这是轮询的方法

async pollGetVehicleOnlineData() {
  const groupsRes = await getGroups(this.key);
  const devicesRes = await getDevices(this.key);
  const groupsList = groupsRes.data.data; // 获取机构数据
  const devices = devicesRes.data.data; // 获取车辆数据

  this.alarmVehicleData = devices; // 将车辆数据绑定给预警车辆数据数组
  this.devicesList = []; // 将车辆数据数组置空
  // console.log("devicesList000", this.devicesList);
  devices.map(el => {
    const arr = [];
    for (let i = 1; i <= el.channelcount; i++) {
      const obj = { ...el };
      obj.channelcount = i;
      obj.vname = el.carlicence + "-" + i; // 添加子通道名称
      arr.push(obj);
    }
    const obj = {
      vname: el.carlicence,
      groupid: el.groupid,
      children: arr
    };
    this.devicesList.push(obj); // 更新为带子通道的车辆数据列表
  });
  // console.log("devicesList111", this.devicesList);

  const teridStr = this.devicesList.map(el => el.children[0].terid); // 从这里开始判断车辆是否在线
  const obj1 = {
    key: this.key,
    terid: teridStr
  };

  const res1 = await getIsOnline(obj1);
  // console.log(res1.data.data, "res1");
  const onlineVehicleTerid = res1.data.data.map(el => el.terid);
  // console.log(onlineVehicleTerid);
  this.onlineVechicleTeridList = onlineVehicleTerid;
  this.onlineVechicleVnameList = this.devicesList
    .filter(el =>
      this.onlineVechicleTeridList.includes(el.children[0].terid)
    )
    .map(el => el.vname); // 获取在线的车辆的车牌号数组
  console.log(this.devicesList);
  let onlineNumber1 = this.devicesList //车队1在线数
    .filter(
      el =>
        this.onlineVechicleTeridList.includes(el.children[0].terid) &&
        el.groupid == 18
    )
    .map(el => el.vname).length;
  const AllVehiclenum1 = this.devicesList.reduce((pre, cur) => {
    //车队1车辆总数
    if (cur.groupid == 18) {
      pre++;
    }
    return pre;
  }, 0);
  let onlineNumber2 = this.devicesList //车队2在线数
    .filter(
      el =>
        this.onlineVechicleTeridList.includes(el.children[0].terid) &&
        el.groupid == 19
    )
    .map(el => el.vname).length;
  const AllVehiclenum2 = this.devicesList.reduce((pre, cur) => {
    //车队2车辆总数
    if (cur.groupid == 19) {
      pre++;
    }
    return pre;
  }, 0);
  let onlineNumber3 = this.devicesList //车队3在线数
    .filter(
      el =>
        this.onlineVechicleTeridList.includes(el.children[0].terid) &&
        el.groupid == 20
    )
    .map(el => el.vname).length;
  const AllVehiclenum3 = this.devicesList.reduce((pre, cur) => {
    //车队3车辆总数
    if (cur.groupid == 20) {
      pre++;
    }
    return pre;
  }, 0);
  this.onlineNumber1 = onlineNumber1;
  this.AllVehiclenum1 = AllVehiclenum1;
  this.onlineNumber2 = onlineNumber2;
  this.AllVehiclenum2 = AllVehiclenum2;
  this.onlineNumber3 = onlineNumber3;
  this.AllVehiclenum3 = AllVehiclenum3;
}

新手,欢迎大家指正!!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值