页面样式调整

src/views/ems/dzjk/sbjk/pcs/index.vue

@@ -10,8 +10,8 @@
           <div>数据更新时间：2024-10-11 12:00:00</div>
         </div>
         <div class="pcs-btns">
-          <el-button type="warning" size="small">警告按钮</el-button>
-          <el-button size="small">默认按钮</el-button>
+          <el-button type="warning" size="small" @click="problemSaved">故障复位</el-button>
+          <el-button size="small" @click="machineClosed">关机</el-button>
         </div>
       </el-header>
       <el-main style="padding: 0">
@@ -45,6 +45,7 @@
 import RealTimeBaseInfo from "./../RealTimeBaseInfo.vue";
 
 export default {
+  name:'ZdjkSbjkPcs',
   components:{RealTimeBaseInfo},
   data() {
     return {
@@ -67,6 +68,70 @@ export default {
       ],
     }
   },
+  methods:{
+    problemSaved(){
+      this.$confirm('确认故障已复位?', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        showClose:false,
+        closeOnClickModal:false,
+        type: 'warning',
+        beforeClose: (action, instance, done) => {
+          if (action === 'confirm') {
+            instance.confirmButtonLoading = true;
+            setTimeout(() => {
+              // todo 调用接口如果关机成功 调用done方法 否则不关闭弹窗
+              done();
+              // setTimeout(() => {
+              instance.confirmButtonLoading = false;
+              // }, 300);
+            }, 3000);
+          } else {
+            done();
+          }
+        }
+      }).then(() => {
+        //只有在故障复位成功的情况下会走到这里
+        this.$message({
+          type: 'success',
+          message: '故障复位成功!'
+        });
+      }).catch(() => {
+        //取消复位
+      });
+    },
+    machineClosed(){
+      this.$confirm('确认要关机吗?', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        showClose:false,
+        closeOnClickModal:false,
+        type: 'warning',
+        beforeClose: (action, instance, done) => {
+          if (action === 'confirm') {
+            instance.confirmButtonLoading = true;
+            setTimeout(() => {
+              // todo 调用接口如果关机成功 调用done方法 否则不关闭弹窗
+              done();
+              // setTimeout(() => {
+              instance.confirmButtonLoading = false;
+              // }, 300);
+            }, 3000);
+          } else {
+            done();
+          }
+        }
+      }).then(() => {
+        //只有在关机成功的情况下会走到这里
+        this.$message({
+          type: 'success',
+          message: '关机成功!'
+        });
+      }).catch(() => {
+        //取消关机
+      });
+    }
+  }
 
 }
 </script>