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: "删除文件",
        upload_file: "上传文件",
        download_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:300,
      };
      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:300,
      };
      // 根据条件添加参数
      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() {
    //清除定时器
    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;
        .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>