ops-fronted-java/src/views/report/index.vue

<template>
  <div class="reportBox">
    <div class="commandBox">
      <div class="commandRunLeft commandClass">
        <div class="headTitle">
          <span class="title">待下发终端</span>
          <el-select
            v-model="operateL"
            placeholder="筛选运操维作"
            @change="selectLeftChanged"
          >
            <el-option
              v-for="item in operateOptions"
              :key="item.key"
              :label="item.desc"
              :value="item.key"
            ></el-option>
          </el-select>
          <el-input
            class="cmdidClass"
            v-model="leftcmdVal"
            placeholder="请输入设备ID查询"
            @blur="leftInputChange"
          ></el-input>
          <span class="mlspan">命令:{{ leftCommand.length }}</span>
          <span class="time"
            >更新时间：{{
              $moment(updateTime).format("YYYY-MM-DD HH:mm:ss")
            }}</span
          >
          <el-button
            v-if="leftCommand.length > 0"
            class="deletebtn"
            type="danger"
            icon="el-icon-delete"
            @click="deleteml"
          ></el-button>
        </div>
        <div class="mlbpox" v-loading="leftComLoading">
          <div class="commandList" v-if="leftCommand.length != 0">
            <p
              class="comLi"
              v-for="(item, index) in leftCommand"
              :key="index"
              @dblclick="handleShowCommand(item)"
            >
              <span class="indexClass">{{ index + 1 }}</span>
              <span class="comMsg"
                ><b>时间：{{ item.createTime }}</b>
                <b v-if="item.terminal && item.terminal.cmdid"
                  >设备ID：{{ item.terminal.cmdid }}</b
                >
                <b v-if="item.cmdMap && item.cmdMap.fileName"
                  >apk版本：{{ item.cmdMap.fileName }}</b
                >
                <b>命令：{{ cmdCn[item.name] }}</b>

                <b v-if="item.estimatedPublishTime * 1000 - newupdatatime > 0"
                  >命令预计拿走时间：

                  {{
                    $moment(item.estimatedPublishTime * 1000).format(
                      "MM-DD HH:mm:ss"
                    )
                  }}
                  {{ remainingTime(item) }}
                </b>
              </span>
            </p>
          </div>
          <div class="commandList" v-else>
            <p>暂无下发命令</p>
          </div>
        </div>
      </div>
      <div class="commandRunRight commandClass">
        <div class="headTitle">
          <span class="title">已下发终端</span>
          <el-select
            v-model="operateR"
            placeholder="筛选运操维作"
            @change="selectRightChanged"
          >
            <el-option
              v-for="item in operateOptions"
              :key="item.key"
              :label="item.desc"
              :value="item.key"
            ></el-option>
          </el-select>
          <el-input
            class="cmdidClass"
            v-model="rightcmdVal"
            placeholder="请输入设备ID查询"
            @blur="rightInputChange"
          ></el-input>
          <span class="mlspan">命令:{{ rightCommand.length }}</span>
          <span class="time"
            >更新时间：{{
              $moment(updateTime).format("YYYY-MM-DD HH:mm:ss")
            }}</span
          >
          <el-button
            v-if="rightCommand.length > 0"
            class="deletebtn"
            type="danger"
            icon="el-icon-delete"
            @click="deletehis"
          ></el-button>
        </div>
        <div class="mlbpox" v-loading="rightComLoading">
          <div class="commandList" v-if="rightCommand.length != 0">
            <p class="comLi" v-for="(item, index) in rightCommand" :key="index">
              <el-tooltip
                class="item"
                effect="dark"
                :open-delay="600"
                :content="item.status == '1' ? '已下发' : '已取消'"
                placement="top"
              >
                <span
                  class="indexClass"
                  :class="item.status == '1' ? 'normalClass' : 'cancelClass'"
                  >{{ index + 1 }}</span
                >
              </el-tooltip>
              <span class="comMsg"
                ><b>下发时间：{{ item.publishTime }}</b>
                <b v-if="item.terminal && item.terminal.cmdid"
                  >设备ID：{{ item.terminal.cmdid }}</b
                >
                <b>命令：{{ cmdCn[item.name] }}</b>
                <b v-if="item.cmdMap && item.cmdMap.fileName"
                  >apk版本：{{ item.cmdMap.fileName }}</b
                >
                <b v-else>cmd：{{ item.cmdMap }}</b>
              </span>
            </p>
          </div>
          <div class="commandList" v-else>
            <p>暂无已下发命令</p>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      class="MsgDialog"
      title="命令信息"
      :visible.sync="commandShow"
      :close-on-click-modal="false"
      width="680px"
    >
      <div class="cmdMain">
        <!-- {{ deveceMsg }} -->
        <p>设备ID:{{ devCmdid }}</p>
        <p>操作时间：{{ deveceMsg.createTime }}</p>
        <p>待执行操作：{{ cmdCn[deveceMsg.name] }} {{ deveceMsg.name }}</p>
        <p>cmd：{{ deveceMsg.cmd }}</p>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCancel(deveceMsg.id)">取消操作</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  cmdSendApi,
  getCmdActionApi,
  cmdActlistApi,
  cmdActHislistApi,
} from "@/utils/api/index";
export default {
  name: "report",
  components: {},
  data() {
    return {
      leftComLoading: false, //左侧loading
      rightComLoading: false, //右侧loiading
      // runCommand: [],
      // endCommand: [],
      leftCommand: [],
      rightCommand: [],
      commandShow: false,
      deveceMsg: {},
      devCmdid: "",
      cmdCn: {
        yw_cmd_android_reboot: "重启设备",
        yw_cmd_mcu_reboot: "MCU单片机重启",
        i1_cmd_set_i1_server_ip_port: "设置I1服务器",
        i1_cmd_set_xy_yw_ip_port: "设置运维服务器",
        i1_cmd_set_i1_heart_beat_time: "设置心跳周期",
        yw_cmd_upload_i1_zip_log: "上传日志",
        upgrade: "升级",
        yw_upd_ota: "Ota升级",
        yw_cmd_start_frpc: "开启frpc",
        yw_cmd_stop_frpc: "停止frpc",
        i1_cmd_stop_aging_test: "停止老化测试",
        del_file: "删除文件",
        pull_files: "拉取文件",
        push_file: "推送文件",
        dl_file: "推送大文件",
      },
      cmdtimer: null,
      endtimer: null,
      updateTime: null,
      newupdatatime: null,
      //运维操作列表
      operateOptions: [{ id: 0, key: "all", desc: "全部" }],
      operateL: "all",
      operateR: "all",
      leftcmdVal: "",
      rightcmdVal: "",
      intervalId: null, // 用于存储setInterval返回的ID
    };
  },
  computed: {},
  created() {
    this.cmdtimer = setInterval(this.getCmdList, 60000); // 每60秒刷新数据
    this.endtimer = setInterval(this.getEndList, 60000); // 每60秒刷新数据
  },
  mounted() {
    this.getCmdList();
    this.getEndList();
    this.getCmdOptionsFun();
    this.startCountdown(); // 在组件挂载后开始倒计时
  },

  methods: {
    getCmdOptionsFun() {
      getCmdActionApi()
        .then((res) => {
          console.log(res);
          this.operateOptions = this.operateOptions.concat(res.data);
          // this.operateL = this.operateOptions[0].desc;
        })
        .catch((err) => {});
    },
    startCountdown() {
      this.newupdatatime = new Date().getTime(); // 更新当前时间
      // 清空之前可能存在的定时器
      if (this.intervalId) {
        clearInterval(this.intervalId);
      }
      // 开始倒计时，每秒执行一次remainingTime方法
      this.intervalId = setInterval(() => {
        this.newupdatatime = new Date().getTime(); // 更新当前时间
        this.leftCommand.forEach((item) => {
          this.remainingTime(item); // 重新计算每个项目的剩余时间
        });
      }, 1000); // 每秒执行一次
    },
    remainingTime(item) {
      if (!this.newupdatatime) {
        // 更新时间尚未设置，返回默认的倒计时时间或者不执行任何操作
        return "计算中...";
      }
      const estimatedPublishTime = item.estimatedPublishTime * 1000;
      const difference = estimatedPublishTime - this.newupdatatime;
      const minutes = Math.floor(difference / 60000);
      const seconds = Math.floor((difference % 60000) / 1000);
      if (minutes == 0 && seconds == 0) {
        this.getCmdList();
        this.getEndList();
        return `命令已下发`;
      } else {
        return ` 预估剩余：${minutes} 分钟 ${seconds} 秒`;
      }
    },
    getCmdList() {
      this.leftComLoading = true;
      let params = {
        pageNum: 1,
        pageSize: 500,
      };
      console.log(this.operateL);
      // 根据条件添加参数
      if (this.operateL !== "all") {
        params.action = this.operateL;
      }
      if (this.leftcmdVal !== "") {
        params.cmdid = this.leftcmdVal;
      }
      cmdActlistApi(params)
        .then((res) => {
          console.log(res);
          //this.runCommand = res.data.list;
          this.leftCommand = res.data.list;
          this.leftComLoading = false;

          this.updateTime = new Date();
        })
        .catch((err) => {});
    },
    handleShowCommand(val) {
      console.log(val);
      this.commandShow = true;
      console.log(this.commandShow);
      this.deveceMsg = val;
      this.devCmdid = val.terminal.cmdid;
    },

    //获取已取走列表
    getEndList() {
      this.rightComLoading = true;
      let params = {
        pageNum: 1,
        pageSize: 500,
      };
      // 根据条件添加参数
      if (this.operateR !== "all") {
        params.action = this.operateR;
      }
      if (this.rightcmdVal !== "") {
        params.cmdid = this.rightcmdVal;
      }
      cmdActHislistApi(params)
        .then((res) => {
          console.log(res);
          //this.endCommand = res.data;
          //this.endCommand = res.data.list
          this.rightCommand = res.data.list;

          this.rightComLoading = false;
          this.updateTime = new Date();
        })
        .catch((err) => {});
    },
    //左侧筛选
    selectLeftChanged() {
      this.getCmdList();
    },
    leftInputChange() {
      console.log(this.leftcmdVal);
      this.getCmdList();
    },

    //右侧筛选
    selectRightChanged() {
      this.getEndList();
    },
    rightInputChange() {
      this.getEndList();
    },
    //取消操作
    handleCancel(val) {
      console.log(val);
      cmdSendApi({
        action: "cancel",
        id: val,
      })
        .then((res) => {
          console.log(res);

          this.$confirm("确定取消该命令？", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              this.$message({
                duration: 1500,
                showClose: true,
                message: "命令已取消",
                type: "success",
              });
              this.commandShow = false;
              this.getCmdList();
              this.getEndList();
            })
            .catch(() => {
              this.commandShow = false;
            });
        })
        .catch((err) => {});
    },

    deleteml() {
      cmdSendApi({
        action: "clear",
      })
        .then((res) => {
          console.log(res);

          this.$confirm("确定清除所有命令？", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              this.$message({
                duration: 1500,
                showClose: true,
                message: "命令已清除",
                type: "success",
              });
              this.commandShow = false;
              this.getCmdList();
              this.getEndList();
            })
            .catch(() => {
              this.commandShow = false;
            });
        })
        .catch((err) => {});
    },
    deletehis() {
      cmdSendApi({
        action: "clearHis",
      })
        .then((res) => {
          console.log(res);

          this.$confirm("确定清除所有命令？", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              this.$message({
                duration: 1500,
                showClose: true,
                message: "命令已清除",
                type: "success",
              });

              this.getCmdList();
              this.getEndList();
            })
            .catch(() => {});
        })
        .catch((err) => {});
    },
  },
  beforeDestroy() {
    //清除定时器
    console.log("清除report列表的轮巡");
    clearInterval(this.cmdtimer);
    clearInterval(this.endtimer);
    this.cmdtimer = null;
    this.endtimer = null;
    if (this.intervalId) {
      clearInterval(this.intervalId);
    }
  },
};
</script>
<style lang="less">
.reportBox {
  height: calc(100% - 24px);
  width: calc(100% - 24px);
  padding: 12px;
  .commandBox {
    display: flex;
    height: calc(100% - 18px);
    .commandClass {
      width: 50%;
      padding: 12px;
      height: calc(100% - 24px);
      border: 1px solid #dcdfe6;
      margin-right: 12px;
      border-radius: 4px;
      .headTitle {
        height: 40px;
        line-height: 40px;
        display: flex;
        align-items: center;
        white-space: nowrap;
        .title {
          font-size: 16px;
          font-weight: normal;
        }
        .el-select {
          margin: 0px 12px;
          width: 150px;
        }
        .cmdidClass {
          width: 180px;
        }
        .mlspan {
          font-size: 14px;
          margin-left: 8px;
        }
        .time {
          font-size: 12px;
          margin-left: 8px;
        }
        .deletebtn {
          margin-left: auto;
          padding: 4px;
        }
      }
      .mlbpox {
        height: calc(100% - 40px);
      }
      .commandList {
        width: 100%;
        height: calc(100% - 0px);
        //background: #fcc;
        overflow: auto;
        p {
          background: #fdf6ec;
          margin-bottom: 8px;
          line-height: 24px;
          color: #333;
          font-size: 14px;
          padding: 6px;
          cursor: pointer;
          display: flex;
          align-items: center;
          &:hover {
            background: #faecd8;
          }
          .indexClass {
            padding: 4px;
            font-size: 14px;
            color: #000;
            background: #d3d3d3;
            min-width: 18px;
            text-align: center;
            margin-right: 8px;
          }
          .normalClass {
            background: #d3d3d3;
          }
          .cancelClass {
            background: #fde2e2;
          }
          .comMsg {
            display: flex;
            flex-wrap: wrap;
            b {
              font-weight: normal;
              margin-right: 12px;
            }
          }
        }
      }
    }
    .commandRunLeft {
    }
    .commandRunRight {
      .commandList {
        p {
          cursor: default;
          background: #e1f3d8;
          &:hover {
            background: #e1f3d8;
          }
        }
      }
    }
  }
  .MsgDialog {
    .cmdMain {
      p {
        font-size: 16px;
        line-height: 32px;
      }
    }
    .dialog-footer {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
.el-dialog__headerbtn {
  top: 18px;
  .el-dialog__close {
    font-size: 26px;
    &:hover {
      background: #e2e2e2;
    }
  }
}
</style>