更新

src/views/vent/monitorManager/alarmMonitor/common/gasCcb.vue

@@ -1,157 +1,167 @@
 <template>
-    <div class="gas-ccb">
-        <div class="top-box" v-if="typeData.includes('pump_under')">
-            <div class="box-label">{{ pumpUnder.label }}</div>
-            <div class="box-values">
-                <div class="value-b" v-for="(items, ind) in pumpUnder.data" :key="ind">
-                    <span>{{ `${items.name} : ` }}</span>
-                    <span :class="{
-                        'box-value': items.val == 0 && items.name == '报警状态',
-                        'box-value1': items.val == 101 && items.name == '报警状态',
-                        'box-value2': items.val == 102 && items.name == '报警状态',
-                        'box-value3': items.val == 103 && items.name == '报警状态',
-                        'box-value4': items.val == 104 && items.name == '报警状态',
-                        'box-value5': (items.val == 201) && items.name == '报警状态',
-                    }">{{
-                        items.val == 0 && items.name == '报警状态'
-                            ? '正常'
-                            : items.val == 101 && items.name == '报警状态'
-                                ? '较低风险'
-                                : items.val == 102 && items.name == '报警状态'
-                                    ? '低风险'
-                                    : items.val == 103 && items.name == '报警状态'
-                                        ? '中风险'
-                                        : items.val == 104 && items.name == '报警状态'
-                                            ? '高风险'
-                                            : items.val == 201 && items.name == '报警状态'
-                                                ? '报警'
-                                                : items.val == 1001 && items.name == '报警状态'
-                                                    ? '网络断开'
-                                                    : items.val
-                    }}</span>
-                </div>
-            </div>
+  <div class="gas-ccb">
+    <div class="top-box" v-if="typeData.includes('pump_under')">
+      <div class="box-label">{{ pumpUnder.label }}</div>
+      <div class="box-values">
+        <div class="value-b" v-for="(items, ind) in pumpUnder.data" :key="ind">
+          <span>{{ `${items.name} : ` }}</span>
+          <span
+            :class="{
+              'box-value': items.val == 0 && items.name == '报警状态',
+              'box-value1': items.val == 101 && items.name == '报警状态',
+              'box-value2': items.val == 102 && items.name == '报警状态',
+              'box-value3': items.val == 103 && items.name == '报警状态',
+              'box-value4': items.val == 104 && items.name == '报警状态',
+              'box-value5': items.val == 201 && items.name == '报警状态',
+            }"
+            >{{
+              items.val == 0 && items.name == '报警状态'
+                ? '正常'
+                : items.val == 101 && items.name == '报警状态'
+                  ? '较低风险'
+                  : items.val == 102 && items.name == '报警状态'
+                    ? '低风险'
+                    : items.val == 103 && items.name == '报警状态'
+                      ? '中风险'
+                      : items.val == 104 && items.name == '报警状态'
+                        ? '高风险'
+                        : items.val == 201 && items.name == '报警状态'
+                          ? '报警'
+                          : items.val == 1001 && items.name == '报警状态'
+                            ? '网络断开'
+                            : items.val
+            }}</span
+          >
         </div>
+      </div>
+    </div>
 
-        <div class="top-box" v-if="typeData.includes('pump_over')">
-            <div class="box-label">{{ pumpOver.label }}</div>
-            <div class="box-values">
-                <div class="value-b" v-for="(items, ind) in pumpOver.data" :key="ind">
-                    <span>{{ `${items.name} : ` }}</span>
-                    <span :class="{
-                        'box-value': items.val == 0 && items.name == '报警状态',
-                        'box-value1': items.val == 101 && items.name == '报警状态',
-                        'box-value2': items.val == 102 && items.name == '报警状态',
-                        'box-value3': items.val == 103 && items.name == '报警状态',
-                        'box-value4': items.val == 104 && items.name == '报警状态',
-                        'box-value5': (items.val == 201) && items.name == '报警状态',
-                    }">{{
-                        items.val == 0 && items.name == '报警状态'
-                            ? '正常'
-                            : items.val == 101 && items.name == '报警状态'
-                                ? '较低风险'
-                                : items.val == 102 && items.name == '报警状态'
-                                    ? '低风险'
-                                    : items.val == 103 && items.name == '报警状态'
-                                        ? '中风险'
-                                        : items.val == 104 && items.name == '报警状态'
-                                            ? '高风险'
-                                            : items.val == 201 && items.name == '报警状态'
-                                                ? '报警'
-                                                : items.val == 1001 && items.name == '报警状态'
-                                                    ? '网络断开'
-                                                    : items.val
-                    }}</span>
-                </div>
-            </div>
+    <div class="top-box" v-if="typeData.includes('pump_under_31')">
+      <div class="box-label">{{ pumpOver.label }}</div>
+      <div class="box-values">
+        <div class="value-b" v-for="(items, ind) in pumpOver.data" :key="ind">
+          <span>{{ `${items.name} : ` }}</span>
+          <span
+            :class="{
+              'box-value': items.val == 0 && items.name == '报警状态',
+              'box-value1': items.val == 101 && items.name == '报警状态',
+              'box-value2': items.val == 102 && items.name == '报警状态',
+              'box-value3': items.val == 103 && items.name == '报警状态',
+              'box-value4': items.val == 104 && items.name == '报警状态',
+              'box-value5': items.val == 201 && items.name == '报警状态',
+            }"
+            >{{
+              items.val == 0 && items.name == '报警状态'
+                ? '正常'
+                : items.val == 101 && items.name == '报警状态'
+                  ? '较低风险'
+                  : items.val == 102 && items.name == '报警状态'
+                    ? '低风险'
+                    : items.val == 103 && items.name == '报警状态'
+                      ? '中风险'
+                      : items.val == 104 && items.name == '报警状态'
+                        ? '高风险'
+                        : items.val == 201 && items.name == '报警状态'
+                          ? '报警'
+                          : items.val == 1001 && items.name == '报警状态'
+                            ? '网络断开'
+                            : items.val
+            }}</span
+          >
         </div>
+      </div>
     </div>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref, watch, reactive } from 'vue'
-import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
+  import { onMounted, ref, watch, reactive } from 'vue';
+  import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
 
-let props = defineProps({
+  let props = defineProps({
     gasData: {
-        type: Object,
-        default: () => {
-            return {}
-        }
-    }
-})
-let typeData = ref<any[]>([])
-let pumpUnder = reactive({})
-let pumpOver = reactive({})
-
-
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+  });
+  let typeData = ref<any[]>([]);
+  let pumpUnder = reactive({});
+  let pumpOver = reactive({});
 
+  watch(
+    () => props.gasData,
+    (newV, oldV) => {
+      console.log(newV, 'ccc---');
+      let data = newV.pump;
 
-watch(() => props.gasData, (newV, oldV) => {
-    console.log(newV, 'ccc---')
-    let data = newV.pump
-
-    if (data && data.length != 0) {
-        typeData.value = data.map(v => v.deviceType)
+      if (data && data.length != 0) {
+        typeData.value = data.map((v) => v.deviceType);
 
         let list = {
-            label: '',
-            data: []
-        }
+          label: '',
+          data: [],
+        };
         if (typeData.value.includes('pump_under')) {
-            let labelData = getTableHeaderColumns('pump_under_monitor')
-            let param = labelData.map((el: any) => {
-                return {
-                    name: el.title, val: el.dataIndex
-                }
-            })
-            let filterData = data.filter(v => v.deviceType == 'pump_under')[0]
-            list.label = filterData.strinstallpos
-            list.data = param.map(item => {
-                return {
-                    name: item.name, val: filterData.readData[item.val] && filterData.readData[item.val] != '0' ? filterData.readData[item.val] : '-'
-                }
-            })
-            pumpUnder = Object.assign({}, list)
-        } else if (typeData.value.includes('pump_over')) {
-            let labelData = getTableHeaderColumns('pump_over_monitor')
-            let param = labelData.map((el: any) => {
-                return {
-                    name: el.title, val: el.dataIndex
-                }
-            })
-            let filterData = data.filter(v => v.deviceType == 'pump_over')[0]
-            list.label = filterData.strinstallpos
-            list.data = param.map(item => {
-                return {
-                    name: item.name, val: filterData.readData[item.val] && filterData.readData[item.val] != '0' ? filterData.readData[item.val] : '-'
-                }
-            })
-            pumpOver = Object.assign({}, list)
+          let labelData = getTableHeaderColumns('pump_under_monitor');
+          let param = labelData.map((el: any) => {
+            return {
+              name: el.title,
+              val: el.dataIndex,
+            };
+          });
+          let filterData = data.filter((v) => v.deviceType == 'pump_under')[0];
+          list.label = filterData.strinstallpos;
+          list.data = param.map((item) => {
+            return {
+              name: item.name,
+              val: filterData.readData[item.val] && filterData.readData[item.val] != '0' ? filterData.readData[item.val] : '-',
+            };
+          });
+          pumpUnder = Object.assign({}, list);
+        } else if (typeData.value.includes('pump_under_31')) {
+          let labelData = getTableHeaderColumns('pump_under_31_monitor');
+          let param = labelData.map((el: any) => {
+            return {
+              name: el.title,
+              val: el.dataIndex,
+            };
+          });
+          let filterData = data.filter((v) => v.deviceType == 'pump_under_31')[0];
+          list.label = filterData.strinstallpos;
+          list.data = param.map((item) => {
+            return {
+              name: item.name,
+              val: filterData.readData[item.val] && filterData.readData[item.val] != '0' ? filterData.readData[item.val] : '-',
+            };
+          });
+          pumpOver = Object.assign({}, list);
         }
+      }
+    },
+    { immediate: true }
+  );
 
-    }
-}, { immediate: true })
-
-onMounted(() => {
+  onMounted(() => {
     // initTitle()
-})
+  });
 </script>
 
 <style lang="less" scoped>
-@import '/@/design/theme.less';
+  @import '/@/design/theme.less';
 
-@{theme-deepblue} {
+  @{theme-deepblue} {
     .gas-ccb {
-        --image-no-choice: url('/@/assets/images/themify/deepblue/fire/no-choice.png');
-        --image-choice: url('/@/assets/images/themify/deepblue/fire/choice.png');
-        --image-border: url('/@/assets/images/themify/deepblue/fire/border.png');
-        --image-bj1: url('/@/assets/images/themify/deepblue/fire/bj1.png');
-        --image-top-area: url('/@/assets/images/themify/deepblue/fire/top-area.png');
+      --image-no-choice: url('/@/assets/images/themify/deepblue/fire/no-choice.png');
+      --image-choice: url('/@/assets/images/themify/deepblue/fire/choice.png');
+      --image-border: url('/@/assets/images/themify/deepblue/fire/border.png');
+      --image-bj1: url('/@/assets/images/themify/deepblue/fire/bj1.png');
+      --image-top-area: url('/@/assets/images/themify/deepblue/fire/top-area.png');
     }
-}
+  }
 
-.gas-ccb {
+  .gas-ccb {
     --image-no-choice: url('/@/assets/images/fire/no-choice.png');
     --image-choice: url('/@/assets/images/fire/choice.png');
     --image-border: url('/@/assets/images/fire/border.png');
@@ -167,85 +177,81 @@ onMounted(() => {
     box-sizing: border-box;
 
     .top-box {
-        position: relative;
-        width: 724px;
-        height: 100%;
-        background: var(--image-top-area) no-repeat center;
-        background-size: 100% 100%;
-
-        .box-label {
-            position: absolute;
-            left: 50%;
-            top: 198px;
-            transform: translate(-50%, 0);
-            width: 80%;
-            font-family: 'douyuFont';
-            font-size: 16px;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            word-wrap: break-word;
-            color: #fff;
-        }
+      position: relative;
+      width: 724px;
+      height: 100%;
+      background: var(--image-top-area) no-repeat center;
+      background-size: 100% 100%;
 
-        .box-values {
-            position: absolute;
-            left: 50%;
-            top: 26px;
-            transform: translate(-50%, 0);
-            width: 84%;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            flex-wrap: wrap;
-
-            .value-b {
-                width: calc(50% - 10px);
-                height: 25px;
-                display: flex;
-                justify-content: space-between;
-                align-items: center;
-                color: #fff;
-                font-size: 14px;
-
-                span {
-                    font-size: 14px;
-
-                    &:last-child {
-                        font-family: 'douyuFont';
-                        color: var(--vent-table-action-link);
-                    }
-                }
-
-                .box-value {
-                    color: rgb(145, 230, 9) !important;
-                }
-
-                .box-value1 {
-                    color: var(--vent-table-action-link) !important;
-                }
-
-                .box-value2 {
-                    color: #ffff35 !important;
-                }
-
-                .box-value3 {
-                    color: #ffbe69 !important;
-                }
-
-                .box-value4 {
-                    color: #ff6f00 !important;
-                }
-
-                .box-value5 {
-                    color: #ff0000 !important;
-                }
+      .box-label {
+        position: absolute;
+        left: 50%;
+        top: 198px;
+        transform: translate(-50%, 0);
+        width: 80%;
+        font-family: 'douyuFont';
+        font-size: 16px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        word-wrap: break-word;
+        color: #fff;
+      }
+
+      .box-values {
+        position: absolute;
+        left: 50%;
+        top: 26px;
+        transform: translate(-50%, 0);
+        width: 84%;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        flex-wrap: wrap;
+
+        .value-b {
+          width: calc(50% - 10px);
+          height: 25px;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          color: #fff;
+          font-size: 14px;
+
+          span {
+            font-size: 14px;
+
+            &:last-child {
+              font-family: 'douyuFont';
+              color: var(--vent-table-action-link);
             }
-        }
-    }
+          }
+
+          .box-value {
+            color: rgb(145, 230, 9) !important;
+          }
+
+          .box-value1 {
+            color: var(--vent-table-action-link) !important;
+          }
 
+          .box-value2 {
+            color: #ffff35 !important;
+          }
 
+          .box-value3 {
+            color: #ffbe69 !important;
+          }
 
+          .box-value4 {
+            color: #ff6f00 !important;
+          }
 
-}
-</style>
+          .box-value5 {
+            color: #ff0000 !important;
+          }
+        }
+      }
+    }
+  }
+</style>

src/views/vent/monitorManager/groutMonitor/components/groutHomehlg.vue

@@ -1,538 +1,536 @@
 <template>
-    <div class="monitor-container">
-      <div class="area-box lr-box">
-        <div class="item item-l" v-for="groupNum in monitorDataGroupNum" :key="groupNum">
-          <ventBox1>
-            <template #title>
-              <div>注浆站输出监测</div>
-            </template>
-            <template #container>
-              <div class="monitor-box">
-                <div class="monitor-item">
-                  <div class="state-item" v-for="(preFan, index) in groutFanMonitorDataHlg" :key="index">
-                    <div class="state-title">{{ preFan.title }}</div>
-                    <div v-if="preFan.unit !== 'signal'" class="state-val">{{
-                      monitorData[preFan.code] >= 0 ? formatNum(Number(monitorData[preFan.code])) : '-'
-                    }}</div>
-                      <div
-                      v-else-if="preFan.code=='Running'"
-                      :class="{
-                        'signal-round': true,
-                        'signal-round-warning': monitorData[preFan.code] == '0',
-                        'signal-round-run': monitorData[preFan.code] == '1',
-                        'signal-round-gry': monitorData[preFan.code] != '0' && monitorData[preFan.code] != '1',
-                      }"
-                    ></div>
-                    <div
-                      v-else
-                      :class="{
-                        'signal-round': true,
-                        'signal-round-warning': monitorData[preFan.code] == '1',
-                        'signal-round-run': monitorData[preFan.code] == '0',
-                        'signal-round-gry': monitorData[preFan.code] != '0' && monitorData[preFan.code] != '1',
-                      }"
-                    ></div>
-                  </div>
+  <div class="monitor-container">
+    <div class="area-box lr-box">
+      <div class="item item-l" v-for="groupNum in monitorDataGroupNum" :key="groupNum">
+        <ventBox1>
+          <template #title>
+            <div>注浆站输出监测</div>
+          </template>
+          <template #container>
+            <div class="monitor-box">
+              <div class="monitor-item">
+                <div class="state-item" v-for="(preFan, index) in groutFanMonitorDataHlg" :key="index">
+                  <div class="state-title">{{ preFan.title }}</div>
+                  <div v-if="preFan.unit !== 'signal'" class="state-val">{{
+                    monitorData[preFan.code] >= 0 ? formatNum(Number(monitorData[preFan.code])) : '-'
+                  }}</div>
+                  <div
+                    v-else-if="preFan.code == 'Running'"
+                    :class="{
+                      'signal-round': true,
+                      'signal-round-warning': monitorData[preFan.code] == '0',
+                      'signal-round-run': monitorData[preFan.code] == '1',
+                      'signal-round-gry': monitorData[preFan.code] != '0' && monitorData[preFan.code] != '1',
+                    }"
+                  ></div>
+                  <div
+                    v-else
+                    :class="{
+                      'signal-round': true,
+                      'signal-round-warning': monitorData[preFan.code] == '1',
+                      'signal-round-run': monitorData[preFan.code] == '0',
+                      'signal-round-gry': monitorData[preFan.code] != '0' && monitorData[preFan.code] != '1',
+                    }"
+                  ></div>
                 </div>
               </div>
-            </template>
-          </ventBox1>
-        </div>
-      </div>
-      <div class="header-box">
-        <div class="header-container">
-          <div class="device-detail">
-            <div class="device-title">&nbsp</div>
-            <div class="device-val">故障代码</div>
-            <div class="device-val">警告代码</div>
-          </div>
-          <div v-for="(device, key) in deviceMonitorListHlg" class="device-detail" :key="key">
-            <div class="device-title">{{ device.title }}</div>
-            <div v-for="(detailItem, index) in device.dataList" :key="detailItem.code" class="device-val">
-              <span v-if="index == 0" :style="{ color: monitorData[detailItem.code] == '0' ? '#BFBFBF' : '#10BC79' }">{{
-                monitorData[detailItem.code] 
-              }}</span>
-              <span v-if="index == 1" :style="{ color: monitorData[detailItem.code] == '0' ? '#BFBFBF' : '#10BC79' }">{{
-                monitorData[detailItem.code]
-              }}</span>
-            
             </div>
+          </template>
+        </ventBox1>
+      </div>
+    </div>
+    <div class="header-box">
+      <div class="header-container">
+        <div class="device-detail">
+          <div class="device-title">&nbsp</div>
+          <div class="device-val">故障代码</div>
+          <div class="device-val">警告代码</div>
+        </div>
+        <div v-for="(device, key) in deviceMonitorListHlg" class="device-detail" :key="key">
+          <div class="device-title">{{ device.title }}</div>
+          <div v-for="(detailItem, index) in device.dataList" :key="detailItem.code" class="device-val">
+            <span v-if="index == 0" :style="{ color: monitorData[detailItem.code] == '0' ? '#BFBFBF' : '#10BC79' }">{{
+              monitorData[detailItem.code]
+            }}</span>
+            <span v-if="index == 1" :style="{ color: monitorData[detailItem.code] == '0' ? '#BFBFBF' : '#10BC79' }">{{
+              monitorData[detailItem.code]
+            }}</span>
           </div>
         </div>
       </div>
-     
-  
-      <div ref="playerRef" style="z-index: 9999; position: absolute; top: 0px; right: 15px; height: 100%; margin: auto; pointer-events: none"> </div>
     </div>
-  </template>
-  
-  <script setup lang="ts">
-    import { watch, ref, onMounted, onUnmounted, defineProps, reactive } from 'vue';
-    import ventBox1 from '/@/components/vent/ventBox1.vue';
-    import { mountedThree, destroy, setModelType } from '../grout.threejs';
-    import { formatNum } from '/@/utils/ventutil';
-    import { deviceMonitorListHlg, groutFanMonitorDataHlg } from '../grout.data';
-    import { device } from '../grout.api';
-    import { useCamera } from '/@/hooks/system/useCamera';
-  
-    const props = defineProps({
-      deviceId: {
-        type: String,
-        require: true,
-      },
-      deviceType: {
-        type: String,
-        require: true,
-      },
-    });
-  
-    let monitorDataGroupNum = ref(1);
-  
-    const loading = ref(false);
-    const monitorData = ref({});
-  
-    const playerRef = ref();
-    const { getCamera, removeCamera } = useCamera();
-  
-    // https获取监测数据
-    let timer: null | NodeJS.Timeout = null;
-    function getMonitor(flag?) {
-      if (Object.prototype.toString.call(timer) === '[object Null]') {
-        return new Promise((resolve) => {
-          timer = setTimeout(
-            async () => {
-              if (props.deviceId) {
-                await getDataSource(props.deviceId);
-              }
-              if (timer) {
-                timer = null;
-              }
-              resolve(null);
-              await getMonitor();
-            },
-            flag ? 0 : 1000
-          );
-        });
-      }
-    }
-  
-    async function getDataSource(systemID) {
-      // const res = await list({ devicetype: 'pulping_auto', systemID, pagetype: 'normal' });
-      const res = await device({ devicetype: 'pulping', pagetype: 'normal' });
-    if(res && res.result.msgTxt[0]){
-        const result = res.result.msgTxt[0];
-        if (result.type.startsWith('pulping')) {
-          monitorData.value = Object.assign(result['datalist'][0], result['datalist'][0]['readData']);
-        }
-        loading.value = false;
-    }else {
-        monitorData.value={}
+
+    <div ref="playerRef" style="z-index: 9999; position: absolute; top: 0px; right: 15px; height: 100%; margin: auto; pointer-events: none"> </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { watch, ref, onMounted, onUnmounted, defineProps, reactive } from 'vue';
+  import ventBox1 from '/@/components/vent/ventBox1.vue';
+  import { mountedThree, destroy, setModelType } from '../grout.threejs';
+  import { formatNum } from '/@/utils/ventutil';
+  import { deviceMonitorListHlg, groutFanMonitorDataHlg } from '../grout.data';
+  import { device } from '../grout.api';
+  import { useCamera } from '/@/hooks/system/useCamera';
+
+  const props = defineProps({
+    deviceId: {
+      type: String,
+      require: true,
+    },
+    deviceType: {
+      type: String,
+      require: true,
+    },
+  });
+
+  let monitorDataGroupNum = ref(1);
+
+  const loading = ref(false);
+  const monitorData = ref({});
+
+  const playerRef = ref();
+  const { getCamera, removeCamera } = useCamera();
+
+  // https获取监测数据
+  let timer: null | NodeJS.Timeout = null;
+  function getMonitor(flag?) {
+    if (Object.prototype.toString.call(timer) === '[object Null]') {
+      return new Promise((resolve) => {
+        timer = setTimeout(
+          async () => {
+            if (props.deviceId) {
+              // await getDataSource(props.deviceId);
+              await getDataSource();
+            }
+            if (timer) {
+              timer = null;
+            }
+            resolve(null);
+            await getMonitor();
+          },
+          flag ? 0 : 1000
+        );
+      });
     }
+  }
+
+  async function getDataSource() {
+    // const res = await list({ devicetype: 'pulping_auto', systemID, pagetype: 'normal' });
+    const res = await device({ devicetype: 'pulping', pagetype: 'normal' });
+    if (res && res.msgTxt[0]) {
+      const result = res.msgTxt[0];
+      if (result.type.startsWith('pulping')) {
+        monitorData.value = Object.assign(result['datalist'][0], result['datalist'][0]['readData']);
+      }
+      loading.value = false;
+    } else {
+      monitorData.value = {};
     }
-  
-    watch(
-      () => props.deviceId,
-      async (deviceId) => {
-        if (deviceId) {
-          await getCamera(deviceId, playerRef.value, 'pulping');
-        }
+  }
+
+  watch(
+    () => props.deviceId,
+    async (deviceId) => {
+      if (deviceId) {
+        await getCamera(deviceId, playerRef.value, 'pulping');
       }
-    );
-  
-    onMounted(() => {
-      getMonitor(true)?.then(async () => {
-        if (props.deviceId) await getCamera(props.deviceId, playerRef.value, 'pulping');
-      });
-      loading.value = true;
-      mountedThree().then(async () => {
-        // await setModelType('groutBase');
-        await setModelType('bertaiBase');
-        loading.value = false;
-        timer = null;
-      });
+    }
+  );
+
+  onMounted(() => {
+    getMonitor(true)?.then(async () => {
+      if (props.deviceId) await getCamera(props.deviceId, playerRef.value, 'pulping');
     });
-    onUnmounted(() => {
-      destroy();
-      removeCamera();
-      if (timer) {
-        clearTimeout(timer);
-        timer = undefined;
-      }
+    loading.value = true;
+    mountedThree().then(async () => {
+      // await setModelType('groutBase');
+      await setModelType('bertaiBase');
+      loading.value = false;
+      timer = null;
     });
-  </script>
-  <style lang="less" scoped>
-    @import '/@/design/theme.less';
-    @import '/@/design/vent/modal.less';
-    @ventSpace: zxm;
-  
-    @{theme-deepblue} {
-      .monitor-container {
-        --box-shadow: #316b92;
-        --border-color: #0a80fad4;
-      }
+  });
+  onUnmounted(() => {
+    destroy();
+    removeCamera();
+    if (timer) {
+      clearTimeout(timer);
+      timer = undefined;
     }
-  
+  });
+</script>
+<style lang="less" scoped>
+  @import '/@/design/theme.less';
+  @import '/@/design/vent/modal.less';
+  @ventSpace: zxm;
+
+  @{theme-deepblue} {
     .monitor-container {
-      --box-shadow: #0099b8;
-      --border-color: #00baffd4;
-      position:relative;
-      width: 100%;
-      height: 100%;
-      // height: 550px;
-      // border: 1px solid #fff;
-      margin-top: 80px;
+      --box-shadow: #316b92;
+      --border-color: #0a80fad4;
+    }
+  }
+
+  .monitor-container {
+    --box-shadow: #0099b8;
+    --border-color: #00baffd4;
+    position: relative;
+    width: 100%;
+    height: 100%;
+    // height: 550px;
+    // border: 1px solid #fff;
+    margin-top: 80px;
     //   display: flex;
     //   justify-content: space-between;
-      // justify-content: center;
-      padding: 0 5px;
-  
-      .header-box {
-        position:absolute;
-        bottom:20px;
-        left:50%;
-        transform:translate(-50%,0%);
-        // margin: 50px 15px 0px 15px;
-  
-        .header-container {
-          height: auto;
-          display: flex;
-          flex-direction: row;
-          justify-content: center;
-          color: #fff;
-          box-shadow: 0 0 30px var(--box-shadow) inset;
-          margin-top: 500px;
+    // justify-content: center;
+    padding: 0 5px;
+
+    .header-box {
+      position: absolute;
+      bottom: 20px;
+      left: 50%;
+      transform: translate(-50%, 0%);
+      // margin: 50px 15px 0px 15px;
+
+      .header-container {
+        height: auto;
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        color: #fff;
+        box-shadow: 0 0 30px var(--box-shadow) inset;
+        margin-top: 500px;
+      }
+
+      .device-title {
+        width: 130px;
+        text-align: center;
+        border-top: 1px solid var(--border-color);
+        border-left: 1px solid var(--border-color);
+        line-height: 46px;
+        color: var(--vent-table-action-link);
+        background-color: #00bbff21;
+        backdrop-filter: blur(5px);
+      }
+
+      .device-detail {
+        text-align: center;
+
+        &:first-child {
+          background-color: #00bbff11;
         }
-  
-        .device-title {
-          width: 130px;
-          text-align: center;
+
+        &:last-child {
+          .device-val,
+          .device-title {
+            border-right: 1px solid var(--border-color);
+          }
+        }
+
+        .device-val {
+          line-height: 36px;
           border-top: 1px solid var(--border-color);
           border-left: 1px solid var(--border-color);
-          line-height: 46px;
-          color: var(--vent-table-action-link);
-          background-color: #00bbff21;
-          backdrop-filter: blur(5px);
-        }
-  
-        .device-detail {
-          text-align: center;
-  
-          &:first-child {
-            background-color: #00bbff11;
-          }
-  
+
           &:last-child {
-            .device-val,
-            .device-title {
-              border-right: 1px solid var(--border-color);
-            }
-          }
-  
-          .device-val {
-            line-height: 36px;
-            border-top: 1px solid var(--border-color);
-            border-left: 1px solid var(--border-color);
-  
-            &:last-child {
-              border-bottom: 1px solid var(--border-color);
-            }
+            border-bottom: 1px solid var(--border-color);
           }
         }
       }
-  
-      .lr-box {
-        height: 100%;
+    }
+
+    .lr-box {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      position: relative;
+      // overflow: hidden;
+      z-index: 9999;
+      pointer-events: auto;
+      overflow-y: auto;
+      overflow-x: hidden;
+    }
+
+    .area-box {
+      width: 335px;
+      margin-top: 50px;
+
+      .input-item {
         display: flex;
-        flex-direction: column;
+        justify-content: space-between;
+        align-items: center;
+        padding: 4px 8px;
+        margin: 6px 0;
+        background-image: linear-gradient(to right, #39deff15, #3977e500);
+
+        .title {
+          width: 200px;
+        }
+
+        .title-auto {
+          width: auto;
+        }
+
+        .input-value {
+          width: 80px;
+          height: 28px;
+          line-height: 28px !important;
+          background: transparent !important;
+          border-color: #228da2 !important;
+          color: #fff !important;
+        }
+
+        .value {
+          width: 100px;
+          color: #00d8ff;
+          padding-right: 20px;
+        }
+
+        .unit {
+          width: 80px;
+        }
+      }
+    }
+
+    .item {
+      width: 305px;
+      height: 450px;
+      position: relative;
+      border-radius: 5px;
+      margin-top: 10px;
+      margin-bottom: 0px;
+      pointer-events: auto;
+      color: #fff;
+      // overflow: hidden;
+
+      &:first-child {
+        margin-top: 0px;
+      }
+
+      .base-title {
+        color: #fff;
+        margin-bottom: 8px;
+        padding-left: 10px;
         position: relative;
-        // overflow: hidden;
-        z-index: 9999;
-        pointer-events: auto;
-        overflow-y: auto;
-        overflow-x: hidden;
+        font-size: 16px;
+
+        &::after {
+          content: '';
+          position: absolute;
+          display: block;
+          width: 4px;
+          height: 12px;
+          top: 7px;
+          left: 0px;
+          background: #45d3fd;
+          border-radius: 4px;
+        }
       }
-  
-      .area-box {
-        width: 335px;
-        margin-top: 50px;
-  
-        .input-item {
+
+      .monitor-item {
+        width: 100%;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+
+        .state-item {
+          width: 50%;
+          padding: 5px;
           display: flex;
-          justify-content: space-between;
           align-items: center;
-          padding: 4px 8px;
-          margin: 6px 0;
-          background-image: linear-gradient(to right, #39deff15, #3977e500);
-  
-          .title {
-            width: 200px;
-          }
-  
-          .title-auto {
-            width: auto;
-          }
-  
-          .input-value {
-            width: 80px;
-            height: 28px;
-            line-height: 28px !important;
-            background: transparent !important;
-            border-color: #228da2 !important;
-            color: #fff !important;
-          }
-  
-          .value {
+          justify-content: space-between;
+
+          .state-title {
             width: 100px;
-            color: #00d8ff;
-            padding-right: 20px;
+            color: #ffffffdd;
+            flex: 9;
+            font-size: 14px;
+
+            .unit {
+              // color: #ffffffbb;
+            }
           }
-  
-          .unit {
-            width: 80px;
+
+          .state-val {
+            flex: 1;
+            color: #e4a300;
+            margin-right: 5px;
+            text-align: right;
+            font-size: 14px;
           }
         }
       }
-  
-      .item {
-        width: 305px;
-        height: 450px;
-        position: relative;
-        border-radius: 5px;
-        margin-top: 10px;
-        margin-bottom: 0px;
-        pointer-events: auto;
-        color: #fff;
-        // overflow: hidden;
-  
-        &:first-child {
-          margin-top: 0px;
+
+      .signal-box {
+        margin: 5px 0;
+        display: flex;
+        align-items: center;
+
+        .signal-title {
+          color: #7af5ff;
+          margin: 0 5px;
         }
-  
-        .base-title {
-          color: #fff;
-          margin-bottom: 8px;
-          padding-left: 10px;
-          position: relative;
-          font-size: 16px;
-  
-          &::after {
-            content: '';
-            position: absolute;
-            display: block;
-            width: 4px;
-            height: 12px;
-            top: 7px;
-            left: 0px;
-            background: #45d3fd;
-            border-radius: 4px;
-          }
+
+        &:last-child {
+          margin-right: 0px;
         }
-  
-        .monitor-item {
-          width: 100%;
-          display: flex;
-          flex-direction: row;
-          flex-wrap: wrap;
-  
-          .state-item {
-            width: 50%;
-            padding: 5px;
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-  
-            .state-title {
-              width: 100px;
-              color: #ffffffdd;
-              flex: 9;
-              font-size: 14px;
-  
-              .unit {
-                // color: #ffffffbb;
-              }
-            }
-  
-            .state-val {
-              flex: 1;
-              color: #e4a300;
-              margin-right: 5px;
-              text-align: right;
-              font-size: 14px;
-            }
-          }
+      }
+
+      .list-item {
+        padding: 0 10px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .item-data-key {
+          color: #ffffff99;
         }
-  
-        .signal-box {
-          margin: 5px 0;
-          display: flex;
-          align-items: center;
-  
-          .signal-title {
-            color: #7af5ff;
-            margin: 0 5px;
-          }
-  
-          &:last-child {
-            margin-right: 0px;
-          }
+      }
+
+      .item-data-box {
+        color: #fff;
+
+        .state-icon {
+          display: inline-block;
+          width: 12px;
+          height: 12px;
+          border-radius: 12px;
         }
-  
-        .list-item {
-          padding: 0 10px;
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-  
-          .item-data-key {
-            color: #ffffff99;
+
+        .open {
+          border: 5px solid #133a56;
+          background: #4ecb73;
+        }
+
+        .close {
+          border: 5px solid #192961;
+          background: #6d7898;
+        }
+      }
+    }
+
+    .item-l {
+      width: 100%;
+
+      .monitor-box {
+        width: 100%;
+
+        .parameter-title {
+          position: relative;
+          width: 100%;
+          height: 14px;
+          margin-top: 10px;
+
+          .icon,
+          span {
+            position: absolute;
+            top: -10px;
           }
         }
-  
-        .item-data-box {
-          color: #fff;
-  
-          .state-icon {
-            display: inline-block;
-            width: 12px;
-            height: 12px;
-            border-radius: 12px;
+
+        .group-parameter-title {
+          background-image: linear-gradient(to right, #39a3ff50, #39a3ff00);
+
+          .icon {
+            left: -12px;
+            top: -17px;
           }
-  
-          .open {
-            border: 5px solid #133a56;
-            background: #4ecb73;
+
+          span {
+            left: 18px;
           }
-  
-          .close {
-            border: 5px solid #192961;
-            background: #6d7898;
+
+          .item-col {
+            background-image: linear-gradient(to right, #39a3ff00, #39a3ff10);
           }
         }
-      }
-  
-      .item-l {
-        width: 100%;
-  
-        .monitor-box {
-          width: 100%;
-  
-          .parameter-title {
-            position: relative;
-            width: 100%;
-            height: 14px;
-            margin-top: 10px;
-  
-            .icon,
-            span {
-              position: absolute;
-              top: -10px;
-            }
+
+        .device-parameter-title {
+          background-image: linear-gradient(to right, #3df6ff40, #3df6ff00);
+
+          .icon {
+            left: -10px;
+            top: -14px;
           }
-  
-          .group-parameter-title {
-            background-image: linear-gradient(to right, #39a3ff50, #39a3ff00);
-  
-            .icon {
-              left: -12px;
-              top: -17px;
-            }
-  
-            span {
-              left: 18px;
-            }
-  
-            .item-col {
-              background-image: linear-gradient(to right, #39a3ff00, #39a3ff10);
-            }
+
+          span {
+            left: 18px;
           }
-  
-          .device-parameter-title {
-            background-image: linear-gradient(to right, #3df6ff40, #3df6ff00);
-  
-            .icon {
-              left: -10px;
-              top: -14px;
-            }
-  
-            span {
-              left: 18px;
-            }
-  
-            .item-col {
-              background-image: linear-gradient(to right, #3df6ff10, #3df6ff00);
-            }
+
+          .item-col {
+            background-image: linear-gradient(to right, #3df6ff10, #3df6ff00);
           }
         }
       }
-  
-      .signal-round {
-        display: inline-block;
-        width: 8px;
-        height: 8px;
+    }
+
+    .signal-round {
+      display: inline-block;
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      // margin: 0 10px;
+      margin: 0 5px;
+      position: relative;
+
+      &::after {
+        display: block;
+        content: '';
+        position: absolute;
+        width: 12px;
+        height: 12px;
+        top: -2px;
+        left: -2px;
         border-radius: 50%;
-        // margin: 0 10px;
-        margin: 0 5px;
-        position: relative;
-  
-        &::after {
-          display: block;
-          content: '';
-          position: absolute;
-          width: 12px;
-          height: 12px;
-          top: -2px;
-          left: -2px;
-          border-radius: 50%;
-        }
       }
-  
-      .signal-round-gry {
-        background-color: #858585;
-  
-        &::after {
-          background-color: #85858544;
-          box-shadow: 0 0 1px 1px #85858599;
-        }
+    }
+
+    .signal-round-gry {
+      background-color: #858585;
+
+      &::after {
+        background-color: #85858544;
+        box-shadow: 0 0 1px 1px #85858599;
       }
-  
-      .signal-round-run {
-        background-color: #67fc00;
-  
-        &::after {
-          background-color: #67fc0044;
-          box-shadow: 0 0 1px 1px #c6ff77;
-        }
+    }
+
+    .signal-round-run {
+      background-color: #67fc00;
+
+      &::after {
+        background-color: #67fc0044;
+        box-shadow: 0 0 1px 1px #c6ff77;
       }
-  
-      .signal-round-warning {
-        background-color: #e9170b;
-  
-        &::after {
-          background-color: #e9170b44;
-          box-shadow: 0 0 1px 1px #e9170b;
-        }
+    }
+
+    .signal-round-warning {
+      background-color: #e9170b;
+
+      &::after {
+        background-color: #e9170b44;
+        box-shadow: 0 0 1px 1px #e9170b;
       }
     }
-  
-    :deep(.@{ventSpace}-tabs-tabpane-active) {
-      overflow: auto;
+  }
+
+  :deep(.@{ventSpace}-tabs-tabpane-active) {
+    overflow: auto;
+  }
+
+  .input-box {
+    display: flex;
+    align-items: center;
+    padding-left: 10px;
+
+    .input-title {
+      color: #73e8fe;
+      width: auto;
     }
-  
-    .input-box {
-      display: flex;
-      align-items: center;
-      padding-left: 10px;
-  
-      .input-title {
-        color: #73e8fe;
-        width: auto;
-      }
-  
-      .@{ventSpace}-input-number {
-        border-color: #ffffff88 !important;
-      }
-  
-      margin-right: 10px;
+
+    .@{ventSpace}-input-number {
+      border-color: #ffffff88 !important;
     }
-  </style>
-  
+
+    margin-right: 10px;
+  }
+</style>