添加状态列表

src/views/homePage/components/tableMain.vue

@@ -461,7 +461,6 @@
     </el-table>
     <el-drawer
       class="drawerBox"
-      title="我是标题"
       :visible.sync="drawer"
       direction="rtl"
       :with-header="false"
@@ -702,11 +701,63 @@
     </el-dialog>
     <!-- 装置详细信息 -->
     <rowMsgDialog ref="rowMsgDialogref"></rowMsgDialog>
+    <div class="taskMask">
+      <el-tooltip class="item" effect="dark" content="任务列表" placement="top">
+        <el-button
+          icon="el-icon-set-up"
+          type="primary"
+          round
+          @click="showTaskDraw"
+        >
+        </el-button>
+      </el-tooltip>
+    </div>
+    <el-drawer
+      class="taskDrawDialog"
+      title="待下发终端列表"
+      :visible.sync="taskdrawer"
+      direction="rtl"
+    >
+      <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>设备ID：{{ item.cmdid }}</b>
+            <b v-if="item.cmd.fileName">apk版本：{{ item.cmd.fileName }}</b>
+            <b v-if="item.cmdDesc == ''">命令：{{ cmdCn[item.cmdName] }}</b
+            ><b v-else>命令：{{ item.cmdDesc }}</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>
+    </el-drawer>
   </div>
 </template>
 
 <script>
-import { getdoActionApi, getqueryUpgradesApi } from "@/utils/api/index";
+import {
+  getdoActionApi,
+  getqueryUpgradesApi,
+  getqueryCmdsApi,
+} from "@/utils/api/index";
 import rowMsgDialog from "./rowMsgDialog.vue";
 import htmlToExcel from "@/utils/htmlToExcel";
 import { saveAs } from "file-saver";
@@ -739,6 +790,21 @@ export default {
       }
     };
     return {
+      updateTime: null,
+      newupdatatime: null,
+      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: "停止老化测试",
+      },
+      taskdrawer: false,
       drawer: false,
       protocolMap: {
         65280: "国网I1",
@@ -920,10 +986,14 @@ export default {
           },
         ],
       },
+
+      runCommand: [],
+      leftCommand: [],
     };
   },
   mounted() {
     this.loadLocalStorage();
+    this.startCountdown(); // 在组件挂载后开始倒计时
     //this.getNumber();
     // this.$nextTick(() => {
     //   this.getNumber();
@@ -939,7 +1009,7 @@ export default {
       deep: true,
     },
   },
-
+  created() {},
   methods: {
     sortNumbers(a, b) {
       return (
@@ -1459,6 +1529,51 @@ export default {
         this.$refs.ywMultipleTable.doLayout(); // 调用 el-table 的 doLayout 方法重新布局
       });
     },
+    showTaskDraw() {
+      this.taskdrawer = true;
+      this.getCmdList();
+    },
+    getCmdList() {
+      //this.leftComLoading = true;
+      getqueryCmdsApi({ p: 1, ps: 10000 })
+        .then((res) => {
+          console.log(res);
+          this.runCommand = res.data;
+          this.leftCommand = this.runCommand;
+          this.updateTime = new Date();
+        })
+        .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();
+        return `命令已下发`;
+      } else {
+        return ` 预估剩余：${minutes} 分钟 ${seconds} 秒`;
+      }
+    },
   },
 };
 </script>
@@ -1662,6 +1777,61 @@ export default {
       width: 100%;
     }
   }
+  .taskMask {
+    position: fixed;
+    bottom: 50%;
+    right: 0px;
+    z-index: 2;
+    .el-button {
+      border-radius: 50%;
+      padding: 10px;
+    }
+  }
+  .taskDrawDialog {
+    .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;
+          }
+        }
+      }
+    }
+  }
 }
 .contenBoxMsg {
   p {