[Feat 0000] 除尘风机为布尔台新接4套

src/views/vent/monitorManager/dedustMonitor/components/DedustHomeBet.vue

@@ -0,0 +1,250 @@
+<template>
+  <div
+    v-show="!loading"
+    id="dedustCss"
+    style="width: 100%; height: 100%; position: absolute; pointer-events: none; overflow: hidden; z-index: 2; top: 0px; left: 0px"
+  >
+    <FourBorderBg id="dedustEnvA">
+      <div class="monitor-item" v-for="(data, index) in configAvailable.dedustEnvModalA" :key="index" :id="`dedustCss3D${index}`">
+        <span class="monitor-title">{{ data.label }}：</span>
+        <span class="monitor-val">{{ get(deviceInfo, data.prop, '-') }}</span>
+      </div>
+      <!-- <div class="title">
+        {{ monitorData[groupNum - 1]['strname'] }}
+      </div> -->
+    </FourBorderBg>
+    <FourBorderBg id="dedustEnvB">
+      <div class="monitor-item" v-for="(data, index) in configAvailable.dedustEnvModalB" :key="index" :id="`dedustCss3D${index}`">
+        <span class="monitor-title">{{ data.label }}：</span>
+        <span class="monitor-val">{{ get(deviceInfo, data.prop, '-') }}</span>
+      </div>
+    </FourBorderBg>
+  </div>
+  <div class="monitor-container">
+    <div style="position: absolute; height: 40px; width: 100%; top: calc(50%-20px); font-size: 20px; color: red; text-align: center">
+      {{ deviceInfo.warnDes }}
+    </div>
+    <div class="lr left-box vent-margin-t-10">
+      <ventBox1>
+        <template #title>
+          <div>除尘机状态</div>
+        </template>
+        <template #container>
+          <template v-if="deviceType === 'dedustefan_3567d'">
+            <List :labelWidth="280" v-bind="dedustStatusPropC" />
+          </template>
+          <template v-else>
+            <List icon="warning-title" type="status-light" :labelWidth="130" layout="double-columns" title="故障状态" v-bind="dedustStatusPropA" />
+            <List icon="warning-title" type="status-light" :labelWidth="300" title="报警状态" v-bind="dedustStatusPropB" />
+            <List icon="warning-title" type="status-light" :labelWidth="280" title="激活状态" v-bind="dedustStatusPropC" />
+          </template>
+        </template>
+      </ventBox1>
+    </div>
+    <div class="lr right-box">
+      <ventBox1 class="vent-margin-t-10">
+        <template #title>
+          <div>监测参数</div>
+        </template>
+        <template #container>
+          <List :labelWidth="200" v-bind="dedustMonitorProp" />
+        </template>
+      </ventBox1>
+      <ventBox1>
+        <template #title>
+          <div>环境参数</div>
+        </template>
+        <template #container>
+          <List :labelWidth="200" v-bind="dedustEnvProp" />
+        </template>
+      </ventBox1>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import FourBorderBg from '/@/views/vent/comment/components/fourBorderBg.vue';
+  import { ref, onMounted, onUnmounted, defineProps, computed, watch } from 'vue';
+  import { list } from '../dedust.api';
+  import ventBox1 from '/@/components/vent/ventBox1.vue';
+  import { mountedThree, destroy, setModelType } from '../dedust.threejs';
+  // import { SvgIcon } from '/@/components/Icon';
+  import * as configDefault from '../dedust.data';
+  import * as config3567D from '../dedust.data.bet';
+  import List from '/@/views/vent/gas/components/list/index.vue';
+  import _ from 'lodash';
+  import { get } from '../../../home/billboard/utils';
+
+  const props = defineProps({
+    deviceId: {
+      type: String,
+      require: true,
+    },
+  });
+
+  const loading = ref(false);
+  const deviceInfo = ref<any>({});
+  const deviceType = computed(() => {
+    return deviceInfo.value.deviceType;
+  });
+  const configAvailable = computed(() => {
+    if (deviceType.value === 'dedustefan_3567d') return config3567D;
+    return configDefault;
+  });
+
+  // 将列表配置项转换为列表可用的prop
+  function transConfigToProp(config, source) {
+    return config.map((c) => {
+      if (c.type === 'default' && c.status) {
+        return {
+          ...c,
+          value: c.status.find((e) => _.get(source, c.prop) === e.value)?.label,
+          label: c.label,
+        };
+      }
+      return {
+        ...c,
+        value: _.get(source, c.prop),
+        label: c.label,
+      };
+    });
+  }
+
+  // 各个模块的配置项
+  const dedustMonitorProp = computed(() => {
+    const { dedustMonitorConfig } = configAvailable.value;
+    return {
+      items: transConfigToProp(dedustMonitorConfig, deviceInfo.value),
+    };
+  });
+  const dedustEnvProp = computed(() => {
+    const { dedustEnvConfig } = configAvailable.value;
+    return {
+      items: transConfigToProp(dedustEnvConfig, deviceInfo.value),
+    };
+  });
+  const dedustStatusPropA = computed(() => {
+    const { statusConfigA, dedustStatusConfigA } = configAvailable.value;
+    return {
+      status: statusConfigA as any,
+      items: transConfigToProp(dedustStatusConfigA, deviceInfo.value),
+    };
+  });
+  const dedustStatusPropB = computed(() => {
+    const { statusConfigB, dedustStatusConfigB } = configAvailable.value;
+    return {
+      status: statusConfigB as any,
+      items: transConfigToProp(dedustStatusConfigB, deviceInfo.value),
+    };
+  });
+  const dedustStatusPropC = computed(() => {
+    const { statusConfigC, dedustStatusConfigC } = configAvailable.value;
+    return {
+      status: statusConfigC as any,
+      items: transConfigToProp(dedustStatusConfigC, deviceInfo.value),
+    };
+  });
+
+  // https获取监测数据
+  let timer: NodeJS.Timeout;
+  async function getDataSource(systemID) {
+    const res = await list({ devicetype: 'sys', systemID, type: 'all' });
+    // 保留最后一项数据
+    _.forEach(_.get(res, 'deviceInfo.dedustefan.datalist', []), (e) => {
+      Object.assign(e, e.readData);
+      deviceInfo.value = e || { warnDes: '设备断开' };
+      return -1;
+    });
+  }
+
+  watch(
+    () => props.deviceId,
+    (val) => {
+      return getDataSource(val);
+    },
+    {
+      immediate: true,
+    }
+  );
+
+  onMounted(() => {
+    loading.value = true;
+    mountedThree('#dedust3D', ['#dedustCss', '#dedustEnvA', '#dedustEnvB']).then(() => {
+      setModelType('dedust').finally(() => {
+        loading.value = false;
+      });
+    });
+    timer = setInterval(() => {
+      getDataSource(props.deviceId);
+    }, 1000);
+  });
+  onUnmounted(() => {
+    clearInterval(timer);
+    destroy();
+  });
+</script>
+<style lang="less" scoped>
+  @import '/@/design/theme.less';
+  @import '/@/design/vent/modal.less';
+  // @import '../less/tunFace.less';
+  @import '../../comment/less/workFace.less';
+  @ventSpace: zxm;
+
+  .monitor-item {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 3px;
+
+    .monitor-val {
+      font-size: 14px;
+    }
+  }
+
+  .monitor-title {
+    width: 200px;
+    color: var(--vent-font-action-link);
+    font-weight: 400;
+    font-size: 14px;
+  }
+
+  .dust-fan-monitor {
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .dust-fan-monitor-item {
+    width: 152px;
+    height: 70px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    border: 1px solid rgba(25, 251, 255, 0.4);
+    box-shadow: inset 0 0 20px rgba(0, 197, 255, 0.4);
+    background: rgba(0, 0, 0, 0.06666667);
+    margin-bottom: 5px;
+    padding: 8px 0;
+    &:nth-child(2n) {
+      margin-left: 12px;
+    }
+    .title {
+      color: #5dfaff;
+    }
+    .unit {
+      font-size: 13px;
+      color: #ffffffaa;
+    }
+    .value {
+      color: #ffb212;
+    }
+  }
+
+  .fault {
+    .title {
+      color: #c4fdff;
+    }
+    .value {
+      // color: #FFB212;
+      color: #61ddb1;
+    }
+  }
+</style>

src/views/vent/monitorManager/dedustMonitor/dedust.data.bet.ts

@@ -0,0 +1,133 @@
+/** 故障相关状态配置 0 正常 1 故障 */
+export const statusConfigA = [
+  { value: '0', label: '' },
+  { value: '1', label: '' },
+];
+/** 报警相关状态配置 0 正常 1 报警 */
+export const statusConfigB = [
+  { value: '0', label: '' },
+  { value: '1', label: '' },
+];
+/** 激活与否相关状态配置 0 闭合 1 断开 */
+export const statusConfigC = [
+  { value: '0', label: '闭合' },
+  { value: '1', label: '断开' },
+];
+
+export const dedustMonitorConfig = [
+  // {
+  //   prop: 'FrequencySetPointZD',
+  //   label: '最低频率设置',
+  // },
+  // {
+  //   prop: 'FrequencySetPointYTW',
+  //   label: '以太网频率比率',
+  // },
+  // {
+  //   prop: 'FrequencySetPoint',
+  //   label: '给定频率',
+  // },
+  { prop: 'OutputFrequency', label: '输出频率（Hz）' },
+  { prop: 'Current1', label: '前机电流（A）' },
+  { prop: 'Current2', label: '后机电流（A）' },
+  { prop: 'OutputVoltage', label: '输出电压（V）' },
+  // { prop: 'GasConcentration1', label: '瓦斯浓度1（%）' },
+  // { prop: 'GasConcentration2', label: '瓦斯浓度2（%）' },
+  // { prop: 'GasConcentration3', label: '瓦斯浓度3（%）' },
+  // { prop: 'Frequency', label: '运行频率（Hz）' },
+  // { prop: 'BusVoltage', label: '母线电压（V）' },
+  // { prop: 'RunTime', label: '运行时间（h）' },
+];
+
+export const dedustEnvConfig = [
+  { prop: 'temperature', label: '掘进工作面温度(℃)' },
+  { prop: 'gas', label: '掘进工作面甲烷(%CH₄)' },
+  { prop: 'dust', label: '掘进工作面粉尘(mg/m³)' },
+  { prop: 'hflgas', label: '掘进工作面回风流甲烷(%CH₄)' },
+  { prop: 'smoke_str', label: '掘进工作面皮带机尾烟雾' },
+];
+
+/** 用于模型css详情展示的配置 */
+export const dedustEnvModalA = [
+  { prop: 'gas', label: '掘进工作面甲烷(%CH₄)' },
+  { prop: 'dust', label: '掘进工作面粉尘(mg/m³)' },
+  { prop: 'smoke_str', label: '掘进工作面皮带机尾烟雾' },
+];
+
+export const dedustEnvModalB = [{ prop: 'hflgas', label: '掘进工作面回风流甲烷(%CH₄)' }];
+
+/** 故障相关配置 */
+export const dedustStatusConfigA = [];
+
+/** 报警相关配置 */
+export const dedustStatusConfigB = [];
+
+/** 激活与否相关配置 */
+export const dedustStatusConfigC = [
+  // {
+  //   type: 'default',
+  //   prop: 'Fault',
+  //   label: '故障值',
+  // },
+  {
+    type: 'default',
+    prop: 'Running',
+    label: '运行状态',
+    status: [
+      { value: '1', label: '停机' },
+      { value: '0', label: '正常' },
+    ],
+  },
+  {
+    type: 'default',
+    prop: 'Direction',
+    label: '运行方向',
+    status: [
+      { value: '1', label: '反向' },
+      { value: '0', label: '正向' },
+    ],
+  },
+  {
+    type: 'default',
+    prop: 'ControlState',
+    label: '手自状态',
+    status: [
+      { value: '1', label: '自动' },
+      { value: '0', label: '手动' },
+    ],
+  },
+  {
+    type: 'default',
+    prop: 'WindLock',
+    label: '风电闭锁',
+    status: [
+      { value: '1', label: '闭合' },
+      { value: '0', label: '断开' },
+    ],
+  },
+  {
+    type: 'default',
+    prop: 'GasLock',
+    label: '瓦斯闭锁',
+    status: [
+      { value: '1', label: '闭合' },
+      { value: '0', label: '断开' },
+    ],
+  },
+];
+
+// export const dedustStatusConfigD = [
+//   {
+//     prop: 'GasLock',
+//     label: '瓦斯闭锁',
+//     status: [{ label: '' }]
+//   },
+//   {
+//     prop: 'SwitchOn',
+//     label: '启动控制',
+//   },
+//   {
+//     prop: 'SwitchOff',
+//     label: '停止控制',
+//   },
+// ];

src/views/vent/monitorManager/dedustMonitor/index.vue

@@ -13,7 +13,7 @@
     </customHeader>
     <div class="center-container">
       <template v-if="activeKey == 'monitor'">
-        <DedustHome :deviceId="optionValue" />
+        <component :is="DedustHomeComponent" :deviceId="optionValue" />
       </template>
       <div v-else class="history-group">
         <div class="device-button-group" v-if="deviceList.length > 0 && activeKey !== 'faultRecord'">
@@ -56,17 +56,28 @@
 </template>
 
 <script setup lang="ts">
-  import { onBeforeMount, ref, onMounted, reactive } from 'vue';
-  import { systemList, getTableList } from './dedust.api';
+  import { onBeforeMount, ref, onMounted, computed, defineAsyncComponent } from 'vue';
   import customHeader from '/@/components/vent/customHeader.vue';
   import BottomMenu from '/@/views/vent/comment/components/bottomMenu.vue';
-  import DedustHome from './components/DedustHome.vue';
   import DedustHistory from './components/DedustHistory.vue';
   import HandleHistory from './components/HandleHistory.vue';
   import AlarmHistory from './components/AlarmHistory.vue';
   import { useRouter } from 'vue-router';
-
-  type DeviceType = { deviceType: string; deviceName: string; datalist: any[] };
+  import { useSystemSelect } from '/@/hooks/vent/useSystemSelect';
+  import { useGlobSetting } from '/@/hooks/setting';
+
+  const DedustHomeComponent = computed(() => {
+    const { sysOrgCode } = useGlobSetting();
+    const {} = deviceActive;
+    // const sysOrgCode = 'sdmtjtbltmk';
+    let nitrogenHome;
+    switch (sysOrgCode) {
+      default:
+        nitrogenHome = defineAsyncComponent(() => import('./components/DedustHomeBet.vue'));
+        // nitrogenHome = defineAsyncComponent(() => import('./components/DedustHome.vue'));
+        return nitrogenHome;
+    }
+  });
 
   const { currentRoute } = useRouter();
   const activeKey = ref('monitor');
@@ -75,77 +86,23 @@
   const alarmHistoryTable = ref();
   const handlerHistoryTable = ref();
 
-  //关联设备
-  const deviceList = ref<DeviceType[]>([]);
-  const deviceActive = ref('');
-  const deviceType = ref('');
-
-  const options = ref();
-  // 默认初始是第一行
-  // const selectRowIndex = ref(0);
-  const dataSource = ref([]);
-
-  const optionValue = ref('');
-
-  // 监测数据
-  const selectData = reactive({});
-
   function changeActive(activeValue) {
     activeKey.value = activeValue;
   }
 
-  function deviceChange(index) {
-    deviceActive.value = deviceType.value = deviceList.value[index].deviceType;
-  }
-
-  // 查询关联设备列表
-  async function getDeviceList() {
-    const res = await systemList({ devicetype: 'sys', systemID: optionValue.value });
-    if (res && res.msgTxt && res.msgTxt.length) {
-      const result = res.msgTxt;
-      const deviceArr: DeviceType[] = [];
-      result.forEach((item) => {
-        const data = item['datalist'].filter((data: any) => {
-          const readData = data.readData;
-          return Object.assign(data, readData);
-        });
-        if (item.type != 'sys') {
-          deviceArr.unshift({
-            deviceType: item.type,
-            deviceName: item['typeName'] ? item['typeName'] : item['datalist'][0]['typeName'],
-            datalist: data,
-          });
-        }
-      });
-      deviceList.value = deviceArr;
-      deviceActive.value = deviceArr[0].deviceType;
-      deviceChange(0);
-    }
-  }
-
-  async function getSysDataSource() {
-    const res = await getTableList({ strtype: 'sys_surface_juejin', pagetype: 'normal' });
-    if (!options.value && res) {
-      // 初始时选择第一条数据
-      options.value = res.records || [];
-      if (!optionValue.value) {
-        optionValue.value = options.value[0]['id'];
-        getDeviceList();
-      }
-    }
-  }
-
-  // 切换检测数据
-  async function getSelectRow(deviceID) {
-    const currentData = dataSource.value.find((item: any) => {
-      return item.deviceID == deviceID;
-    });
-    if (currentData) {
-      optionValue.value = currentData['deviceID'];
-      Object.assign(selectData, currentData);
-      await getDeviceList();
-    }
-  }
+  const {
+    options,
+    optionValue,
+    deviceType,
+    // isRefresh,
+    deviceActive,
+    deviceList,
+    // deviceValue,
+    getSelectRow,
+    getSysDataSource,
+    deviceChange,
+    getDeviceList,
+  } = useSystemSelect('sys_surface_juejin');
 
   onBeforeMount(() => {});