优化命令显示

src/views/homePage/components/tableMain.vue

@@ -75,13 +75,36 @@
       <el-table-column type="index" width="50" label="序号"> </el-table-column>
       <!-- <el-table-column prop="id" label="ID" width="60" sortable>
       </el-table-column> -->
-      <el-table-column prop="oid" label="出厂ID" width="150" sortable>
+      <el-table-column prop="oid" label="出厂ID" width="180" sortable>
         <template slot-scope="scope">
-          {{
-            scope.row.raw_report.hasOwnProperty("oid")
-              ? scope.row.raw_report.oid
-              : ""
-          }}
+          <span
+            class="redMlxf"
+            v-if="
+              scope.row.list &&
+              scope.row.list[0].estimatedPublishTime * 1000 - newupdatatime > 0
+            "
+          >
+            <b v-if="scope.row.list[0].cmdDesc == ''">{{
+              cmdCn[scope.row.list[0].cmdName]
+            }}</b
+            ><b v-else>{{ scope.row.list[0].cmdDesc }}</b>
+
+            <b
+              v-if="
+                scope.row.list[0].estimatedPublishTime * 1000 - newupdatatime >
+                0
+              "
+            >
+              {{ remainingTime(scope.row.list[0]) }}
+            </b>
+          </span>
+          <span v-else>
+            {{
+              scope.row.raw_report.hasOwnProperty("oid")
+                ? scope.row.raw_report.oid
+                : ""
+            }}
+          </span>
         </template>
       </el-table-column>
       <el-table-column prop="cmdid" label="装置编号" width="150" sortable>
@@ -701,58 +724,11 @@
     </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">
-          <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,
-  getqueryCmdsApi,
-} from "@/utils/api/index";
+import { getdoActionApi, getqueryUpgradesApi } from "@/utils/api/index";
 import rowMsgDialog from "./rowMsgDialog.vue";
 import htmlToExcel from "@/utils/htmlToExcel";
 import { saveAs } from "file-saver";
@@ -785,7 +761,6 @@ export default {
       }
     };
     return {
-      updateTime: null,
       newupdatatime: null,
       cmdCn: {
         yw_cmd_android_reboot: "重启设备",
@@ -981,25 +956,20 @@ export default {
           },
         ],
       },
-
-      runCommand: [],
-      leftCommand: [],
+      newupdatatime: null,
     };
   },
   mounted() {
     this.loadLocalStorage();
-    this.startCountdown(); // 在组件挂载后开始倒计时
-    //this.getNumber();
-    // this.$nextTick(() => {
-    //   this.getNumber();
-    // });
   },
   watch: {
     tableData: {
       handler(newVal) {
         // 数据发生变化时的处理逻辑
         console.log("数据已更新：", newVal);
+
         this.getNumber();
+        this.startCountdown();
       },
       deep: true,
     },
@@ -1237,6 +1207,7 @@ export default {
         });
         return;
       }
+      this.$parent.fetchData();
       switch (this.formIssue.operate) {
         case 1:
           console.log("重启");
@@ -1524,21 +1495,6 @@ 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(); // 更新当前时间
       // 清空之前可能存在的定时器
@@ -1548,8 +1504,13 @@ export default {
       // 开始倒计时，每秒执行一次remainingTime方法
       this.intervalId = setInterval(() => {
         this.newupdatatime = new Date().getTime(); // 更新当前时间
-        this.leftCommand.forEach((item) => {
-          this.remainingTime(item); // 重新计算每个项目的剩余时间
+        this.tableData.forEach((item) => {
+          //console.log(item);
+          if (item.list) {
+            this.remainingTime(item.list[0]);
+          }
+          // let params = item.list[0];
+          // this.remainingTime(params); // 重新计算每个项目的剩余时间
         });
       }, 1000); // 每秒执行一次
     },
@@ -1563,10 +1524,10 @@ export default {
       const minutes = Math.floor(difference / 60000);
       const seconds = Math.floor((difference % 60000) / 1000);
       if (minutes == 0 && seconds == 0) {
-        this.getCmdList();
+        this.$parent.fetchData();
         return `命令已下发`;
       } else {
-        return ` 预估剩余：${minutes} 分钟 ${seconds} 秒`;
+        return ` 剩余：${minutes} 分钟 ${seconds} 秒`;
       }
     },
   },
@@ -1827,6 +1788,13 @@ export default {
       }
     }
   }
+  .redMlxf {
+    color: #f00;
+    b {
+      font-size: 12px;
+      font-weight: normal;
+    }
+  }
 }
 .contenBoxMsg {
   p {

src/views/homePage/index.vue

@@ -190,7 +190,7 @@
       :style="{ height: showDiv ? 'calc(100% - 82px)' : 'calc(100% - 2px)' }"
     >
       <tableMain
-        :tableData="dataList"
+        :tableData="dataListNew"
         :onlineNum="onlineNum"
         :offlineNum="offlineNum"
         :noPicNum="noPicNum"
@@ -205,6 +205,7 @@ import {
   getqueryTermsApi,
   getqueryProtocolApi,
   getqueryActivityApi,
+  getqueryCmdsApi,
 } from "@/utils/api/index";
 import tableMain from "./components/tableMain";
 export default {
@@ -247,12 +248,14 @@ export default {
         { id: 2, name: "未运维" },
       ], //是否运维
       dataList: [],
+      dataListNew: [],
       tableLoaidng: true,
       onlineNum: 0, //在线数量
       offlineNum: 0, //离线数量
       noPicNum: 0, //未上传图片数量
       intervalId: null, // 用于存储定时器的ID
       activityIdLoc: "",
+      runCommand: [], //获取命令列表
     };
   },
   created() {
@@ -444,6 +447,7 @@ export default {
               item.raw_report.pic == 0 ||
               item.raw_report.pic == -1
           ).length;
+          this.getCmdList();
           this.tableLoaidng = false;
         })
         .catch((err) => {});
@@ -544,6 +548,39 @@ export default {
               item.raw_report.pic == 0 ||
               item.raw_report.pic == -1
           ).length;
+          this.getCmdList();
+        })
+        .catch((err) => {});
+    },
+    //获取命令列表
+    getCmdList() {
+      getqueryCmdsApi({ p: 1, ps: 10000 })
+        .then((res) => {
+          console.log(res);
+          console.log("我是命令列表");
+          console.log(this.dataList);
+          this.runCommand = res.data;
+          // let array1 = [{ id: 0, name: "sss" },{ id: 1, name: "111" }];
+          // let array2 = [{ termid: 0, time: "aaaa" },{ termid: 1, time: "s1111ss" }];
+
+          // 过滤出array1中每个对象的id
+          let ids = this.dataList.map((item) => item.id);
+
+          // 过滤出array2中termId与array1中的id相等的项
+          let filteredArray2 = this.runCommand.filter((item) =>
+            ids.includes(item.termId)
+          );
+
+          // 遍历array1，找到匹配的项并添加到list属性中
+          this.dataList.forEach((item) => {
+            let match = filteredArray2.find((i) => i.termId === item.id);
+            if (match) {
+              item.list = item.list || []; // 如果list属性不存在，则初始化一个空数组
+              item.list.push(match);
+            }
+          });
+          this.dataListNew = this.dataList;
+          console.log(this.dataList);
         })
         .catch((err) => {});
     },