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

<template>
  <div class="reportBox">
    <div class="commandBox">
      <div class="commandRunLeft commandClass">
        <h3>待下发终端</h3>
        <div class="commandList" v-loading="leftComLoading">
          <p
            class="comLi"
            v-for="(item, index) in runCommand"
            :key="index"
            @click="handleShowCommand(item)"
          >
            <span class="indexClass">{{ index + 1 }}</span>
            <span class="comMsg"
              ><b>时间：{{ item.createTime }}</b>
              <b>设备ID：{{ item.cmdid }}</b>
              <b>命令：{{ item.cmdName }}</b></span
            >
          </p>
        </div>
      </div>
      <div class="commandRunRight commandClass">
        <h3>已下发终端</h3>
        <div class="commandList">
          <p class="comLi" v-for="(item, index) in endCommand" :key="index">
            {{ item }}
          </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>
      </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: [
        {
          name: "我是已完成的列表",
          id: 1,
        },
        {
          name: "我是已完成的列表",
          id: 2,
        },
        {
          name: "我是已完成的列表",
          id: 3,
        },
        {
          name: "我是已完成的列表",
          id: 4,
        },
      ],
      commandShow: false,
      deveceMsg: "",
    };
  },
  computed: {},
  mounted() {
    // setInterval(this.getCmdList(), 1000); // 每10秒刷新数据
    this.getCmdList();
  },
  methods: {
    getCmdList() {
      this.leftComLoading = true;
      getqueryCmdsApi({ p: 1, ps: 200 })
        .then((res) => {
          console.log(res);
          this.runCommand = res.data;
          this.leftComLoading = false;
        })
        .catch((err) => {});
    },
    handleShowCommand(val) {
      console.log(val);
      this.commandShow = true;
      console.log(this.commandShow);
      this.deveceMsg = val;
    },
    //取消操作
    handleCancel(val) {
      getdoActionApi({
        action: "cancel",
        id: val,
      })
        .then((res) => {
          console.log(res);
          this.commandShow = false;
          this.getCmdList();
        })
        .catch((err) => {});
    },
  },
  created() {},
};
</script>
<style lang="less">
.reportBox {
  height: calc(100% - 24px);
  width: calc(100% - 24px);
  padding: 12px;
  .commandBox {
    display: flex;
    height: 100%;
    .commandClass {
      width: 40%;
      padding: 12px;
      height: calc(100% - 24px);
      border: 1px solid #dcdfe6;
      margin-right: 12px;
      border-radius: 4px;
      h3 {
        font-size: 16px;
        font-weight: normal;
        height: 32px;
        line-height: 32px;
      }
      .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;
          }
          .comMsg {
            display: flex;
            flex-wrap: wrap;
            b {
              font-weight: normal;
              margin-right: 12px;
            }
          }
        }
      }
    }
    .commandRunLeft {
    }
    .commandRunRight {
      .commandList {
        p {
          background: rgb(225, 243, 216);
          &:hover {
            background: rgb(225, 243, 216);
          }
        }
      }
    }
  }
  .MsgDialog {
    .cmdMain {
      p {
        font-size: 16px;
        line-height: 32px;
      }
    }
    .dialog-footer {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>