feat(simulator): mgm模拟页面灯光控制

ui/src/views/hnyzConfiguratePage/MGM/index.vue

@@ -3,57 +3,51 @@
         <HeaderComponent title="烛式过滤器--模拟器"></HeaderComponent>
         <div class="content_page">
             <!-- 左侧操作栏 -->
-            <div class="left_operation">
+            <!-- <div class="left_operation">
                 <el-switch v-model="isControl" active-text="控制" inactive-text="展示" size="large" />
-            </div>
-            <!-- 左下 -->
-            <div class="left_bottom">
-                <el-card class="button_card" shadow="hover">
-                    <template #header>
-                        操作按钮
-                    </template>
-                    <div class="button_grid">
-                        <el-button v-for="n in 6" :key="n" :type="n == lightState?'success':'primary'" class="grid_button" @click="lightControl(n)">
-                            灯控{{ n }}
-                        </el-button>
-                    </div>
-                </el-card>
-            </div>
+            </div> -->
 
 
             <!-- 右下 -->
-            <div class="right_bottom">
+            <div class="left_bottom">
                 <el-card class="button_card" shadow="hover">
                     <template #header>
                         操作按钮
                     </template>
                     <div class="button_grid">
-                        <el-button v-for="n in 6" :key="n" type="primary" class="grid_button" @click="lightControl(n + 6)">
+                        <!-- <el-button v-for="n in 6" :key="n" type="primary" class="grid_button" @click="lightControl(n + 6)">
                             灯控{{ n + 6 }}
-                        </el-button>
+                        </el-button> -->
                         <el-button type="primary" class="grid_button" @click="lightControl(0)">
                             初始化
                         </el-button>
-                        <el-button type="primary" class="grid_button" @click="lightControl(99)">
+                        <!-- <el-button type="primary" class="grid_button" @click="lightControl(99)">
                             连续
+                        </el-button> -->
+                        <!-- 1 -->
+                        <el-button type="danger" class="grid_button" @click="lightSceneControl(1)">
+                            分离模块罐体<br>
+                            液体泄漏
                         </el-button>
-                        <el-button type="success" class="grid_button" @click="lightSceneControl(1)">
-                            正常生产
-                        </el-button>
-                        <el-button type="warning" class="grid_button" @click="lightSceneControl(2)">
-                            分离模块 设备维护
-                        </el-button>
-                        <el-button type="info" class="grid_button" @click="lightSceneControl(3)">
+                        <!-- 2 -->
+                        <el-button type="primary" class="grid_button" @click="lightSceneControl(2)">
+                            料仓加料模块<br>
                             物料短缺
                         </el-button>
-                        <el-button type="danger" class="grid_button" @click="lightSceneControl(4)">
-                            加料模块 3 5 6 待加料
+                        <!-- 3 -->
+                        <el-button type="info" class="grid_button" @click="lightSceneControl(3)">
+                            分离模块罐体<br>
+                            试验测试
                         </el-button>
-                        <el-button type="danger" class="grid_button" @click="lightSceneControl(5)">
-                            分离模块待启动
+                        <!-- 4 -->
+                        <el-button type="warning" class="grid_button" @click="lightSceneControl(4)">
+                            韫珠车间<br>
+                            开关异常
                         </el-button>
-                        <el-button type="primary" class="grid_button" @click="lightSceneControl(6)">
-                            加料模块测试
+                        <!-- 5 -->
+                        <el-button type="primary" class="grid_button" @click="lightSceneControl(5)">
+                            热交换模块<br>
+                            液体开关检修维护
                         </el-button>
                     </div>
                 </el-card>
@@ -106,6 +100,7 @@
 import Arrow from '@/components/HnyzDcs/ArrowComponent.vue';
 import { useValveHelper } from '@/hooks/useValveHelper'
 import { computed, onMounted, onBeforeUnmount, reactive, ref } from 'vue';
+import { useRoute } from 'vue-router';
 import { stompClient } from '@/utils/ws/stompClient';
 import { updateZTPageConfig } from '@/api/dcs/configurePage';
 import { setValues } from '@/api/dcs/flowControl';
@@ -114,7 +109,8 @@ import { openInfoElNotification } from '@/utils/message'
 import { useEquipmentLayout } from '@/hooks/useEquipmentLayout'
 import { useComponentHelper } from '@/hooks/useComponentHelper'
 
-const pageCode = 'MGM';
+const route = useRoute();
+const pageCode = route.name?.toLowerCase();
 const flowId = 9;//当前页面流程Id
 
 // 获取设备布局
@@ -263,7 +259,7 @@ const lightColor = [
     'ffa500', // 3 橙色 告警/预警
     '0000ff', // 4 蓝色 物料请求/投料
     '800080', // 5 紫色 质检/审核
-    'ff69b4', // 6 彩虹色 粉色识别为彩虹色
+    'ff69b4', // 6 彩虹色 粉色识别为彩虹色 测试/实验
     '00ffff', // 7 青色 待启动
     'ffff00'  // 8 黄色 保养中
 ]
@@ -279,60 +275,27 @@ const lightScene = [
         {id: 5, color: 6}, {id: 11, color: 6},
         {id: 6, color: 6}, {id: 12, color: 6}
     ],
-    // 情景1：正常生产状态
+    // 情景1：分离模块罐体液体泄露
     [
-        {id: 1, color: 1}, {id: 7, color: 1},
-        {id: 2, color: 1}, {id: 8, color: 1},
-        {id: 3, color: 1}, {id: 9, color: 1},
-        {id: 4, color: 1}, {id: 10, color: 1},
-        {id: 5, color: 1}, {id: 11, color: 1},
-        {id: 6, color: 1}, {id: 12, color: 1}
+        {id: 10, color: 2}, {id: 4, color: 2},
+        {id: 6, color: 2},
     ],
-    // 情景2：分离模块 设备维护状态
+    // 情景2：料仓加料模块的物料短缺
     [
-        {id: 1, color: 1}, {id: 7, color: 7},
-        {id: 2, color: 1}, {id: 8, color: 8},
-        {id: 3, color: 8}, {id: 9, color: 7},
-        {id: 4, color: 1}, {id: 10, color: 8},
-        {id: 5, color: 1}, {id: 11, color: 8},
-        {id: 6, color: 1}, {id: 12, color: 7}
+        {id: 12, color: 4}, {id: 5, color: 4},
     ],
-    // 情景3：物料短缺告警
+    // 情景3：分离模块罐体1进行试验测试
     [
-        {id: 1, color: 1}, {id: 7, color: 7},
-        {id: 2, color: 1}, {id: 8, color: 4},
-        {id: 3, color: 1}, {id: 9, color: 3},
-        {id: 4, color: 1}, {id: 10, color: 4},
-        {id: 5, color: 3}, {id: 11, color: 3},
-        {id: 6, color: 1}, {id: 12, color: 1}
+        {id: 10, color: 6}, {id: 3, color: 6},
     ],
-    // 加料模块 3 5 6 待加料
+    // 情景4：韫珠车间开关异常
     [
-        {id: 1, color: 1}, {id: 7, color: 1},
-        {id: 2, color: 1}, {id: 8, color: 1},
-        {id: 3, color: 1}, {id: 9, color: 4},
-        {id: 4, color: 1}, {id: 10, color: 1},
-        {id: 5, color: 4}, {id: 11, color: 4},
-        {id: 6, color: 1}, {id: 12, color: 4}
+        {id: 8, color: 3}, {id: 1, color: 3},
     ],
-    // 情景5：分离模块 待启动
+    // 情景5：热交换模块液体开关检修维护
     [
-        {id: 1, color: 1}, {id: 7, color: 7},
-        {id: 2, color: 1}, {id: 8, color: 7},
-        {id: 3, color: 7}, {id: 9, color: 7},
-        {id: 4, color: 1}, {id: 10, color: 7},
-        {id: 5, color: 1}, {id: 11, color: 7},
-        {id: 6, color: 1}, {id: 12, color: 7}
+        {id: 8, color: 7}, {id: 3, color: 7},
     ],
-    // 情景6：加料模块 全线测试
-    [
-        {id: 1, color: 1}, {id: 7, color: 6},
-        {id: 2, color: 1}, {id: 8, color: 6},
-        {id: 3, color: 1}, {id: 9, color: 6},
-        {id: 4, color: 1}, {id: 10, color: 6},
-        {id: 5, color: 6}, {id: 11, color: 6},
-        {id: 6, color: 1}, {id: 12, color: 6}
-    ]
 ]
 function lightControl(e, colorItem) {
     if (e == 0) {
@@ -480,6 +443,11 @@ function clickValves(code) {
             }
         }
 
+        .left_bottom {
+            bottom: 70%;
+            left: 3%;
+        }
+
         .right_bottom{
             left: unset;
             right: 10%;