策略导入执行过程、结果

psdc-ui/src/views/control/manual/index.vue

@@ -67,7 +67,12 @@
           <el-radio v-for="(item,index) in celueList" :key="index" class="celueBox" v-model="radio" :label="item.sceneName" size="large" @change="selectCeLue(item)">
           <span style="font-weight: bold; display: inline-block; margin-bottom: 20px;">{{ item.sceneName }}</span>
             <el-timeline>
-              <el-timeline-item v-for="(items,index) in item.flow" :key="index" :timestamp="items.timestamp" :hollow="items.hollow" :type="items.type" placement="top">
+              <el-timeline-item v-for="(items,index) in item.flow" :key="index" placement="top"
+                                :timestamp="items.timestamp"
+                                :hollow="items.hollow"
+                                :icon="items.icon"
+                                :type="items.type"
+              >
                 {{items.step}}
               </el-timeline-item>
             </el-timeline>
@@ -107,7 +112,7 @@
 <script setup name="Index">
 import { Download } from '@element-plus/icons-vue'  //element字体图标
 import { ref,reactive,onMounted  } from 'vue'
-import { ElMessageBox,ElMessage } from 'element-plus'
+import { ElMessageBox,ElMessage, ElLoading} from 'element-plus'
 import { getDevice,getControlLogList,getStrategyList,getStartAndStop,getSetTemperature,getSenceControl,getControlDeviceList } from '@/api/control/manual'
 
 onMounted(()=>{
@@ -213,20 +218,20 @@ const celueList = ref([
       {
         timestamp:'第一步',
         step:'开启断路器，锅炉循环泵供电。',
-        hollow: false,
         type: '',
+        icon:'',
       },
       {
         timestamp:'第二步',
         step:'开启断路器，电磁锅炉供电，在控制界面可启停和调节锅炉出水温度。锅炉启动时会自动开启锅炉循环泵。',
-        hollow: true,
         type: '',
+        icon:''
       },
       {
         timestamp:'第三步',
         step:'当中间水箱温度达到实验要求时，开启断路器，启动热网循环泵。',
-        hollow: false,
         type: '',
+        icon:''
       }
     ]
   },
@@ -236,17 +241,20 @@ const celueList = ref([
       {
         timestamp:'第一步',
         step:'开启空气源热泵循环泵断路器，空气源热泵循环泵供电。',
-        hollow: false,
+        type: '',
+        icon:''
       },
       {
         timestamp:'第二步',
         step:'开启空气源热泵断路器，空气源热泵供电，在控制界面可启停和调节空气源热泵出水温度。锅炉启动时会自动开启空气源热泵循环泵。',
-        hollow: true,
+        type: '',
+        icon:''
       },
       {
         timestamp:'第三步',
         step:'当中间水箱温度达到实验要求时，开启热网循环泵断路器和风机盘管断路器断路器，启动热网循环泵和风机盘管，通过风机盘管控制界面可进行设置控制。',
-        hollow: false,
+        type: '',
+        icon:''
       }
     ]
   },
@@ -256,22 +264,26 @@ const celueList = ref([
       {
         timestamp:'第一步',
         step:'开启锅炉蓄热循环泵断路器，锅炉蓄热循环泵供电。',
-        hollow: false,
+        type: '',
+        icon:''
       },
       {
         timestamp:'第二步',
         step:'开启电磁锅炉电箱中的电磁锅炉断路器，电磁锅炉供电。',
-        hollow: true,
+        type: '',
+        icon:''
       },
       {
         timestamp:'第三步',
         step:'在控制界面进行锅炉启动和出水温度设置，锅炉启动会自动启动相应循环水泵。',
-        hollow: true,
+        type: '',
+        icon:''
       },
       {
         timestamp:'第四步',
         step:'蓄热完成后关闭电磁锅炉及水泵。',
-        hollow: false,
+        type: '',
+        icon:''
       }
     ]
   },
@@ -281,22 +293,26 @@ const celueList = ref([
       {
         timestamp:'第一步',
         step:'开启空气源热泵蓄热循环泵断路器，蓄热循环水泵供电。',
-        hollow: false,
+        type: '',
+        icon:''
       },
       {
         timestamp:'第二步',
         step:'开启空气源热泵电箱中的空气源热泵断路器，空气源热泵供电。',
-        hollow: true,
+        type: '',
+        icon:''
       },
       {
         timestamp:'第三步',
         step:'在控制界面进行空气源热泵启动和出水温度设置，空气源启动会自动启动相应循环水泵。',
-        hollow: true,
+        type: '',
+        icon:''
       },
       {
         timestamp:'第四步',
         step:'蓄热完成后关闭空气源热泵及水泵。',
-        hollow: false,
+        type: '',
+        icon:''
       }
     ]
   },
@@ -306,7 +322,8 @@ const celueList = ref([
       {
         timestamp:'第一步',
         step:'开启热网循环泵断路器，热网循环泵开启。',
-        hollow: false,
+        type: '',
+        icon:''
       }
     ]
   },
@@ -316,12 +333,14 @@ const celueList = ref([
       {
         timestamp:'第一步',
         step:'开启发热电缆断路器，为发热电缆系统供电。',
-        hollow: false,
+        type: '',
+        icon:''
       },
       {
         timestamp:'第二步',
         step:'调节控制界面，进行发热电缆启停和温度设定。',
-        hollow: false,
+        type: '',
+        icon:''
       }
     ]
   },
@@ -333,8 +352,9 @@ function getStrategyListFun(){
 }
 //选择策略
 const SenceControlArr = ref([])
+let celueItem;
 function selectCeLue(item){
-  console.log(item)
+  celueItem = item
   // for(let i = 0;i < item.flow.length;i++){
   //   item.flow[i].type = 'primary'
   // }
@@ -370,15 +390,56 @@ function selectCeLue(item){
 }
 //执行
 function confirmClick() {
-  ElMessageBox.confirm(`确定执行 ${radio.value} ?`).then(() => {
+  if(SenceControlArr.value.length != 0){
-    drawerIshow.value = false;
+    ElMessage.warning('请先选择策略')
-    getSenceControl(SenceControlArr.value).then((res)=>{
+  }else{
-      if(res.code == 200){
+    ElMessageBox.confirm(`确定执行 ${radio.value} ?`).then(() => {
-        ElMessage.success('策略导入成功')
+      // drawerIshow.value = false;
-        getControlLogListFun()
+      console.log('执行的策略：',celueItem.flow)
-      }
+
+        const loading = ElLoading.service({
+          lock: true,
+          text: '策略执行中，请稍等',
+          background: 'rgba(0, 0, 0, 0.7)',
+        })
+        setTimeout(() => {
+          loading.close()
+        }, celueItem.flow.length * 1000)
+
+      getSenceControl(SenceControlArr.value).then((res)=>{
+        if(res.code == 200){
+          //执行过程
+          function setFlowItem(i) {
+            if (i >= celueItem.flow.length) {
+              return; // 递归终止条件
+            }
+            celueItem.flow[i].type = 'success';
+            celueItem.flow[i].icon = 'Check';
+            setTimeout(function() {
+              setFlowItem(i + 1); // 递归调用
+            }, 1000); // 延迟1秒执行
+          }
+          setFlowItem(0); // 调用递归函数，从数组第一个元素开始赋值
+
+          setTimeout(()=>{
+            ElMessage.success('导入成功')
+          },celueItem.flow.length * 1000)
+          getControlLogListFun()
+        }else{
+          for(let i = 0;i < celueItem.flow.length;i++) {
+            setTimeout(() => {
+              celueItem.flow[i].type = 'warning'
+              celueItem.flow[i].icon = 'Close'
+            },celueItem.flow.length * 1000)
+          }
+          setTimeout(()=>{
+            ElMessage.warning('导入失败')
+          },celueItem.flow.length * 1000)
+        }
+      })
+
     })
-  })
+  }
 }
 
 /** 控制设备启停*/