ops-fronted/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.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
          <el-input
            class="cmdidClass"
            v-model="leftcmdVal"
            placeholder="请输入设备ID查询"
            @change="leftInputChange"
          ></el-input>
          <span class="time"
            >更新时间：{{
              $moment(updateTime).format("YYYY-MM-DD HH:mm:ss")
            }}</span
          >
        </div>
        <div
          class="commandList"
          v-loading="leftComLoading"
          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>设备ID：{{ item.cmdid }}</b>
              <b>命令：{{ cmdCn[item.cmdName] }}</b></span
            >
          </p>
        </div>
        <div class="commandList" v-else>
          <p>暂无下发命令</p>
        </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.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
          <el-input
            class="cmdidClass"
            v-model="rightcmdVal"
            placeholder="请输入设备ID查询"
            @change="rightInputChange"
          ></el-input>
          <span class="time"
            >更新时间：{{
              $moment(updateTime).format("YYYY-MM-DD HH:mm:ss")
            }}</span
          >
        </div>
        <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>设备ID：{{ item.cmdid }}</b>
              <b>命令：{{ cmdCn[item.cmdName] }}</b>
              <b>cmd：{{ item.cmd }}</b></span
            >
          </p>
        </div>
        <div class="commandList" v-else>
          <p>暂无已下发命令</p>
        </div>
      </div>
    </div>
    <el-dialog
      class="MsgDialog"
      title="命令信息"
      :visible.sync="commandShow"
      :close-on-click-modal="false"
      width="680px"
    >
      <div class="cmdMain">
        <!-- {{ deveceMsg }} -->
        <p>设备ID:{{ deveceMsg.cmdid }}</p>
        <p>操作时间：{{ deveceMsg.createTime }}</p>
        <p>待执行操作：{{ deveceMsg.cmdName }}</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 { getdoActionApi, getqueryCmdsApi } from "@/utils/api/index";
export default {
  name: "report",
  components: {},
  data() {
    return {
      leftComLoading: false, //左侧loading
      runCommand: [],
      endCommand: [],
      leftCommand: [],
      rightCommand: [],
      commandShow: false,
      deveceMsg: "",
      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_cmd_start_frpc: "开启frpc",
        yw_cmd_stop_frpc: "停止frpc",
        i1_cmd_stop_aging_test: "停止老化测试",
      },
      cmdtimer: null,
      endtimer: null,
      updateTime: null,
      //运维操作列表
      operateOptions: [
        { id: 0, name: "全部" },
        { id: 1, name: "安卓重启" },
        { id: 2, name: "MCU单片机重启" },
        { id: 3, name: "设置I1服务器" },
        // { id: 4, name: "设置运维服务器" },
        { id: 5, name: "设置心跳周期" },
        { id: 6, name: "上传日志" },
        { id: 7, name: "升级" },
        { id: 8, name: "开启frpc" },
        { id: 9, name: "停止frpc" },
        { id: 10, name: "停止老化测试" },
      ],
      operateL: 0,
      operateR: 0,
      leftcmdVal: "",
      rightcmdVal: "",
    };
  },
  computed: {},
  created() {
    this.cmdtimer = setInterval(this.getCmdList, 60000); // 每10秒刷新数据
    this.endtimer = setInterval(this.getEndList, 60000); // 每10秒刷新数据
  },
  mounted() {
    this.getCmdList();
    this.getEndList();
  },

  methods: {
    getCmdList() {
      //this.leftComLoading = true;
      getqueryCmdsApi({ p: 1, ps: 200 })
        .then((res) => {
          console.log(res);
          this.runCommand = res.data;
          this.leftComLoading = false;
          this.selectLeftChanged(this.operateL);
          this.updateTime = new Date();
        })
        .catch((err) => {});
    },
    handleShowCommand(val) {
      console.log(val);
      this.commandShow = true;
      console.log(this.commandShow);
      this.deveceMsg = val;
    },
    //取消操作
    handleCancel(val) {
      getdoActionApi({
        act: "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) => {});
    },

    //获取已取走列表
    getEndList() {
      getqueryCmdsApi({ qt: "his", p: 1, ps: 200 })
        .then((res) => {
          console.log(res);
          this.endCommand = res.data;
          //this.endCommand = res.data.filter((item) => item.status == "1");
          this.selectRightChanged(this.operateR);
          // this.leftComLoading = false;
          this.updateTime = new Date();
        })
        .catch((err) => {});
    },
    //左侧筛选
    selectLeftChanged(val) {
      console.log(val);
      switch (val) {
        case 0:
          this.leftCommand = this.runCommand;
          return;
        case 1:
          this.leftCommand = this.runCommand.filter(
            (item) => item.cmdName == "yw_cmd_android_reboot"
          );
          return;
        case 2:
          this.leftCommand = this.runCommand.filter(
            (item) => item.cmdName == "yw_cmd_mcu_reboot"
          );
          return;
        case 3:
          this.leftCommand = this.runCommand.filter(
            (item) => item.cmdName == "i1_cmd_set_i1_server_ip_port"
          );
          return;
        case 4:
          this.leftCommand = this.runCommand.filter(
            (item) => item.cmdName == "i1_cmd_set_xy_yw_ip_port"
          );
          return;
        case 5:
          this.leftCommand = this.runCommand.filter(
            (item) => item.cmdName == "i1_cmd_set_i1_heart_beat_time"
          );
          return;
        case 6:
          this.leftCommand = this.runCommand.filter(
            (item) => item.cmdName == "yw_cmd_upload_i1_zip_log"
          );
          return;
        case 7:
          this.leftCommand = this.runCommand.filter(
            (item) => item.cmdName == "upgrade"
          );
          return;
        case 8:
          this.leftCommand = this.runCommand.filter(
            (item) => item.cmdName == "yw_cmd_start_frpc"
          );
          return;
        case 9:
          this.leftCommand = this.runCommand.filter(
            (item) => item.cmdName == "yw_cmd_stop_frpc"
          );
          return;
        case 10:
          this.leftCommand = this.runCommand.filter(
            (item) => item.cmdName == "i1_cmd_stop_aging_test"
          );
          return;
      }
    },
    leftInputChange(value) {
      this.leftCommand = this.runCommand.filter((item) =>
        item.cmdid.includes(value)
      );
    },
    //右侧筛选
    selectRightChanged(val) {
      console.log(val);
      switch (val) {
        case 0:
          this.rightCommand = this.endCommand;
          console.log(this.rightCommand);
          return;
        case 1:
          this.rightCommand = this.endCommand.filter(
            (item) => item.cmdName == "yw_cmd_android_reboot"
          );
          console.log(this.rightCommand);
          return;
        case 2:
          this.rightCommand = this.endCommand.filter(
            (item) => item.cmdName == "yw_cmd_mcu_reboot"
          );
          return;
        case 3:
          this.rightCommand = this.endCommand.filter(
            (item) => item.cmdName == "i1_cmd_set_i1_server_ip_port"
          );
          return;
        case 4:
          this.rightCommand = this.endCommand.filter(
            (item) => item.cmdName == "i1_cmd_set_xy_yw_ip_port"
          );
          return;
        case 5:
          this.rightCommand = this.endCommand.filter(
            (item) => item.cmdName == "i1_cmd_set_i1_heart_beat_time"
          );
          return;
        case 6:
          this.rightCommand = this.endCommand.filter(
            (item) => item.cmdName == "yw_cmd_upload_i1_zip_log"
          );
          return;
        case 7:
          this.rightCommand = this.endCommand.filter(
            (item) => item.cmdName == "upgrade"
          );
          return;
        case 8:
          this.rightCommand = this.endCommand.filter(
            (item) => item.cmdName == "yw_cmd_start_frpc"
          );
          return;
        case 9:
          this.rightCommand = this.endCommand.filter(
            (item) => item.cmdName == "yw_cmd_stop_frpc"
          );
          return;
        case 10:
          this.rightCommand = this.endCommand.filter(
            (item) => item.cmdName == "i1_cmd_stop_aging_test"
          );
          return;
      }
    },
    rightInputChange(value) {
      this.rightCommand = this.endCommand.filter((item) =>
        item.cmdid.includes(value)
      );
    },
  },
  beforeDestroy() {
    //清除定时器
    clearInterval(this.cmdtimer);
    clearInterval(this.endtimer);
    this.cmdtimer = null;
    this.endtimer = null;
  },
};
</script>
<style lang="less">
.reportBox {
  height: calc(100% - 24px);
  width: calc(100% - 24px);
  padding: 12px;
  .commandBox {
    display: flex;
    height: 100%;
    .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;
        }
        .time {
          font-size: 12px;
          margin-left: 8px;
        }
      }
      .commandList {
        width: 100%;
        height: calc(100% - 32px);
        //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;
    }
  }
}
</style>