xy-frontend/src/views/devicePhotoSchedule/components/bdSchedule.vue

<template>
  <el-dialog
    class="photoSetDialog"
    title="设置"
    :visible.sync="isShow"
    :close-on-click-modal="false"
    width="1020px"
  >
    <div class="setTimeTd" v-loading="rulesLoading">
      <div class="ruleinfo">
        <!-- <h3>时间表规则</h3> -->
        <div class="ruleBox">
          <span class="nameinfo">时间表名称：{{ currentTimeRule.name }}</span>
          <div class="listGz">
            <p
              class="timeGz"
              v-for="(val, index) in currentTimeRule.listTime"
              :key="index"
            >
              <span>{{ val.startTime }} </span>

              ~
              <span>{{ val.endTime }}</span>
              间隔：<b>{{ val.timeSpan }}分钟</b>
            </p>
          </div>
          <div class="offsetBox">
            <div class="math">
              设置偏移量(max:10)：
              <el-input-number
                v-model="setNum"
                :min="0"
                :max="9"
              ></el-input-number>
            </div>
            <el-button type="primary" @click="setMathFloor()">设置</el-button>
          </div>
        </div>
        <div class="channelBox">
          <span>请选择通道：</span>
          <div class="checkBox">
            <el-radio-group v-model="channelAisle" @change="handleChange">
              <el-radio
                :label="val.id"
                border
                v-for="val in channelList"
                :key="val.id"
                >{{ val.name }}</el-radio
              >
            </el-radio-group>
          </div>
        </div>
      </div>
      <!-- 装置树状图 -->
      <div class="treeDevice" v-loading="treeloading">
        <el-tree
          ref="tree"
          :data="treeList"
          :props="defaultProps"
          show-checkbox
          node-key="id"
          default-expand-all
          :expand-on-click-node="false"
          :default-checked-keys="defaultCheckedKeys"
          @check-change="handleCheckChange"
        >
          <div
            class="custom-tree-node"
            slot-scope="{ node, data }"
            v-if="!data.list"
          >
            <span class="zzCmdidbox">{{
              data.name == null ? data.cmdid : data.name
            }}</span>
            <!-- -- <span>{{ data.id }}</span
            >-- <span>{{ data.onlinestatus == 0 ? "离线" : "在线" }}</span
            >--
            <span>{{ data.protocol }}</span> -->
            <div class="math">
              偏移时间(分)：
              <el-input-number
                v-model="data.setNum"
                :min="0"
                :max="setNum"
              ></el-input-number>
            </div>
            <div class="xfBack">
              <el-tag v-if="data.xfloading"
                ><i class="el-icon-loading"></i>下发中</el-tag
              >
              <el-tag v-if="data.xferror" type="danger"
                ><i class="el-icon-error"></i>下发失败</el-tag
              >
              <el-tag v-if="data.xfsuccess" type="success"
                ><i class="el-icon-success"></i>下发成功</el-tag
              >
              <!-- <el-button size="mini" v-if="data.xferror" @click="reissue(data)"
                >重新下发</el-button
              > -->
            </div>
          </div>
          <div v-else class="custom-tree-node" slot-scope="{ data }">
            <span>{{ data.name == null ? data.cmdid : data.name }}</span>
          </div>
        </el-tree>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleclose">取 消</el-button>
      <el-button type="primary" @click="submitForm()" :loading="sureloading"
        >确 定</el-button
      >
    </div>
  </el-dialog>
</template>
<script>
import {
  setScheduleRulel,
  getScheduleRulelAccessList,
  getTermListByChannelJoggle,
  getCmaSchelduleUpload,
  setTermCamera,
  getTermCameraRequest,
} from "@/utils/api/index";

export default {
  data() {
    return {
      isShow: false,
      currentTimeRule: [], //时间表规则
      sureloading: false,
      setNum: 0,
      channelList: [], //通道列表
      channelAisle: 1, //选中的通道
      rulesLoading: false,
      treeloading: false, //树状结构loading
      treeList: [], //获取treelist
      defaultProps: {
        children: "list",
        label: "name",
        disabled: this.disabledFn,
      },
      defaultCheckedKeys: [],
      checkedNodes: [],
      requestid: "", //获取requestid
      deviceTimeLoading: false,
      deviceTimer: null, //装置循环获取
      deviceNum: 1, //循环次数
    };
  },
  mounted() {},
  methods: {
    getdataform(val) {
      console.log(val);
      this.currentTimeRule = val;
      this.rulesLoading = true;
      this.getChannelList();
    },
    //设置偏移量
    setMathFloor() {
      console.log(this.setNum);
      this.handleChange();
    },
    //获取通道
    getChannelList() {
      getScheduleRulelAccessList({})
        .then((res) => {
          console.log(res);
          this.rulesLoading = false;
          this.channelList = res.data.channellist;
          this.handleChange();
        })
        .catch((err) => {});
    },
    //改变通道获取树状结构
    handleChange() {
      console.log(this.channelAisle);
      console.log("点击了通道");
      this.getTreeList();
    },
    //获取树状图
    getTreeList() {
      this.treeloading = true;
      getTermListByChannelJoggle({
        id: this.channelAisle,
      })
        .then((res) => {
          console.log(res);
          this.treeList = this.getChildren(res.data.list);
          this.treeloading = false;
        })
        .catch((err) => {});
    },
    //获取treelist
    getChildren(data) {
      console.log(data);
      return data.map((item) => {
        //console.log(item);
        item = Object.assign({}, item);
        item.setNum = Math.floor(Math.random() * 10);
        item.xfsuccess = false;
        item.xferror = false;
        item.xfloading = false;
        if (!!item.list && item.list.length > 0) {
          item.list = this.getChildren(item.list);
        }
        return item;
      });
    },
    //不在线的装置不能选中
    disabledFn(data, node) {
      if (node.level == 3) {
        if (!data.onlinestatus) {
          // 根据自己的节点数据条件设置判断，我只提供了个参考
          return true;
        } else {
          return false;
        }
      }
    },
    handleCheckChange(data, checked) {
      if (checked) {
        this.checkedNodes.push(data);
      } else {
        const index = this.checkedNodes.findIndex(
          (node) => node.id === data.id
        );
        if (index !== -1) {
          this.checkedNodes.splice(index, 1);
        }
      }
    },

    submitForm() {
      if (this.checkedNodes.length === 0) {
        this.$message.warn("请至少选择一个选项");
        return;
      }
      this.sureloading = true;
      console.log(this.checkedNodes);

      const requests = this.checkedNodes.map((node) => {
        console.log(node);
        node.xfloading = true; //下发按钮出现
        node.xferror = false; //下发失败按钮隐藏
        node.xfsuccess = false; //下发成功按钮隐藏
        let params = [
          {
            name: "act",
            value: "schedule",
          },
          {
            name: "flag",
            value: 1,
          },
          {
            name: "channel",
            value: this.channelAisle,
          },
        ];
        // 根据 node 发送 Axios 请求并返回一个 Promise 对象
        let scheduleTimeList = this.currentTimeRule.listTime;
        console.log(this.currentTimeRule.listTime);
        let timeArr = []; //获取时间列表
        //获取当前时间规则，转化成时间点
        for (let i = 0; i < scheduleTimeList.length; i++) {
          console.log(scheduleTimeList[i]);
          var Stime = this.$moment(scheduleTimeList[i].startTime, "HH:mm")
            .add(node.setNum, "minute")
            .format("YYYY-MM-DD HH:mm:ss");

          var Etime = this.$moment(scheduleTimeList[i].endTime, "HH:mm")
            .add(node.setNum, "minute")
            .format("YYYY-MM-DD HH:mm:ss");
          var spanTime = scheduleTimeList[i].timeSpan;
          console.log(Stime, Etime, spanTime);
          if (node.protocol == "65283" || node.protocol == "65285") {
            //湖南 河南
            console.log("湖南,河南", scheduleTimeList.length);

            // 设置时间间隔
            let fistSpan = this.$moment(new Date())
              .startOf("day")
              .minutes(spanTime)
              .format("YYYY-MM-DD HH:mm:ss");
            timeArr.push(fistSpan, Stime, Etime);
            console.log(timeArr);
          } else {
            //其他规约

            while (
              this.$moment(Stime).isBefore(this.$moment(Etime)) ||
              this.$moment(Stime).isSame(this.$moment(Etime))
            ) {
              timeArr.push(Stime);
              Stime = this.$moment(Stime)
                .add(spanTime, "minute")
                .format("YYYY-MM-DD HH:mm:ss");
            }
          }
        }
        console.log(timeArr);
        let group = timeArr.length;
        params.push({
          name: "group",
          value: group,
        });
        for (let m = 0; m < timeArr.length; m++) {
          params.push(
            {
              name: "hour" + (m + 1),
              value: this.$moment(timeArr[m]).hour(),
            },
            {
              name: "min" + (m + 1),
              value: this.$moment(timeArr[m]).minute(),
            },
            {
              name: "preset" + (m + 1),
              value: 255,
            }
          );
        }
        console.log(params);
        return this.setTermFnRule(node, params);
      });
      // 使用 Promise.all 等待所有请求完成
      Promise.all(requests)
        .then(() => {
          console.log(requests);
          // 所有请求都成功完成后的处理逻辑

          console.log("所有请求都已完成。");
        })
        .catch((error) => {
          // 如果有任何一个请求失败的处理逻辑
          console.error("有一个或多个请求失败。", error);
        });
    },
    //下发时间表
    setTermFnRule(node, dataParams) {
      setTermCamera({
        termId: node.id,
        list: dataParams,
      })
        .then((res) => {
          console.log(res);
          this.requestid = res.data.requestId;
          this.getinfoRules(node);
        })
        .catch((err) => {});
    },
    getinfoRules(node) {
      console.log(this.deviceNum);
      getTermCameraRequest({ requestid: this.requestid })
        .then((res) => {
          if (res.data.success == 1) {
            console.log(JSON.parse(res.data.data));
            node.xfloading = false;
            node.xfsuccess = true;
            this.deviceNum = 0;
            this.sureloading = false;
            // this.$message({
            //   duration: 1500,
            //   showClose: true,
            //   message: "时间表下发成功",
            //   type: "success",
            // });
          } else if (res.data.success == 0 && this.deviceNum > 9) {
            node.xfloading = false;
            node.xfsuccess = false;
            node.xferror = true;
            this.sureloading = false;
            this.deviceNum = 0;
          } else {
            // 继续轮询查询接口
            setTimeout(() => {
              this.deviceNum++;
              this.getinfoRules(node);
            }, 2000); // 1秒后继续查询
          }
        })
        .catch((err) => {});
    },
    display() {
      this.isShow = true;
    },
    clearfn() {},
    handleclose() {
      this.isShow = false;
      this.setNum = 0;
      this.treeList = []; //获取treelist
    },
  },
};
</script>
<style lang="less">
.photoSetDialog {
  .setTimeTd {
    .ruleinfo {
      margin-bottom: 16px;
      h3 {
        font-size: 14px;
        margin-bottom: 8px;
      }
      .ruleBox {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        line-height: 32px;
        margin-bottom: 16px;
        .nameinfo {
          //margin-bottom: 8px;
          margin-right: 16px;
          height: 24px;
          line-height: 24px;
        }
        .timeGz {
          height: 24px;
          line-height: 24px;
          b {
            font-weight: 400;
            color: #169e8c;
          }
        }
      }
      .offsetBox {
        margin-left: 24px;
        display: flex;
        align-items: center;
        .math {
          margin-right: 12px;
        }
      }
    }
    .channelBox {
      margin-bottom: 16px;
      line-height: 32px;
      display: flex;
      height: 32px;
      .checkBox {
        .el-radio {
          margin-right: 12px;
        }
      }
    }
    .treeDevice {
      //background-color: #169e8c;
      height: 366px;
      // overflow: auto;
      display: flex;
      align-items: flex-start;
      border: 1px solid #eee;
      padding: 8px;
      border-radius: 4px;
      position: relative;
      .el-tree {
        width: 100%;
        height: 100%;
        overflow: auto;
        .el-tree-node {
          .el-tree-node__content {
            height: 32px;
            border-bottom: 1px solid #eee;
          }
        }
        .custom-tree-node {
          display: flex;
          align-items: center;
        }
        .math {
          margin-left: 24px;
        }
        .xfBack {
          margin-left: 24px;
        }
      }
    }
  }
}
</style>