Merge branch 'master' of http://182.92.126.35:3000/hrx/mky-vent-base

src/hooks/setting/index.ts

@@ -5,6 +5,7 @@ import { getAppEnvConfig, getHomePath } from '/@/utils/env';
 let domainUrl = '',
   logoUrl = '',
   homePath = '',
+  sysOrgCode = '',
   title = '';
 
 const getUrl = () => {
@@ -22,7 +23,9 @@ const getUrl = () => {
           if (data.result) {
             title = data.result['systemTitle'] ? data.result['systemTitle'] : '';
             logoUrl = data.result['logoIcon'] ? data.result['logoIcon'] : '';
+            sysOrgCode = data.result['sysOrgCode'] ? data.result['sysOrgCode'] : '';
             const homePathKey = data.result['defaultTheme'] ? data.result['defaultTheme'] : '';
+
             homePath = getHomePath(homePathKey);
             const faviconIcon = document.getElementById('faviconIcon');
             if (faviconIcon) {
@@ -91,6 +94,7 @@ export const useGlobSetting = (): Readonly<GlobConfig> => {
     viewUrl: VITE_GLOB_ONLINE_VIEW_URL,
     modalUrlArr: VITE_3D_MODAL_ARR,
     homePath: homePath,
+    sysOrgCode: sysOrgCode,
   };
   return glob as Readonly<GlobConfig>;
 };

src/hooks/system/useCamera.ts

@@ -2,6 +2,7 @@ import { defHttp } from '/@/utils/http/axios';
 import { render, h, nextTick } from 'vue';
 import LivePlayer from '@liveqing/liveplayer-v3';
 import { useDrag } from '../event/useDrag';
+import { useGlobSetting } from '/@/hooks/setting';
 
 export function useCamera() {
   const cameraList = (params) => defHttp.get({ url: '/safety/ventanalyCamera/list', params });
@@ -11,6 +12,7 @@ export function useCamera() {
   let playerDoms = <(HTMLVideoElement | undefined | null)[]>[];
 
   async function getCamera(deviceid, parentPlayerDom?) {
+    const globSetting = useGlobSetting();
     if (!parentPlayerDom) {
       parentPlayerDom = document.createElement('div');
       parentPlayerDom.setAttribute('style', `top:0px; left: 0px; width: 100%; height: 100%; position: fixed; z-index: 999;`);
@@ -20,9 +22,26 @@ export function useCamera() {
     const cameraAddrs: any[] = [],
       cameraNames: string[] = [];
     if (cameras.length > 0) {
-      cameras.forEach((item) => {
-        if (item['devicekind'] == 'toRtsp' || item['devicekind'] == 'toHLS') {
-          cameraNames.push(item['name']);
+      cameras.forEach(async (item) => {
+        if (item['devicekind'] == 'toHKRtsp') {
+          // 从海康平台接口获取视频流
+          // cameraAddrs.push({ devicekind: 'toHKRtsp', name: item['name'], addr: item['addr'] });
+          // const { hkUrl, hkAppKey, hkSignature } = globSetting;
+          // const data = await defHttp.post({
+          //   headers: {
+          //     Accept: '*/*',
+          //     'Access-Control-Allow-Origin': '*',
+          //     'Content-Type': 'application/json',
+          //     'x-ca-key': hkAppKey,
+          //     'x-ca-signature-headers': 'x-ca-key',
+          //     'x-ca-signature': hkSignature,
+          //   },
+          //   url: hkUrl,
+          //   params: { cameraIndexCode: item['addr'], streamType: 0, protocol: 'rtsp', transmode: 1, expand: 'streamform=rtp', streamform: 'rtp' },
+          // });
+          // if (data) {
+          //   cameraAddrs.push({ name: item['name'], addr: data.url });
+          // }
         } else {
           cameraAddrs.push({ name: item['name'], addr: item['addr'] });
         }
@@ -42,7 +61,6 @@ export function useCamera() {
   }
 
   function deviceCameraInit(cameraAddrs, player: HTMLElement, webRtcServerList: any[] = []) {
-    debugger;
     const playerDoms: (HTMLVideoElement | undefined | null)[] = [];
     const webRtcServer: any[] = [];
     let livePlayerDiv: HTMLElement | null = document.getElementById('LivePlayerBox');

src/utils/http/axios/Axios.ts

@@ -84,7 +84,7 @@ export class VAxios {
       const ignoreCancel = ignoreCancelToken !== undefined ? ignoreCancelToken : this.options.requestOptions?.ignoreCancelToken;
 
       !ignoreCancel && axiosCanceler.addPending(config);
-      if (requestInterceptors && isFunction(requestInterceptors)) {
+      if (requestInterceptors && isFunction(requestInterceptors) && !config.url?.startsWith('http')) {
         config = requestInterceptors(config, this.options);
       }
       return config;
@@ -247,7 +247,6 @@ export class VAxios {
     });
   }
 
-
   /**
    * 【用于评论功能】自定义文件上传-请求
    * @param url
@@ -255,16 +254,15 @@ export class VAxios {
    */
   uploadMyFile<T = any>(url, formData) {
     const glob = useGlobSetting();
-    return this.axiosInstance
-      .request<T>({
-        url: url,
-        baseURL: glob.uploadUrl,
-        method: 'POST',
-        data: formData,
-        headers: {
-          'Content-type': ContentTypeEnum.FORM_DATA,
-          ignoreCancelToken: true,
-        },
-      });
+    return this.axiosInstance.request<T>({
+      url: url,
+      baseURL: glob.uploadUrl,
+      method: 'POST',
+      data: formData,
+      headers: {
+        'Content-type': ContentTypeEnum.FORM_DATA,
+        ignoreCancelToken: true,
+      },
+    });
   }
 }

src/utils/http/axios/index.ts

@@ -98,44 +98,77 @@ const transform: AxiosTransform = {
   // 请求之前处理config
   beforeRequestHook: (config, options) => {
     const { apiUrl, joinPrefix, joinParamsToUrl, formatDate, joinTime = true, urlPrefix } = options;
+    if (!config.url.startsWith('http')) {
+      if (joinPrefix) {
+        config.url = `${urlPrefix}${config.url}`;
+      }
 
-    if (joinPrefix) {
-      config.url = `${urlPrefix}${config.url}`;
-    }
-
-    if (apiUrl && isString(apiUrl)) {
-      config.url = `${apiUrl}${config.url}`;
-    }
-    const params = config.params || {};
-    const data = config.data || false;
-    formatDate && data && !isString(data) && formatRequestDate(data);
-    if (config.method?.toUpperCase() === RequestEnum.GET) {
-      if (!isString(params)) {
-        // 给 get 请求加上时间戳参数，避免从缓存中拿数据。
-        config.params = Object.assign(params || {}, joinTimestamp(joinTime, false));
+      if (apiUrl && isString(apiUrl)) {
+        config.url = `${apiUrl}${config.url}`;
+      }
+      const params = config.params || {};
+      const data = config.data || false;
+      formatDate && data && !isString(data) && formatRequestDate(data);
+      if (config.method?.toUpperCase() === RequestEnum.GET) {
+        if (!isString(params)) {
+          // 给 get 请求加上时间戳参数，避免从缓存中拿数据。
+          config.params = Object.assign(params || {}, joinTimestamp(joinTime, false));
+        } else {
+          // 兼容restful风格
+          config.url = config.url + params + `${joinTimestamp(joinTime, true)}`;
+          config.params = undefined;
+        }
       } else {
-        // 兼容restful风格
-        config.url = config.url + params + `${joinTimestamp(joinTime, true)}`;
-        config.params = undefined;
+        if (!isString(params)) {
+          formatDate && formatRequestDate(params);
+          if (Reflect.has(config, 'data') && config.data && Object.keys(config.data).length > 0) {
+            config.data = data;
+            config.params = params;
+          } else {
+            // 非GET请求如果没有提供data，则将params视为data
+            config.data = params;
+            config.params = undefined;
+          }
+          if (joinParamsToUrl) {
+            config.url = setObjToUrlParams(config.url as string, Object.assign({}, config.params, config.data));
+          }
+        } else {
+          // 兼容restful风格
+          config.url = config.url + params;
+          config.params = undefined;
+        }
       }
     } else {
-      if (!isString(params)) {
-        formatDate && formatRequestDate(params);
-        if (Reflect.has(config, 'data') && config.data && Object.keys(config.data).length > 0) {
-          config.data = data;
-          config.params = params;
+      const params = config.params || {};
+      const data = config.data || false;
+      if (config.method?.toUpperCase() === RequestEnum.GET) {
+        if (!isString(params)) {
+          // 给 get 请求加上时间戳参数，避免从缓存中拿数据。
+          config.params = Object.assign(params || {}, joinTimestamp(joinTime, false));
         } else {
-          // 非GET请求如果没有提供data，则将params视为data
-          config.data = params;
+          // 兼容restful风格
+          config.url = config.url + params + `${joinTimestamp(joinTime, true)}`;
           config.params = undefined;
         }
-        if (joinParamsToUrl) {
-          config.url = setObjToUrlParams(config.url as string, Object.assign({}, config.params, config.data));
-        }
       } else {
-        // 兼容restful风格
-        config.url = config.url + params;
-        config.params = undefined;
+        if (!isString(params)) {
+          formatDate && formatRequestDate(params);
+          if (Reflect.has(config, 'data') && config.data && Object.keys(config.data).length > 0) {
+            config.data = data;
+            config.params = params;
+          } else {
+            // 非GET请求如果没有提供data，则将params视为data
+            config.data = params;
+            config.params = undefined;
+          }
+          if (joinParamsToUrl) {
+            config.url = setObjToUrlParams(config.url as string, Object.assign({}, config.params, config.data));
+          }
+        } else {
+          // 兼容restful风格
+          config.url = config.url + params;
+          config.params = undefined;
+        }
       }
     }
     return config;

src/utils/ventutil.ts

@@ -1,6 +1,5 @@
 import { render, h, nextTick } from 'vue';
 import LivePlayer from '@liveqing/liveplayer-v3';
-import { play } from '../views/vent/monitorManager/balancePressMonitor/balancePress.threejs';
 
 export function toEchartsData(list, option) {
   option.legend['data'] = [];

src/views/vent/deviceManager/comment/cameraTabel/camera.data.ts

@@ -35,12 +35,8 @@ export const columns: BasicColumn[] = [
           value: 'flv',
         },
         {
-          label: '装备院获取的rtsp',
-          value: 'toRtsp',
-        },
-        {
-          label: '装备院获取的HLS',
-          value: 'toHLS',
+          label: '海康平台转换',
+          value: 'toHKRtsp',
         },
       ],
     },

src/views/vent/deviceManager/comment/pointTabel/point.api.ts

@@ -75,13 +75,12 @@ export const pointEdit = (params) => defHttp.put({ url: Api.pointEdit, params })
  */
 export const workDeviceList = (params) => defHttp.get({ url: Api.workDeviceList, params });
 
-export const workDeviceEdit = (params) =>
-  defHttp.post({ url: Api.workDeviceEdit, params })
+export const workDeviceEdit = (params) => defHttp.post({ url: Api.workDeviceEdit, params });
 
 export const warningList = (params) => defHttp.get({ url: Api.warningList, params });
 export const warningEdit = (params) => defHttp.put({ url: Api.warningEdit, params });
 export const warningDeleteById = (params) => {
-  return defHttp.delete({ url: Api.deleteById, params }, { joinParamsToUrl: true })
+  return defHttp.delete({ url: Api.deleteById, params }, { joinParamsToUrl: true });
 };
 
 export const warningDeleteBatch = (params, handleSuccess) => {

src/views/vent/deviceManager/comment/warningTabel/index1.vue

@@ -1,8 +1,7 @@
 <template>
   <div class="warning-device-box">
     <div class="warning-box">
-      <div v-for="item in warningList" class="link-item" :class="{ 'active-device-title': item.id == activeID }"
-        :key="item.id">
+      <div v-for="item in warningList" class="link-item" :class="{ 'active-device-title': item.id == activeID }" :key="item.id">
         <span class="" @click="selectWarning(item.id)">{{ item.alarmName }}</span>
       </div>
     </div>
@@ -21,139 +20,136 @@
       </a-table>
     </div>
   </div>
-  <BaseModal @register="register" @add="onSubmit" @update="onSubmit" :form-schemas="formSchemas" :monitor-type="'1'">
-  </BaseModal>
+  <BaseModal @register="register" @add="onSubmit" @update="onSubmit" :form-schemas="formSchemas" :monitor-type="'1'" />
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted } from 'vue'
-import { controlColumns, controlFormSchemas } from './warning.data'
-import { warningLogList, workFaceWarningList, workFaceWarningAdd, workFaceWarningEdit, workFaceWarningDelete } from './warning.api';
-import BaseModal from './BaseModal.vue'
-import { useModal } from '/@/components/Modal';
-import { message } from 'ant-design-vue';
-
-const props = defineProps({
-  deviceId: { type: String },
-});
-
-const formSchemas = controlFormSchemas({ id: props.deviceId })
-const activeID = ref('')
-const warningList = ref<{ id: string, alarmName: string }[]>([])
-const dataSource = ref([])
-
-function selectWarning(id) {
-  activeID.value = id
-}
-
-async function getDataSource() {
-  const result = await workFaceWarningList({ sysId: props.deviceId, monitorType: 1, alarmId: activeID.value, pageSize: 100000 })
-  dataSource.value = result.records
-}
-
-async function handleDelete(record) {
-  await workFaceWarningDelete({ id: record.id })
-  getDataSource()
-}
-
-const [register, { openModal, closeModal }] = useModal()
-
-function handleOpen(record?) {
-  if (!activeID.value) {
-    message.warning('请先选择预警条目！')
-    return
+  import { ref, onMounted } from 'vue';
+  import { controlColumns, controlFormSchemas } from './warning.data';
+  import { warningLogList, workFaceWarningList, workFaceWarningAdd, workFaceWarningEdit, workFaceWarningDelete } from './warning.api';
+  import BaseModal from './BaseModal.vue';
+  import { useModal } from '/@/components/Modal';
+  import { message } from 'ant-design-vue';
+
+  const props = defineProps({
+    deviceId: { type: String },
+  });
+
+  const formSchemas = controlFormSchemas({ id: props.deviceId });
+  const activeID = ref('');
+  const warningList = ref<{ id: string; alarmName: string }[]>([]);
+  const dataSource = ref([]);
+
+  function selectWarning(id) {
+    activeID.value = id;
   }
-  if (record) {
-    openModal(true, {
-      isUpdate: true,
-      record
-    });
-  }else{
-    openModal(true, {
-      isUpdate: false,
-    });
+
+  async function getDataSource() {
+    const result = await workFaceWarningList({ sysId: props.deviceId, monitorType: 1, alarmId: activeID.value, pageSize: 100000 });
+    dataSource.value = result.records;
+  }
+
+  async function handleDelete(record) {
+    await workFaceWarningDelete({ id: record.id });
+    getDataSource();
+  }
+
+  const [register, { openModal, closeModal }] = useModal();
+
+  function handleOpen(record?) {
+    if (!activeID.value) {
+      message.warning('请先选择预警条目！');
+      return;
+    }
+    if (record) {
+      openModal(true, {
+        isUpdate: true,
+        record,
+      });
+    } else {
+      openModal(true, {
+        isUpdate: false,
+      });
+    }
   }
-  
-}
-
-async function onSubmit(flag, values) {
-  // 提交数据弹窗
-  if (flag == 'update') {
-    await workFaceWarningEdit({ ...values })
-  } else {
-    await workFaceWarningAdd({ ...values, monitorType: 1, sysId: props.deviceId, alarmId: activeID.value })
+
+  async function onSubmit(flag, values) {
+    // 提交数据弹窗
+    if (flag == 'update') {
+      await workFaceWarningEdit({ ...values });
+    } else {
+      await workFaceWarningAdd({ ...values, monitorType: 1, sysId: props.deviceId, alarmId: activeID.value });
+    }
+    closeModal();
+    //刷新列表
+    await getDataSource();
   }
-  closeModal();
-  //刷新列表
-  await getDataSource()
-}
-
-async function getWarningList() {
-  const result = await warningLogList({ sysId: props.deviceId, pageSize: 100000 }) //id: props.deviceId
-  warningList.value = result.records
-  activeID.value = warningList.value[0]['id']
-}
-
-onMounted(async () => {
-  await getWarningList()
-  await getDataSource()
-})
 
+  async function getWarningList() {
+    const result = await warningLogList({ sysId: props.deviceId, pageSize: 100000 }); //id: props.deviceId
+    warningList.value = result.records;
+    activeID.value = warningList.value[0]['id'];
+  }
+
+  onMounted(async () => {
+    await getWarningList();
+    await getDataSource();
+  });
 </script>
 
 <style lang="less" scoped>
-@ventSpace: zxm;
-
-.warning-device-box {
-  width: 100%;
-  height: 600px;
-  overflow-y: auto;
-  display: flex;
+  @ventSpace: zxm;
 
-  .warning-box {
-    width: 200px;
-    height: 100%;
+  .warning-device-box {
+    width: 100%;
+    height: 600px;
     overflow-y: auto;
-    background: #ffffff11;
-    padding: 5px;
-    border-radius: 5px;
-    .link-item {
-      position: relative;
-      cursor: pointer;
-      line-height: 30px;
-      padding-left: 30px;
-      color: #fff;
-      span:hover {
-        color: #89ffff;
+    display: flex;
+
+    .warning-box {
+      width: 200px;
+      height: 100%;
+      overflow-y: auto;
+      background: #ffffff11;
+      padding: 5px;
+      border-radius: 5px;
+      .link-item {
+        position: relative;
+        cursor: pointer;
+        line-height: 30px;
+        padding-left: 30px;
+        color: #fff;
+        span:hover {
+          color: #89ffff;
+        }
+
+        &::after {
+          content: '';
+          position: absolute;
+          display: block;
+          width: 8px;
+          height: 8px;
+          top: 12px;
+          left: 10px;
+          transform: rotateZ(45deg) skew(10deg, 10deg);
+          background: #45d3fd;
+        }
       }
-
-      &::after {
-        content: '';
-        position: absolute;
-        display: block;
-        width: 8px;
-        height: 8px;
-        top: 12px;
-        left: 10px;
-        transform: rotateZ(45deg) skew(10deg, 10deg);
-        background: #45d3fd;
+      .active-device-title {
+        color: aqua;
       }
     }
-    .active-device-title {
-      color: aqua;
-    }
-  }
 
-  .device-box {
-    flex: 1;
-    margin-left: 10px;
-    overflow: hidden;
-  }
-  .action-link{
-    color: #00e7ff;
-    &:hover{
+    .device-box {
+      flex: 1;
+      margin-left: 10px;
+      overflow: hidden;
+    }
+    .action-link {
       color: #00e7ff;
+      &:hover {
+        color: #00e7ff;
+      }
     }
   }
-}
 </style>

src/views/vent/home/clique/testPage.vue

@@ -0,0 +1,101 @@
+<template>
+  <div class="company-home">
+    <div class="top-bg">
+      <div class="main-title">{{ mainTitle }}</div>
+    </div>
+    <a-row class="company-content" justify="space-between" wrap>
+      <a-col class="company-content__card" v-for="(item, i) in cards" :key="i" flex="24%">
+        <p class="company-content__card_title">{{ item.title }}</p>
+        <div class="company-content__card_content">你好</div>
+      </a-col>
+    </a-row>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { computed, ref } from 'vue';
+  // import mapComponent from './components/3Dmap/index.vue';
+
+  const mainTitle = ref('国家能源神东煤炭集团');
+  const cards = ref<{ title: string }[]>([
+    {
+      title: 'A矿',
+    },
+    {
+      title: 'B矿',
+    },
+    {
+      title: 'C矿',
+    },
+    {
+      title: 'D矿',
+    },
+    {
+      title: 'E矿',
+    },
+    {
+      title: 'F矿',
+    },
+    {
+      title: 'G矿',
+    },
+    {
+      title: 'H矿',
+    },
+  ]);
+</script>
+<style lang="less" scoped>
+  @font-face {
+    font-family: 'douyuFont';
+    src: url('../../../../assets/font/douyuFont.otf');
+  }
+
+  .company-home {
+    width: 100%;
+    height: 100%;
+    color: #fff;
+    position: relative;
+    // background: url('../../../../assets/images/company/home-pageBg.png') no-repeat center;
+    // background-size: 100% 100%;
+
+    .top-bg {
+      width: 100%;
+      height: 97px;
+      background: url('../../../../assets/images/company/top-bg.png') no-repeat center;
+      position: absolute;
+      z-index: 1;
+      .main-title {
+        height: 96px;
+        font-family: 'douyuFont';
+        font-size: 20px;
+        letter-spacing: 2px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+    }
+
+    .company-content {
+      width: 100%;
+      height: 100%;
+      background: url('../../../../assets/images/company/content-bg.png') no-repeat;
+      background-size: 100% 100%;
+      pointer-events: none;
+      padding: 150px 100px 100px 100px;
+
+      .company-content__card {
+        height: 320px;
+        background: url('../../../../assets/images/company/area-card4.png') no-repeat;
+        background-size: 100% 100%;
+        padding: 0 20px 0 20px;
+        text-align: center;
+      }
+      .company-content__card_title {
+        margin-top: 10px;
+        font-family: 'douyuFont';
+      }
+      .company-content__card_content {
+        height: 250px;
+      }
+    }
+  }
+</style>

src/views/vent/monitorManager/compressor/components/nitrogenEcharts.vue

@@ -1,18 +1,19 @@
 <template>
-  <div class="nitrogen-echatrs-box">  
+  <div class="nitrogen-echatrs-box">
     <div class="button-box">
-      <div style="color: #fff; font-weight: 600;">{{ currentTime }}</div>
+      <div style="color: #fff; font-weight: 600">{{ currentTime }}</div>
     </div>
     <div class="echarts-container">
       <div v-for="(item, index) in dataSource" :key="index" class="echarts-item">
         <div class="echarts-nitrogen-item">
           <BarAndLine
-          xAxisPropType="readTime"
-          :dataSource="item"
-          height="100%"
-          :chartsColumns="nitrogenChartsColumns"
-          :option="nitrogenOption"
-          chartsType="detail" />
+            xAxisPropType="readTime"
+            :dataSource="item"
+            height="100%"
+            :chartsColumns="nitrogenChartsColumns"
+            :option="nitrogenOption"
+            chartsType="detail"
+          />
         </div>
         <div class="echarts-cqg-item">
           <BarAndLine
@@ -21,69 +22,70 @@
             height="100%"
             :chartsColumns="cqgChartsColumns"
             :option="cqgOption"
-            chartsType="detail" />
+            chartsType="detail"
+          />
         </div>
-      </div>    
-    </div>
+      </div>
     </div>
-  </template>
-  <script setup lang="ts">
-    import{ref, onMounted, onUnmounted, reactive } from 'vue'
-    import dayjs from 'dayjs'
-    import BarAndLine from '/@/components/chart/BarAndLine.vue';
-    import { list } from '../nitrogen.api'
+  </div>
+</template>
+<script setup lang="ts">
+  import { ref, onMounted, onUnmounted, reactive } from 'vue';
+  import dayjs from 'dayjs';
+  import BarAndLine from '/@/components/chart/BarAndLine.vue';
+  import { list } from '../nitrogen.api';
 
-    const nitrogenChartsColumns = [
-      {
-        legend: '空压机排气压力',
-        seriesName: '(Mpa)',
-        ymax: 100,
-        yname: 'Pa',
-        linetype: 'line',
-        yaxispos: 'left',
-        color: '#9BCB75',
-        sort: 1,
-        xRotate: 0,
-        dataIndex: 'compressExhaustPressF1',
-      },
-      {
-        legend: '空压机分离压力',
-        seriesName: '(Mpa)',
-        ymax: 100,
-        yname: 'Mpa',
-        linetype: 'line',
-        yaxispos: 'left',
-        color: '#1EB0FC',
-        sort: 1,
-        xRotate: 0,
-        dataIndex: 'compressSeparatePressF1',
-      },
-      {
-        legend: '空压机主机温度',
-        seriesName: '(℃)',
-        ymax: 200,
-        yname: '℃',
-        linetype: 'line',
-        yaxispos: 'right',
-        color: '#FDB146',
-        sort: 2,
-        xRotate: 0,
-        dataIndex: 'compressHostTempF1',
-      },
-      {
-        legend: '空压机机组温度',
-        seriesName: '(℃)',
-        ymax: 200,
-        yname: '℃',
-        linetype: 'line',
-        yaxispos: 'right',
-        color: '#EE6666',
-        sort: 2,
-        xRotate: 0,
-        dataIndex: 'compressCrewTempF1',
-      },
-    ];
-    const cqgChartsColumns = [
+  const nitrogenChartsColumns = [
+    {
+      legend: '空压机排气压力',
+      seriesName: '(Mpa)',
+      ymax: 100,
+      yname: 'Pa',
+      linetype: 'line',
+      yaxispos: 'left',
+      color: '#9BCB75',
+      sort: 1,
+      xRotate: 0,
+      dataIndex: 'compressExhaustPressF1',
+    },
+    {
+      legend: '空压机分离压力',
+      seriesName: '(Mpa)',
+      ymax: 100,
+      yname: 'Mpa',
+      linetype: 'line',
+      yaxispos: 'left',
+      color: '#1EB0FC',
+      sort: 1,
+      xRotate: 0,
+      dataIndex: 'compressSeparatePressF1',
+    },
+    {
+      legend: '空压机主机温度',
+      seriesName: '(℃)',
+      ymax: 200,
+      yname: '℃',
+      linetype: 'line',
+      yaxispos: 'right',
+      color: '#FDB146',
+      sort: 2,
+      xRotate: 0,
+      dataIndex: 'compressHostTempF1',
+    },
+    {
+      legend: '空压机机组温度',
+      seriesName: '(℃)',
+      ymax: 200,
+      yname: '℃',
+      linetype: 'line',
+      yaxispos: 'right',
+      color: '#EE6666',
+      sort: 2,
+      xRotate: 0,
+      dataIndex: 'compressCrewTempF1',
+    },
+  ];
+  const cqgChartsColumns = [
     {
       legend: '储气罐压力',
       seriesName: '(Mpa)',
@@ -122,101 +124,98 @@
     },
   ];
 
-    const nitrogenOption = {
-      grid: {
-        top: '20%',
-        left: '2px',
-        right: '0px',
-        bottom: '3%',
-        containLabel: true
-      },
-      toolbox: {
-        feature:{
-          
-        }
-      }
-    }
-
-    const cqgOption = {
-      grid: {
-        top: '20%',
-        left: '0px',
-        right: '40px',
-        bottom: '3%',
-        containLabel: true
-      },
-      toolbox: {
-        feature: {
+  const nitrogenOption = {
+    grid: {
+      top: '20%',
+      left: '2px',
+      right: '0px',
+      bottom: '3%',
+      containLabel: true,
+    },
+    toolbox: {
+      feature: {},
+    },
+  };
 
-        }
-      }
-    }
+  const cqgOption = {
+    grid: {
+      top: '20%',
+      left: '0px',
+      right: '40px',
+      bottom: '3%',
+      containLabel: true,
+    },
+    toolbox: {
+      feature: {},
+    },
+  };
 
-    const currentTime = ref(dayjs().format('YYYY-MM-DD HH:mm:ss'))
-    // const monitorData = [] as any[]
-    const dataSource = reactive<any[]>([])
+  const currentTime = ref(dayjs().format('YYYY-MM-DD HH:mm:ss'));
+  // const monitorData = [] as any[]
+  const dataSource = reactive<any[]>([]);
 
-    // https获取监测数据
-    let timer: null | NodeJS.Timeout = null;
-    let count = 0
-    async function getMonitor(flag?) {
-      if (Object.prototype.toString.call(timer) === '[object Null]') {
-        timer = await setTimeout(async () => {
+  // https获取监测数据
+  let timer: null | NodeJS.Timeout = null;
+  let count = 0;
+  async function getMonitor(flag?) {
+    if (Object.prototype.toString.call(timer) === '[object Null]') {
+      timer = await setTimeout(
+        async () => {
           await getDataSource();
           if (timer) {
             timer = null;
           }
           await getMonitor();
-        }, flag ? 0 : 1000);
-      }
-    };
+        },
+        flag ? 0 : 1000
+      );
+    }
+  }
 
-    async function getDataSource() {
-      
-      const res = await list({ devicetype: 'pressurefan', pagetype: 'normal' });
-      const dataList = res.msgTxt[0].datalist || [];
-      dataList.forEach((data, index) => {
-        const item = data.readData;
-        Object.assign(item, data);
-        item['readTime'] = item['readTime'].substring(11)
-        if(count == 0){
-          dataSource.push([item])
-        }else {
-          if(dataSource[index].length < 10){
-            dataSource[index].push(item)
-          }else {
-            dataSource[index].shift()
-            dataSource[index].push(item)
-          }
+  async function getDataSource() {
+    const res = await list({ devicetype: 'pressurefan', pagetype: 'normal' });
+    const dataList = res.msgTxt[0].datalist || [];
+    dataList.forEach((data, index) => {
+      const item = data.readData;
+      Object.assign(item, data);
+      item['readTime'] = item['readTime'].substring(11);
+      if (count == 0) {
+        dataSource.push([item]);
+      } else {
+        if (dataSource[index].length < 10) {
+          dataSource[index].push(item);
+        } else {
+          dataSource[index].shift();
+          dataSource[index].push(item);
         }
-      });
-      count++ // 实时数据累计
-      console.log('实时监测数据----->', dataSource)
-    };
-
-    onMounted(() => {
-      getMonitor(true)
-    })
-
-    onUnmounted(() => {
-      if (timer) {
-        clearTimeout(timer);
-        timer = undefined;
       }
     });
+    count++; // 实时数据累计
+    console.log('实时监测数据----->', dataSource);
+  }
+
+  onMounted(() => {
+    getMonitor(true);
+  });
 
+  onUnmounted(() => {
+    if (timer) {
+      clearTimeout(timer);
+      timer = undefined;
+    }
+  });
 </script>
 <style lang="less" scoped>
-  .button-box{
+  .button-box {
     text-align: end;
     margin-top: 10px;
     margin-right: 10px;
   }
-  .nitrogen-echatrs-box{
+  .nitrogen-echatrs-box {
     width: 100%;
     height: 100%;
   }
-  .echarts-container{
+  .echarts-container {
     position: fixed;
     width: 100%;
     height: 730px;
@@ -227,21 +226,19 @@
     display: flex;
     flex-direction: column;
     z-index: 99999;
-    
-    .echarts-item{
+
+    .echarts-item {
       display: flex;
       flex-direction: row;
       justify-content: space-between;
-      .echarts-nitrogen-item{
+      .echarts-nitrogen-item {
         width: calc(60% - 30px);
         height: 240px;
       }
-      .echarts-cqg-item{
+      .echarts-cqg-item {
         width: calc(40% - 10px);
         height: 240px;
       }
     }
-    
   }
-
-</style>
+</style>

src/views/vent/monitorManager/compressor/components/nitrogenHome_dltj.vue

@@ -0,0 +1,960 @@
+<template>
+  <div id="nitrogen3D" style="width: 100%; height: 100%; position: absolute; overflow: hidden"></div>
+  <div
+    id="nitrogenCss3D"
+    class="threejs-Object-CSS"
+    style="width: 100%; height: 100%; position: absolute; pointer-events: none; overflow: hidden; z-index: 2; top: 0px; left: 0px"
+  >
+    <a-spin :spinning="loading" />
+    <div v-for="groupNum in monitorDataGroupNum" :key="groupNum" class="modal-monitor">
+      <fourBorderBg :class="`kyj${groupNum}`" :id="`nitrogenMonitor${groupNum}`">
+        <div class="title">空压机{{ groupNum }} </div>
+        <template v-for="(preMonitor, preMonitorIndex) in preMonitorList" :key="preMonitorIndex">
+          <div v-if="preMonitor.code !== 'signal'" class="monitor-item">
+            <span class="monitor-title">{{ preMonitor.title }}:</span>
+            <span class="monitor-val"
+              ><span class="val">{{ monitorData[preMonitor.code + groupNum] ? formatNum(monitorData[preMonitor.code + groupNum]) : '-' }}</span
+              ><span class="unit">{{ preMonitor.unit }}</span></span
+            >
+          </div>
+          <div v-else class="signal-item">
+            <div class="signal" v-for="(signal, childIndex) in preMonitor.child" :key="childIndex">
+              <span class="monitor-title">{{ signal.title }}</span>
+              <span style="display: inline-block; width: 30px; text-align: center" v-if="signal.isFault == -2">{{
+                monitorData[signal.code + groupNum] == '0' ? '就地' : monitorData[signal.code + groupNum] == '1' ? '远程' : '-'
+              }}</span>
+              <span style="display: inline-block; width: 30px; text-align: center" v-else-if="signal.isFault == -1">{{
+                monitorData[signal.code + groupNum] == '1' ? '加载' : monitorData[signal.code + groupNum] == '0' ? '卸载' : '-'
+              }}</span>
+              <span
+                v-else
+                :class="{
+                  'signal-round': true,
+                  'signal-round-run': !signal.isFault && monitorData[signal.code + groupNum] == '1',
+                  'signal-round-warning': signal.isFault && monitorData[signal.code + groupNum] == '1',
+                  'signal-round-gry': monitorData[signal.code + groupNum] != '1',
+                }"
+              ></span>
+            </div>
+          </div>
+        </template>
+      </fourBorderBg>
+    </div>
+  </div>
+  <div class="nitrogen-home">
+    <div class="nitrogen-container">
+      <div class="top-box">
+        <!-- 中间区域控制按钮 -->
+        <div class="center-item-box">
+          <div class="top-left">
+            <div class="button-box" @click="handlerDevice(airCompressorState[0], '主机启动')">上位机启动</div>
+            <div class="button-box" @click="handlerDevice(airCompressorState[0], '主机停止')">上位机停止</div>
+            <div class="button-box" @click="handlerDevice(airCompressorState[0], '备机启动')">上位复位</div>
+          </div>
+          <div class="top-center">
+            <div class="top-c-label">通信状态：</div>
+            <div class="top-c-val">{{ monitorData['netStatus'] == 1 ? '连接' : monitorData['netStatus'] == 0 ? '断开' : '未知' }}</div>
+          </div>
+          <div class="top-right">
+            <div class="control-type">
+              <div class="control-title">空压机远近控切换：</div>
+              <a-radio-group v-model:value="monitorData['RemSelect']">
+                <a-radio :value="`1`">远程</a-radio>
+                <a-radio :value="`0`">就地</a-radio>
+              </a-radio-group>
+            </div>
+            <div class="control-type">
+              <div class="control-title">制氮机远近控切换：</div>
+              <a-radio-group v-model:value="monitorData['LocSelect']">
+                <a-radio :value="`1`">远程</a-radio>
+                <a-radio :value="`0`">就地</a-radio>
+              </a-radio-group>
+            </div>
+          </div>
+        </div>
+        <!-- 左边监测数据 -->
+        <div class="lr-box left-box">
+          <ventBox1>
+            <template #title>
+              <div>注氮机监测</div>
+            </template>
+            <template #container>
+              <div class="input-item" v-for="(preFan, index) in nitrogenMonitorData" :key="index">
+                <div class="title">{{ preFan.title }}</div>
+                <div v-if="preFan.unit !== 'signal'" class="value">{{
+                  monitorData[preFan.code] >= 0 ? formatNum(Number(monitorData[preFan.code])) : '-'
+                }}</div>
+                <div
+                  v-else
+                  :class="{
+                    'signal-round': true,
+                    'signal-round-warning': monitorData[preFan.code] == '1',
+                    'signal-round-gry': monitorData[preFan.code] != '1',
+                  }"
+                ></div>
+                <div class="unit">{{ preFan.unit !== 'signal' ? `(${preFan.unit})` : '' }}</div>
+              </div>
+            </template>
+          </ventBox1>
+          <div class="item item-l" v-for="groupNum in monitorDataGroupNum" :key="groupNum">
+            <ventBox1>
+              <template #title>
+                <div>空压机{{ groupNum }}</div>
+              </template>
+              <template #container>
+                <div class="monitor-box">
+                  <div class="monitor-item">
+                    <div class="state-item" v-for="(preFan, index) in preFanMonitorData" :key="index">
+                      <div class="state-title">{{ preFan.title + (preFan.unit !== 'signal' ? `(${preFan.unit})` : '') }}</div>
+                      <div v-if="preFan.unit !== 'signal'" class="state-val">{{
+                        monitorData[preFan.code + groupNum] >= 0 ? formatNum(Number(monitorData[preFan.code + groupNum])) : '-'
+                      }}</div>
+                      <div
+                        v-else
+                        :class="{
+                          'signal-round': true,
+                          'signal-round-warning': monitorData[preFan.code + groupNum] == '1',
+                          'signal-round-gry': monitorData[preFan.code + groupNum] != '1',
+                        }"
+                      ></div>
+                    </div>
+                  </div>
+                </div>
+              </template>
+            </ventBox1>
+          </div>
+        </div>
+        <!-- 右边控制状态 -->
+        <div class="lr-box right-box">
+          <ventBox1 class="vent-margin-t-10">
+            <template #title>
+              <div>设备实时监测曲线</div>
+            </template>
+            <template #container>
+              <BarAndLine
+                v-if="chartsColumns.length > 0"
+                xAxisPropType="readTime"
+                :dataSource="echartData"
+                height="340px"
+                :chartsColumns="chartsColumns"
+                chartsType="listMonitor"
+                :option="echatsOption"
+              />
+            </template>
+          </ventBox1>
+          <div ref="playerRef" style="height: auto; width: 100%; margin-top: 10px"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup name="nitrogenHome">
+  import { onMounted, onUnmounted, ref, watch, reactive, defineProps, nextTick, inject } from 'vue';
+  import ventBox1 from '/@/components/vent/ventBox1.vue';
+  import fourBorderBg from '../../../comment/components/fourBorderBg.vue';
+  import { mountedThree, destroy, setModelType } from '../nitrogen.threejs';
+  import { getDevice } from '../nitrogen.api';
+  import BarAndLine from '/@/components/chart/BarAndLine.vue';
+  import { deviceControlApi } from '/@/api/vent/index';
+  import { preMonitorList, preFanMonitorData, nitrogenMonitorData } from '../nitrogen.data.dltj';
+  import { formatNum } from '/@/utils/ventutil';
+  import { useCamera } from '/@/hooks/system/useCamera';
+  import { message } from 'ant-design-vue';
+  import lodash from 'lodash';
+  const globalConfig = inject('globalConfig');
+
+  const props = defineProps({
+    deviceId: {
+      type: String,
+      require: true,
+    },
+    modalType: {
+      type: String,
+      require: true,
+    },
+  });
+  const playerRef = ref();
+  const refresh = ref(false);
+  const modalTitle = ref(''); // 模态框标题显示内容，根据设备操作类型决定
+  const modalType = ref(''); // 模态框内容显示类型，设备操作类型
+  const modalIsShow = ref<boolean>(false); // 是否显示模态框
+  const loading = ref(true);
+  let kzParam = reactive<any>({
+    data: {},
+    isFw: null,
+  });
+
+  // const kyjs = ['1号空压机', '1号空压机', '1号空压机', '1号空压机'];
+  const flvURL1 = () => {
+    // return `https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv`;
+    return '';
+  };
+  const colors = ['#FDB146', '#EE6666', '#9BCB75', '#03C2EC', '#DA3914', '#9C83D9'];
+  const echatsOption = {
+    grid: {
+      top: '35%',
+      left: '15%',
+      right: '20px',
+      bottom: '8%',
+      // containLabel: true
+    },
+    toolbox: {
+      feature: {},
+    },
+  };
+
+  const monitorNetStatus = ref(0);
+  const monitorDataGroupNum = ref(2);
+
+  let airCompressorState = reactive<any[]>([]);
+
+  const chartsColumns = ref([
+    {
+      legend: '瞬时流量',
+      seriesName: '(m³/h)',
+      ymax: 2000,
+      yname: 'm³/h',
+      linetype: 'line',
+      yaxispos: 'left',
+      color: '#FDB146',
+      sort: 1,
+      xRotate: 0,
+      dataIndex: 'InputFlux',
+    },
+  ]);
+  const { getCamera, webRtcServer } = useCamera();
+
+  const monitorData = ref({});
+
+  //图表数据
+  let echartData = ref<any>([]);
+
+  // https获取监测数据
+  let timer: null | NodeJS.Timeout = null;
+  async function getMonitor(flag?) {
+    if (Object.prototype.toString.call(timer) === '[object Null]') {
+      timer = await setTimeout(
+        async () => {
+          if (props.deviceId) {
+            await getDataSource(props.deviceId);
+          }
+          if (timer) {
+            timer = null;
+          }
+          await getMonitor();
+        },
+        flag ? 0 : 3000
+      );
+    }
+  }
+
+  async function getDataSource(systemID) {
+    const res = await getDevice({ devicetype: 'sys', systemID, type: 'all' });
+    if (res) {
+      const result = res;
+      // const result = {
+      //   cmd: 'monitordata',
+      //   msgTxt: [
+      //     {
+      //       datalist: [
+      //         {
+      //           msgType: null,
+      //           deviceID: '1760842915239510017',
+      //           strname: '52603注氮机',
+      //           strinstallpos: '52603注氮机',
+      //           fsectarea: 'null',
+      //           stationname: '52603注氮机',
+      //           deviceType: 'nitrogen_52603',
+      //           typeName: '52603注氮机',
+      //           netStatus: 1,
+      //           warnFlag: 0,
+      //           warnLevel: 0,
+      //           warnLevel_str: '正常',
+      //           warnTime: null,
+      //           readTime: '2024-02-28 17:29:15',
+      //           warnDes: '',
+      //           frontGateOpenCtrl: null,
+      //           rearGateOpenCtrl: null,
+      //           readData: {
+      //             ExhaustTemp1: '15',
+      //             Status2: '0',
+      //             ExhaustTemp2: '26',
+      //             RunTime2: '2136',
+      //             RunTime1: '5127',
+      //             sign: '0',
+      //             NitrogenPurity: '206.4',
+      //             SysVoltage1: '640',
+      //             SysVoltage2: '653',
+      //             CtrlMode2: '0',
+      //             ExhaustPreHighFault2: '1',
+      //             ExhaustPreHighFault1: '1',
+      //             HMIReset: '0',
+      //             HMIStop: '0',
+      //             InputFlux: '0',
+      //             LocSelect: '0',
+      //             OilPressureLowFault1: '1',
+      //             OilPressureLowFault2: '0',
+      //             PhaseSequenceFault2: '0',
+      //             PhaseSequenceFault1: '0',
+      //             LoadorUnload2: '1',
+      //             LoadorUnload1: '1',
+      //             CtrlMode1: '0',
+      //             PreMembraneTemperature: '15.4',
+      //             HMIStart: '0',
+      //             ExhaustPre2: '7',
+      //             ExhaustPre1: '8',
+      //             LoadTime2: '2133',
+      //             RemSelect: '0',
+      //             Status1: '0',
+      //             LoadTime1: '5121',
+      //             isRun: '-2',
+      //             FluxTotal: '7242',
+      //             LeakageLock1: '0',
+      //             LeakageLock2: '0',
+      //           },
+      //           readDataDes: null,
+      //           summaryHour: [],
+      //           summaryDay: [],
+      //           history: [],
+      //           totalInfo: null,
+      //           sign: null,
+      //           cameras: [],
+      //           links: [],
+      //           other1: null,
+      //           other2: null,
+      //           other3: null,
+      //           remarkInfo: null,
+      //         },
+      //       ],
+      //       avginfo: {
+      //         warnFlag: {
+      //           value: 0,
+      //         },
+      //       },
+      //       typeName: '52603注氮机',
+      //       type: 'nitrogen_52603',
+      //     },
+      //     {
+      //       subtype: 'sys_nitrogen',
+      //       datalist: [
+      //         {
+      //           msgType: null,
+      //           deviceID: '1760932094094950402',
+      //           strname: '注氮系统',
+      //           strinstallpos: '注氮系统',
+      //           fsectarea: 'null',
+      //           stationname: null,
+      //           deviceType: 'sys_nitrogen',
+      //           typeName: '注氮',
+      //           netStatus: 0,
+      //           warnFlag: 0,
+      //           warnLevel: null,
+      //           warnLevel_str: null,
+      //           warnTime: null,
+      //           readTime: '2024-02-28 17:21:14',
+      //           warnDes: '',
+      //           frontGateOpenCtrl: null,
+      //           rearGateOpenCtrl: null,
+      //           readData: {
+      //             sign: '0',
+      //             isRun: '-2',
+      //           },
+      //           readDataDes: null,
+      //           summaryHour: [],
+      //           summaryDay: [],
+      //           history: [],
+      //           totalInfo: null,
+      //           sign: null,
+      //           cameras: [],
+      //           links: [],
+      //           other1: null,
+      //           other2: null,
+      //           other3: null,
+      //           remarkInfo: '设备断线',
+      //         },
+      //       ],
+      //       typeName: '综合监测系统',
+      //       type: 'sys',
+      //     },
+      //   ],
+      // };
+
+      if (!result || result.msgTxt.length < 1) return;
+      result.msgTxt.forEach((item) => {
+        if (item.type && item.type.startsWith('nitrogen')) {
+          airCompressorState.length = 0;
+          let netStatus = 0;
+          monitorData.value = Object.assign(item['datalist'][0], item['datalist'][0]['readData']);
+          if (monitorData.value['netStatus'] == 1) {
+            netStatus = 1;
+          }
+          airCompressorState.push({
+            id: monitorData.value['deviceID'],
+            deviceType: monitorData.value['deviceType'],
+            HMIStart: monitorData.value['HMIStart'],
+            HMIStop: monitorData.value['HMIStop'],
+          });
+          monitorNetStatus.value = netStatus;
+          const airCompressor = { readTime: monitorData.value['readTime'].substring(11) };
+          const dataArr = lodash.cloneDeep(echartData.value);
+          //图表数据
+          if (dataArr.length <= 5) {
+            airCompressor[`FluxTotal`] = monitorData.value['FluxTotal'] || 0;
+            dataArr.push(airCompressor);
+          } else {
+            dataArr.shift();
+            dataArr.push(airCompressor);
+          }
+          echartData.value = dataArr;
+        }
+      });
+      refresh.value = true;
+      nextTick(() => {
+        refresh.value = false;
+      });
+    }
+  }
+
+  function handlerDevice(data, bol) {
+    kzParam.data = data;
+    kzParam.isFw = bol;
+    if (bol) {
+      modalTitle.value = '一键复位';
+      modalType.value = '1';
+      modalIsShow.value = true;
+      kzParam.data.HMIReset = !data.HMIReset;
+    } else {
+      modalTitle.value = '一键启停';
+      modalType.value = '2';
+      modalIsShow.value = true;
+      kzParam.data.HMIStartStop = !data.HMIStartStop;
+    }
+  }
+  function handleOK(passWord, handlerState) {
+    console.log(kzParam, 'kz----------');
+    // if (passWord !== '123456') {
+    //   message.warning('密码不正确，请重新输入');
+    //   return;
+    // }
+
+    let data = {};
+    if (kzParam.isFw) {
+      data = {
+        deviceid: kzParam.data.id,
+        devicetype: kzParam.data.deviceType,
+        password: passWord,
+        HMIReset: kzParam.data.HMIReset,
+      };
+    } else {
+      data = {
+        deviceid: kzParam.data.id,
+        password: passWord,
+        devicetype: kzParam.data.deviceType,
+        HMIStartStop: kzParam.data.HMIStartStop,
+      };
+    }
+
+    deviceControlApi(data).then((res) => {
+      // 模拟时开启
+      if (res.success) {
+        modalIsShow.value = false;
+        getDataSource(props.deviceId);
+        if (globalConfig.History_Type == 'remote') {
+          message.success('指令已下发至生产管控平台成功！');
+        } else {
+          message.success('指令已下发成功！');
+        }
+      }
+    });
+  }
+  function handleCancel() {
+    modalIsShow.value = false;
+    modalTitle.value = '';
+    modalType.value = '';
+  }
+
+  watch([monitorDataGroupNum, loading], ([newMonitorDataGroupNum, newLoading]) => {
+    nextTick(() => {
+      if (newMonitorDataGroupNum && !newLoading) {
+        setModelType(props.modalType, newMonitorDataGroupNum);
+      }
+    });
+  });
+
+  onMounted(async () => {
+    await getMonitor(true);
+    await mountedThree().then(() => {
+      loading.value = false;
+    });
+    await getCamera(props.deviceId, playerRef.value);
+  });
+
+  onUnmounted(() => {
+    destroy();
+    if (webRtcServer.length > 0) {
+      webRtcServer.forEach((item) => {
+        item.disconnect();
+      });
+    }
+    if (timer) {
+      clearTimeout(timer);
+      timer = undefined;
+    }
+  });
+</script>
+
+<style lang="less" scoped>
+  @ventSpace: zxm;
+
+  .nitrogen-box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+  }
+
+  #nitrogenCss3D {
+    .modal-monitor {
+      width: 200px;
+      position: absolute;
+      left: 0px;
+      top: 0px;
+    }
+
+    &:deep(.win) {
+      margin: 0 !important;
+      background: #00000044;
+    }
+  }
+
+  .nitrogen-home {
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    z-index: 9999;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    pointer-events: none;
+    top: 20px;
+
+    .nitrogen-container {
+      width: 100%;
+      height: calc(100% - 100px);
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 100px;
+      .device-state {
+        width: 100%;
+        position: absolute;
+        top: 20px;
+        color: #e90000;
+        display: flex;
+        justify-content: center;
+        font-size: 20px;
+      }
+      .top-box {
+        width: 100%;
+        padding: 10px;
+        overflow: hidden;
+        display: flex;
+        justify-content: space-between;
+        // margin-top: 40px;
+
+        .center-item-box {
+          position: absolute;
+          left: 50%;
+          top: 50px;
+          transform: translate(-48%, 0);
+          width: calc(100% - 720px);
+          height: 50px;
+          display: flex;
+          align-items: center;
+          pointer-events: auto;
+
+          .top-left {
+            display: flex;
+            flex: 1.5;
+            color: #fff;
+
+            .button-box {
+              position: relative;
+              width: auto;
+              height: 32px;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              border-radius: 5px;
+              color: #fff;
+              padding: 10px 15px;
+              margin: 0px 10px;
+              box-sizing: border-box;
+              cursor: pointer;
+              background: linear-gradient(#1fa6cb, #127cb5);
+              &:hover {
+                background: linear-gradient(#1fa6cbcc, #127cb5cc);
+              }
+            }
+          }
+          .top-center {
+            display: flex;
+            flex: 1;
+            justify-content: center;
+            align-items: center;
+            font-size: 20px;
+            color: #fff;
+            .top-c-label {
+              color: yellow;
+            }
+          }
+
+          .top-right {
+            display: flex;
+            flex: 2;
+            justify-content: right;
+            align-items: center;
+            color: #fff;
+            .control-type {
+              display: flex;
+              color: #fff;
+              .control-title {
+                color: #73e8fe;
+              }
+            }
+          }
+        }
+        .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;
+          height: calc(100% - 70px);
+        }
+
+        .item {
+          width: 305px;
+          height: auto;
+          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;
+            font-size: 16px;
+
+            &::after {
+              content: '';
+              position: absolute;
+              display: block;
+              width: 4px;
+              height: 12px;
+              top: 7px;
+              left: 0px;
+              background: #45d3fd;
+              border-radius: 4px;
+            }
+          }
+
+          .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;
+              }
+            }
+          }
+
+          .signal-box {
+            margin: 5px 0;
+            display: flex;
+            align-items: center;
+
+            .signal-title {
+              color: #7af5ff;
+              margin: 0 5px;
+            }
+
+            &:last-child {
+              margin-right: 0px;
+            }
+          }
+
+          .list-item {
+            padding: 0 10px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+
+            .item-data-key {
+              color: #ffffff99;
+            }
+          }
+
+          .item-data-box {
+            color: #fff;
+
+            .state-icon {
+              display: inline-block;
+              width: 12px;
+              height: 12px;
+              border-radius: 12px;
+            }
+
+            .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;
+              }
+            }
+
+            .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);
+              }
+            }
+
+            .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);
+              }
+            }
+          }
+        }
+
+        .right-box {
+          width: 300px;
+          margin-top: 50px;
+        }
+
+        .left-box {
+          width: 335px;
+          margin-top: 80px;
+          .input-item {
+            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 {
+              width: 100px;
+              color: #00d8ff;
+              padding-right: 20px;
+            }
+            .unit {
+              width: 80px;
+            }
+          }
+        }
+      }
+
+      &:deep(.win) {
+        width: 100%;
+        margin: 0 !important;
+      }
+    }
+  }
+
+  &:deep(.main) {
+    .title {
+      height: 34px;
+      text-align: center;
+      font-weight: 600;
+      color: #7af5ff;
+      // background-image: url('../../../assets/img/yfj/light.png');
+      background-repeat: no-repeat;
+      background-position-x: center;
+      background-position-y: 100%;
+      background-size: 80%;
+      font-size: 16px;
+    }
+
+    .monitor-item {
+      width: 200px;
+      display: flex;
+      flex-direction: row;
+      width: auto;
+      margin-bottom: 3px;
+
+      .monitor-val {
+        color: #ffb700;
+        display: flex;
+        width: auto;
+
+        .val {
+          width: 80px;
+          font-size: 14px;
+        }
+
+        .unit {
+          color: #ffffffbb;
+          font-size: 14px;
+        }
+      }
+    }
+
+    .monitor-title {
+      width: 100px;
+      color: #7af5ff;
+      font-weight: 400;
+      font-size: 14px;
+    }
+
+    .signal-item {
+      display: flex;
+      justify-content: space-between;
+
+      // margin-bottom: 5px;
+      .signal-round {
+        display: inline-block;
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        margin: 0 10px;
+        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-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;
+        }
+      }
+    }
+  }
+
+  :deep(.zxm-radio-wrapper) {
+    color: #fff !important;
+  }
+</style>

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

@@ -1,37 +1,27 @@
 <template>
   <div class="nitrogen-box">
     <customHeader :fieldNames="{ label: 'systemname', value: 'id', options: 'children' }" :options = 'options' @change="getSelectRow" :optionValue="optionValue">智能注氮管控系统</customHeader>
-    <!-- 阿里云 -->
-    <!-- <nitrogenHome v-if="activeKey == 'nitrogen_page' && optionValue && optionValue !='1702602347296399361'" :device-id="optionValue" :modal-type="modalType" /> -->
-    <!-- 布尔台 -->
-    <!-- <nitrogenHome1 v-if="activeKey == 'nitrogen_page' && optionValue" :device-id="optionValue" :modal-type="modalType" /> -->
-    <!-- 保德 -->
-    <!-- <nitrogenHome2 v-if="activeKey == 'nitrogen_page' && optionValue" :device-id="optionValue" :modal-type="modalType" /> -->
-    <nitrogenHomeBlt v-if="activeKey == 'nitrogen_page' && optionValue" :device-id="optionValue" :modal-type="modalType" />
+    <nitrogenHome v-if="activeKey == 'nitrogen_page' && optionValue" :device-id="optionValue" :modal-type="modalType" />
     <nitrogenEcharts v-if="activeKey == 'yfj_monitor_echarts'"/>
     <nitrogenHistory ref="historyTable" :device-id="optionValue" :device-type="optionType" v-if="activeKey == 'yfj_history'"/>
     <nitrogenHandleHistory ref="alarmHistoryTable" v-if="activeKey == 'yfj_handler_history'"/>
     <nitrogenAlarmHistory ref="handlerHistoryTable" v-if="activeKey == 'yfj_faultRecord'"/>
     <BottomMenu :nav-list="navList" @change="changeActive"/>
   </div>
-  
 </template>
 <script lang="ts" setup>
 import { ref, onMounted, onUnmounted, nextTick } from 'vue'
 import customHeader from '/@/views/vent/comment/components/customHeader.vue';
-import nitrogenHome from './components/nitrogenHome.vue'
-import nitrogenHome1 from './components/nitrogenHome1.vue' // 布尔台
-import nitrogenHome2 from './components/nitrogenHome2.vue' // 保德
-import nitrogenHomeBlt from './components/nitrogenHome_blt.vue' // 保德
 import nitrogenEcharts from './components/nitrogenEcharts.vue'
 import nitrogenHistory from './components/nitrogenHistory.vue'
 import nitrogenHandleHistory from './components/nitrogenHandleHistory.vue'
 import nitrogenAlarmHistory from './components/nitrogenAlarmHistory.vue'
 import BottomMenu from '/@/views/vent/comment/components/bottomMenu.vue';
 import { useRouter } from 'vue-router';
-import { navList } from './nitrogen.data'
+import { navList, getMonitorComponent } from './nitrogen.data'
 import { getTableList, systemList,  } from "./nitrogen.api";
 
+const nitrogenHome = getMonitorComponent()
 type DeviceType = { deviceType: string, deviceName: string, datalist: any[] };
 
 const { currentRoute } = useRouter();

src/views/vent/monitorManager/compressor/nitrogen.data.blt.ts

@@ -1,29 +1,6 @@
 import { ref, reactive } from 'vue';
 import echarts from '/@/utils/lib/echarts';
 
-export const navList = ref([
-  {
-    title: '监控界面',
-    pathName: 'nitrogen_page',
-    isHover: false,
-  },
-  {
-    title: '历史监测记录',
-    pathName: 'yfj_history',
-    isHover: false,
-  },
-  {
-    title: '操作历史记录',
-    pathName: 'yfj_handler_history',
-    isHover: false,
-  },
-  {
-    title: '故障诊断历史记录',
-    pathName: 'yfj_faultRecord',
-    isHover: false,
-  },
-]);
-
 export const preMonitorList = [
   {
     title: `累计流量`,

src/views/vent/monitorManager/compressor/nitrogen.data.dltj.ts

@@ -0,0 +1,100 @@
+export const preMonitorList = [
+  {
+    title: `排气压力`,
+    code: `ExhaustPre`,
+    unit: 'MPa',
+    child: [],
+  },
+  {
+    title: `排气温度`,
+    code: `ExhaustTemp`,
+    unit: '℃',
+    child: [],
+  },
+  {
+    title: `加载时间`,
+    code: `LoadTime`,
+    unit: 'h',
+    child: [],
+  },
+  {
+    title: `运行时间`,
+    code: `RunTime`,
+    unit: 'h',
+    child: [],
+  },
+  {
+    code: 'signal',
+    child: [
+      {
+        title: `加载/卸载：`,
+        code: `LoadorUnload`,
+        isFault: -1,
+      },
+      {
+        title: `控制方式：`,
+        code: `CtrlMode`,
+        isFault: -2,
+      },
+    ],
+  },
+  {
+    code: 'signal',
+    child: [
+      {
+        title: `运行信号：`,
+        code: `Status`,
+        isFault: false,
+      },
+      {
+        title: `排气压力过高：`,
+        code: `ExhaustPreHighFault`,
+        isFault: true,
+      },
+    ],
+  },
+];
+export const preFanMonitorData = [
+  {
+    title: '系统电压',
+    code: 'SysVoltage',
+    unit: 'V',
+  },
+  {
+    title: '漏电闭锁',
+    code: 'LeakageLock',
+    unit: 'signal',
+  },
+  {
+    title: '油压低故障',
+    code: 'OilPressureLowFault',
+    unit: 'signal',
+  },
+  {
+    title: '相序故障',
+    code: 'PhaseSequenceFault',
+    unit: 'signal',
+  },
+];
+export const nitrogenMonitorData = [
+  {
+    title: '总累计流量',
+    code: 'FluxTotal',
+    unit: 'm³',
+  },
+  {
+    title: '瞬时流量',
+    code: 'InputFlux',
+    unit: 'm³/min',
+  },
+  {
+    title: '氮气纯度',
+    code: 'NitrogenPurity',
+    unit: '%',
+  },
+  {
+    title: '膜前温度',
+    code: 'PreMembraneTemperature',
+    unit: '℃',
+  },
+];

src/views/vent/monitorManager/compressor/nitrogen.data.ts

@@ -1,5 +1,6 @@
-import { ref, reactive } from 'vue';
+import { ref, reactive, defineAsyncComponent } from 'vue';
 import echarts from '/@/utils/lib/echarts';
+import { useGlobSetting } from '/@/hooks/setting';
 
 export const navList = ref([
   {
@@ -197,3 +198,21 @@ export const zhudanOption = reactive({
     },
   ],
 });
+
+export function getMonitorComponent() {
+  const { sysOrgCode } = useGlobSetting();
+  let nitrogenHome;
+  switch (sysOrgCode) {
+    case 'sdmtjtdltmk': //大柳塔井
+      nitrogenHome = defineAsyncComponent(() => import('./components/nitrogenHome_dltj.vue'));
+    case 'sdmtjtbetmk': // 布尔台
+      nitrogenHome = defineAsyncComponent(() => import('./components/nitrogenHome_bet.vue'));
+    case 'sdmtjtbdmk': // 保德
+      nitrogenHome = defineAsyncComponent(() => import('./components/nitrogenHome_bd.vue'));
+    case 'sdmtjtbltmk': // 补连塔
+      nitrogenHome = defineAsyncComponent(() => import('./components/nitrogenHome_blt.vue'));
+    default:
+      nitrogenHome = defineAsyncComponent(() => import('./components/nitrogenHome_blt.vue'));
+  }
+  return nitrogenHome;
+}

src/views/vent/monitorManager/nitrogen/components/nitrogenHome1.vue → src/views/vent/monitorManager/nitrogen/components/nitrogenHome.vue

@@ -144,24 +144,11 @@
   import { mountedThree, destroy, setModelType } from '../nitrogen.threejs';
   import { list } from '../nitrogen.api';
   import ventBox1 from '/@/components/vent/ventBox1.vue';
-  // 锦界
-  // import { monitorDataGroupArr, preFanMonitorData, monitorData, preMonitorList, cqgMonitorList, prefix, getSysState } from '../nitrogen.dataJj';
-  // import type { State } from '../nitrogen.dataJj';
-  // 布尔台
-  // import { monitorDataGroupArr, preFanMonitorData, preMonitorList, cqgMonitorList, prefix, getSysState, totalData } from '../nitrogen.dataBet';
-  // import type { State } from '../nitrogen.dataBet';
-  // 活鸡兔
-  import { monitorDataGroupArr, preFanMonitorData, preMonitorList, cqgMonitorList, prefix, getSysState, totalData } from '../nitrogen.dataHjt';
-  import type { State } from '../nitrogen.dataHjt';
-  // 大柳塔
-  // import { monitorDataGroupArr, preFanMonitorData, preMonitorList, cqgMonitorList, prefix, getSysState, totalData } from '../nitrogen.dataDlt';
-  // import type { State } from '../nitrogen.dataDlt';
-  // 窑街三矿
-  // import { monitorDataGroupArr, preFanMonitorData, preMonitorList, cqgMonitorList, prefix, getSysState } from '../nitrogen.dataYJ';
-  // import type { State } from '../nitrogen.dataYJ';
-
+  import { getMonitorData } from '../nitrogen.data.1';
+  import type { State } from '../nitrogen.data.1';
   import { formatNum } from '/@/utils/ventutil';
 
+  const { monitorDataGroupArr, preFanMonitorData, preMonitorList, cqgMonitorList, prefix, getSysState, totalData } = getMonitorData();
   const loading = ref(true);
   const monitorDataGroupFlag = ref(0);
   const monitorDataGroup = ref<Number[]>([]);
@@ -221,11 +208,13 @@
   }
 
   onMounted(async () => {
-    mountedThree(monitorDataGroupArr).then(async () => {
-      await getMonitor(true);
+    setTimeout(() => {
       monitorDataGroupFlag.value = 1;
-      setMonitorGroupNum(1);
-    });
+      mountedThree(monitorDataGroupArr).then(async () => {
+        setMonitorGroupNum(1);
+        await getMonitor(true);
+      });
+    }, 0);
   });
 
   onUnmounted(() => {

src/views/vent/monitorManager/nitrogen/components/nitrogenHomeYJ.vue

@@ -1,804 +0,0 @@
-<template>
-  <div id="compressor3D" style="width: 100%; height: 100%; position: absolute; overflow: hidden"></div>
-  <div
-    id="compressorCss3D"
-    class="threejs-Object-CSS compressorCss3D-box"
-    style="width: 100%; height: 100%; position: absolute; pointer-events: none; overflow: hidden; z-index: 2; top: 0px; left: 0px"
-  >
-    <div v-for="(groupNum, index) in monitorDataGroup" :key="index" class="modal-monitor">
-      <fourBorderBg :class="`kyj${index}`" :id="`nitrogenMonitor${groupNum}`">
-        <div class="title">{{ kyjs[index] }} </div>
-        <template v-for="(preMonitor, preMonitorIndex) in preMonitorList" :key="preMonitorIndex">
-          <div v-if="preMonitor.code !== 'signal'" class="monitor-item">
-            <span class="monitor-title">{{ preMonitor.title }}:</span>
-            <span class="monitor-val"
-              ><span class="val">{{
-                monitorData[preMonitor.code.replace(prefix[0], `${prefix[0]}${groupNum}`)]
-                  ? formatNum(monitorData[preMonitor.code.replace(prefix[0], `${prefix[0]}${groupNum}`)])
-                  : '-'
-              }}</span
-              ><span class="unit">{{ preMonitor.unit }}</span></span
-            >
-          </div>
-          <div v-else class="signal-item">
-            <div class="signal" v-for="(signal, childIndex) in preMonitor.child" :key="childIndex">
-              <span class="monitor-title">{{ signal.title }}</span>
-              <span
-                :class="{
-                  'signal-round': true,
-                  'signal-round-run': signal.title != '故障信号' && monitorData[signal.code.replace(prefix[0], `${prefix[0]}${groupNum}`)] == '1',
-                  'signal-round-warning': signal.title == '故障信号' && monitorData[signal.code.replace(prefix[0], `${prefix[0]}${groupNum}`)] == '1',
-                  'signal-round-gry': monitorData[signal.code.replace(prefix[0], `${prefix[0]}${groupNum}`)] != '1',
-                }"
-              ></span>
-            </div>
-          </div>
-        </template>
-      </fourBorderBg>
-      <fourBorderBg :class="`cqg${index}`" :id="`cqgMonitor${groupNum}`">
-        <div class="title">{{ cqgs[index] }}</div>
-        <template v-for="(cqgMonitor, cqgMonitorIndex) in cqgMonitorList" :key="cqgMonitorIndex">
-          <div class="monitor-item">
-            <span class="monitor-title">{{ cqgMonitor.title }}:</span>
-            <span class="monitor-val"
-              ><span class="val">{{
-                monitorData[cqgMonitor.code.replace(prefix[0], `${prefix[1]}${groupNum}`)]
-                  ? formatNum(monitorData[cqgMonitor.code.replace(prefix[1], `${prefix[1]}${groupNum}`)])
-                  : '-'
-              }}</span
-              ><span class="unit">{{ cqgMonitor.unit }}</span></span
-            >
-          </div>
-        </template>
-      </fourBorderBg>
-    </div>
-  </div>
-  <div class="nitrogen-home">
-    <div style="position: absolute; color: #fff; top: 30px; pointer-events: auto; display: flex">
-      <div
-        v-for="(sysItem, sysIndex) in monitorDataGroupArr"
-        :key="sysIndex"
-        class="tab-button-box"
-        :class="{ 'tab-button-box-active': monitorDataGroupFlag == sysIndex + 1 }"
-        @click="setMonitorGroupNum(monitorDataGroup1, sysIndex + 1)"
-        >{{ '压风系统' + (sysIndex + 1) }} (运行: <p style="padding: 0 5px"></p
-        ><span
-          :class="{
-            'signal-round': true,
-            'signal-round-run': sysStateList[sysIndex] && sysStateList[sysIndex].isRun,
-            'signal-round-gry': sysStateList[sysIndex] && !sysStateList[sysIndex].isRun,
-          }"
-        ></span>
-        <p style="padding: 0 5px"></p>故障:<p style="padding: 0 5px"></p
-        ><span
-          :class="{
-            'signal-round': true,
-            'signal-round-warning': sysStateList[sysIndex] && sysStateList[sysIndex].fault,
-            'signal-round-gry': sysStateList[sysIndex] && !sysStateList[sysIndex].fault,
-          }"
-        ></span
-        ><p style="padding: 0 5px"></p> )</div
-      >
-    </div>
-    <div class="total-data">
-      <div class="vent-flex-row">
-        <div class="item"
-          >总管压力(bar)：<span class="val">{{ monitorData[`MainPipePressure`] ? formatNum(monitorData[`MainPipePressure`]) : '-' }}</span></div
-        >
-      </div>
-    </div>
-    <div class="nitrogen-container">
-      <div v-if="monitorData['netStatus'] == 0" class="device-state">网络断开</div>
-      <div class="top-box">
-        <!-- 左边监测数据 -->
-        <div class="lr-box left-box">
-          <div class="left-container">
-            <div class="item item-l" v-for="(groupNum, index) in monitorDataGroup" :key="index">
-              <div class="monitor-box">
-                <ventBox1>
-                  <template #title>
-                    <div>{{ groupNum }}号压风机</div>
-                  </template>
-                  <template #container>
-                    <div class="state-item">
-                      <div class="item-col" v-for="(preFan, preFanIndex) in preFanMonitorData" :key="preFanIndex">
-                        <span class="state-title">{{ preFan.title + (preFan.unit !== 'signal' ? `(${preFan.unit})` : '') }}</span>
-                        <span v-if="preFan.unit !== 'signal'" class="state-val">{{
-                          monitorData[preFan.code.replace(prefix[2], prefix[2] + groupNum)] >= 0
-                            ? formatNum(Number(monitorData[preFan.code.replace(prefix[2], prefix[2] + groupNum)]))
-                            : '-'
-                        }}</span>
-                        <span
-                          v-else
-                          :class="{
-                            'signal-round': true,
-                            'signal-round-warning': monitorData[preFan.code.replace(prefix[2], `${prefix[2]}${groupNum}`)] == '1',
-                            'signal-round-gry': monitorData[preFan.code.replace(prefix[2], `${prefix[2]}${groupNum}`)] != '1',
-                          }"
-                        ></span>
-                      </div>
-                    </div>
-                  </template>
-                </ventBox1>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-<script lang="ts" setup name="nitrogenHome">
-  import { onMounted, onUnmounted, ref, watch } from 'vue';
-  import fourBorderBg from '../../../comment/components/fourBorderBg.vue';
-  import { mountedThree, destroy, setModelType } from '../nitrogen.threejs';
-  import { list } from '../nitrogen.api';
-  import ventBox1 from '/@/components/vent/ventBox1.vue';
-  // import { monitorDataGroupArr, preFanMonitorData, monitorData, preMonitorList, cqgMonitorList, prefix, getSysState } from '../nitrogen.dataYJ';
-  // import type { State } from '../nitrogen.dataYJ';
-  import { formatNum } from '/@/utils/ventutil';
-
-  const loading = ref(true);
-  const monitorDataGroupFlag = ref(0);
-  const monitorDataGroup = ref([]);
-  const kyjs = ref([]);
-  const cqgs = ref([]);
-  const monitorData = ref([]);
-  const sysStateList = ref<State[]>([]);
-
-  // https获取监测数据
-  let timer: null | NodeJS.Timeout = null;
-  async function getMonitor(flag?) {
-    if (Object.prototype.toString.call(timer) === '[object Null]') {
-      timer = await setTimeout(
-        async () => {
-          await getDataSource();
-          if (timer) {
-            timer = null;
-          }
-          await getMonitor(false);
-        },
-        flag ? 0 : 1000
-      );
-    }
-  }
-
-  async function getDataSource() {
-    const res = await list({ devicetype: 'forcFan', pagetype: 'normal' });
-    let dataSource = res.msgTxt[0] && res.msgTxt[0].datalist ? res.msgTxt[0].datalist[0] : [];
-    if (dataSource) {
-      monitorData.value = Object.assign(dataSource, dataSource.readData);
-    }
-    loading.value = false;
-    sysStateList.value = getSysState(monitorData.value);
-  }
-
-  function setMonitorGroupNum(num, flag) {
-    monitorDataGroupFlag.value = flag;
-  }
-
-  function changeGroup(val) {
-    kyjs.value = val.map((item) => `${item}号空压机`);
-    cqgs.value = val.map((item) => `${item}号储气罐`);
-    monitorData.value = new Array(val.length).fill({
-      strName: '空压机',
-      compressGroupName: '',
-      compressExhaustPressF1: '-',
-      compressSeparatePressF1: '-',
-      compressHostTempF1: '-',
-      compressCrewTempF1: '-',
-      compressRunTimeF1: '-',
-      controlModel: 'LOC',
-    });
-  }
-
-  watch(monitorDataGroupFlag, (newVal) => {
-    const monitorGroup = monitorDataGroupArr[newVal - 1];
-    changeGroup(monitorGroup);
-    monitorDataGroup.value = monitorGroup;
-    setModelType(monitorGroup);
-  });
-
-  onMounted(async () => {
-    mountedThree().then(async () => {
-      await getMonitor(true);
-      monitorDataGroupFlag.value = 1;
-    });
-  });
-
-  onUnmounted(() => {
-    destroy();
-    if (timer) {
-      clearTimeout(timer);
-      timer = undefined;
-    }
-  });
-</script>
-
-<style lang="less" scoped>
-  @ventSpace: zxm;
-
-  .nitrogen-home {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    position: relative;
-    .total-data {
-      position: absolute;
-      color: #e4cd00;
-      z-index: 9;
-      top: 50px;
-      right: 30px;
-      // display: flex;
-      font-size: 18px;
-      .item {
-        width: 200px;
-        margin-left: 30px;
-        .val {
-          color: #00d8ff;
-        }
-      }
-    }
-  }
-
-  .compressorCss3D-box {
-    .modal-monitor {
-      position: absolute;
-      left: 0px;
-      top: 0px;
-    }
-
-    &:deep(.win) {
-      margin: 0 !important;
-      background: #00000044;
-    }
-
-    &:deep(.main) {
-      .title {
-        height: 34px;
-        text-align: center;
-        font-weight: 600;
-        color: #7af5ff;
-        // background-image: url('../../../assets/img/yfj/light.png');
-        background-repeat: no-repeat;
-        background-position-x: center;
-        background-position-y: 100%;
-        background-size: 80%;
-        font-size: 16px;
-      }
-
-      .monitor-item {
-        display: flex;
-        flex-direction: row;
-        width: auto;
-        margin-bottom: 3px;
-        .monitor-val {
-          color: #ffb700;
-          display: flex;
-          width: auto;
-
-          .val {
-            width: 80px;
-            font-size: 14px;
-          }
-
-          .unit {
-            color: #ffffffbb;
-            font-size: 14px;
-          }
-        }
-      }
-
-      .monitor-title {
-        width: 100px;
-        color: #7af5ff;
-        font-weight: 400;
-        font-size: 14px;
-      }
-
-      .signal-item {
-        display: flex;
-        justify-content: space-between;
-
-        // margin-bottom: 5px;
-        .signal-round {
-          display: inline-block;
-          width: 8px;
-          height: 8px;
-          border-radius: 50%;
-          margin: 0 10px;
-          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-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;
-          }
-        }
-      }
-    }
-  }
-
-  .nitrogen-home {
-    width: 100%;
-    height: calc(100% - 100px);
-    position: fixed;
-    z-index: 99;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    pointer-events: none;
-    top: 60px;
-    .nitrogen-container {
-      width: 100%;
-      height: calc(100%);
-      display: flex;
-      justify-content: space-between;
-      margin-bottom: 100px;
-      position: relative;
-      .device-state {
-        width: 100%;
-        position: absolute;
-        top: 20px;
-        color: #e90000;
-        display: flex;
-        justify-content: center;
-        font-size: 20px;
-      }
-      .top-box {
-        width: 100%;
-        padding: 10px;
-        overflow: hidden;
-        display: flex;
-        justify-content: space-between;
-
-        .lr-box {
-          display: flex;
-          flex-direction: column;
-          position: relative;
-          z-index: 9999;
-          pointer-events: auto;
-        }
-
-        .item {
-          width: 285px;
-          height: auto;
-          position: relative;
-          border-radius: 5px;
-          margin-top: 10px;
-          margin-bottom: 0px;
-          pointer-events: auto;
-          color: #fff;
-          overflow: hidden;
-
-          .control-item {
-            height: auto;
-            min-height: 35px;
-            display: flex;
-            flex-direction: row;
-            justify-content: space-between;
-            align-items: center;
-            padding: 5px;
-            margin: 0 10px 0 3px;
-            pointer-events: auto;
-            background: linear-gradient(to right, #0063cd22, #0063cd04);
-
-            margin-bottom: 5px;
-            border-width: 1px;
-            border-style: dashed;
-
-            border-image: linear-gradient(to right, #008ccd66, #0063cd04) 1 1;
-            border-radius: 5px;
-
-            &:last-child {
-              margin-bottom: 0;
-            }
-
-            .control-item-l {
-              display: flex;
-              align-items: center;
-              font-size: 14px;
-
-              .round {
-                display: inline-block;
-                width: 3px;
-                height: 3px;
-                padding: 1px;
-                border-radius: 50%;
-                background-color: #3df6ff;
-                margin-right: 5px;
-                box-shadow: 0 0 1px 1px #64f7ff;
-              }
-            }
-
-            .control-item-r {
-              text-align: right;
-            }
-
-            .button-box {
-              position: relative;
-              padding: 5px;
-              border: 1px transparent solid;
-              background-clip: border-box;
-              border-radius: 5px;
-              margin-left: 8px;
-            }
-
-            .a-button {
-              pointer-events: auto;
-            }
-
-            &::v-deep .a-button--mini {
-              padding: 6px 10px;
-            }
-
-            &::v-deep .a-button--mini.is-round {
-              padding: 6px 10px;
-            }
-          }
-
-          .base-title {
-            width: calc(100% - 60px);
-            text-align: center;
-            color: #00d8ff;
-          }
-
-          .state-item {
-            width: 100%;
-            display: flex;
-            flex-direction: row;
-
-            flex-wrap: wrap;
-            .item-col {
-              width: 50%;
-              display: flex;
-              justify-content: center;
-              align-items: center;
-              padding: 5px;
-              .state-title {
-                color: #ffffffcc;
-                flex: 9;
-                font-size: 14px;
-
-                .unit {
-                  // color: #ffffffbb;
-                }
-              }
-
-              .state-val {
-                flex: 1;
-                color: #e4a300;
-                margin-right: 5px;
-                text-align: right;
-                font-size: 14px;
-              }
-            }
-          }
-
-          .signal-box {
-            margin: 5px 0;
-            display: flex;
-            align-items: center;
-
-            .signal-title {
-              color: #7af5ff;
-              margin: 0 5px;
-            }
-
-            &:last-child {
-              margin-right: 0px;
-            }
-          }
-
-          .list-item {
-            padding: 0 10px;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-
-            .item-data-key {
-              color: #ffffff99;
-            }
-          }
-
-          .item-data-box {
-            color: #fff;
-
-            .state-icon {
-              display: inline-block;
-              width: 12px;
-              height: 12px;
-              border-radius: 12px;
-            }
-
-            .open {
-              border: 5px solid #133a56;
-              background: #4ecb73;
-            }
-
-            .close {
-              border: 5px solid #192961;
-              background: #6d7898;
-            }
-          }
-        }
-
-        .item-l {
-          width: 335px;
-
-          .monitor-box {
-            // width: 335px;
-            background-color: #ffffff05;
-            // margin-left: 2px;
-            // border-radius: 5px;
-            // backdrop-filter: blur(10px);
-          }
-        }
-
-        .right-box {
-          width: 330px;
-          .control-group {
-            display: flex;
-            // justify-content: space-around;
-            flex-wrap: wrap;
-            .control-item {
-              display: flex;
-              flex-direction: column;
-              justify-content: center;
-              align-items: center;
-              padding: 0 4px;
-              .control-item-title {
-                color: #a6dce9;
-                position: relative;
-                top: 5px;
-              }
-              .control-item-state {
-                width: 94px;
-                height: 47px;
-                background: url('/@/assets/images/vent/control-switch-bg.png');
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                color: #fff;
-              }
-
-              .button-box {
-                position: relative;
-                padding: 5px;
-                border: 1px transparent solid;
-                background-clip: border-box;
-                border-radius: 5px;
-                margin-left: 8px;
-              }
-
-              .a-button {
-                pointer-events: auto;
-              }
-
-              &::v-deep .a-button--mini {
-                padding: 6px 10px;
-              }
-
-              &::v-deep .a-button--mini.is-round {
-                padding: 6px 10px;
-              }
-            }
-          }
-          .control-btn-group {
-            width: 100%;
-            display: flex;
-            flex-direction: row;
-            justify-content: space-between;
-            align-items: center;
-            .control-left-box {
-              display: flex;
-              flex-direction: column;
-              justify-content: center;
-              align-items: center;
-              padding: 0 20px;
-              .btn-box {
-                width: 100px;
-                color: #fff;
-                display: flex;
-                justify-content: space-between;
-                span {
-                  display: inline-block;
-                  padding: 2px 8px;
-                  background: #007099;
-                  border-radius: 4px;
-                  border: 1px solid rgb(125, 230, 249);
-                  cursor: pointer;
-                  &:hover {
-                    background: #005574;
-                  }
-                }
-              }
-              .icon-box {
-                width: 60px;
-                height: 60px;
-                border-radius: 30px;
-                border: 2px solid #00bcdd;
-                box-shadow: 0 0 20px #ffffff88;
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                margin-top: 20px;
-
-                .icon {
-                  width: 18px;
-                  height: 18px;
-                  border-radius: 9px;
-                  border: 3px solid #d7f9ff;
-                  position: relative;
-                  background: #00bcdd;
-                  &::before {
-                    position: absolute;
-                    content: '';
-                    width: 2px;
-                    height: 12px;
-                    background-color: #00bcdd;
-                    left: 6px;
-                    top: -16px;
-                  }
-                  &::after {
-                    position: absolute;
-                    content: '';
-                    width: 2px;
-                    height: 12px;
-                    left: 6px;
-                    top: 17px;
-                    background-color: #00d9ff;
-                  }
-                }
-              }
-              .remote-icon-box {
-                transform: rotate(30deg);
-                animation: iconRotate 1s linear;
-              }
-              .remote-icon-box1 {
-                transform: rotate(-30deg);
-                animation: iconRotate1 1s linear;
-              }
-
-              @keyframes iconRotate {
-                from {
-                  transform: rotate(-30deg);
-                }
-                to {
-                  transform: rotate(30deg);
-                }
-              }
-              @keyframes iconRotate1 {
-                from {
-                  transform: rotate(30deg);
-                }
-                to {
-                  transform: rotate(-30deg);
-                }
-              }
-            }
-            .control-right-box {
-              width: 100px;
-              color: #fff;
-              height: 80px;
-              justify-content: space-between;
-              align-items: center;
-              .btn {
-                margin-bottom: 30px;
-              }
-            }
-          }
-        }
-
-        .left-box {
-          height: calc(100%);
-          overflow-x: hidden;
-          overflow-y: auto;
-          pointer-events: auto;
-          direction: rtl;
-          .left-container {
-            direction: ltr;
-          }
-          .control-item {
-            height: 36px;
-          }
-        }
-      }
-    }
-  }
-  .tab-button-box {
-    display: inline-block;
-    position: relative;
-    padding: 5px;
-    // border: 1px transparent solid;
-    border-radius: 5px;
-    margin-left: 8px;
-    margin-right: 8px;
-    width: auto;
-    // height: 40px;
-    // border: 1px solid #65dbea;
-    height: 35px !important;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: #fff;
-    padding: 0 15px 5px 15px;
-    cursor: pointer;
-    &:hover {
-      background: linear-gradient(#2cd1ff55, #1eb0ff55);
-    }
-    &::before {
-      width: calc(100% - 6px);
-      height: 27px;
-      content: '';
-      position: absolute;
-      top: 3px;
-      right: 0;
-      left: 3px;
-      bottom: 0;
-      z-index: -1;
-      border-radius: inherit; /*important*/
-      background: linear-gradient(#1fa6cb, #127cb5);
-    }
-    &::after {
-      width: calc(100% + 32px);
-      height: 10px;
-      content: '';
-      position: absolute;
-      top: 28px;
-      right: 0;
-      left: -16px;
-      bottom: 0;
-      z-index: -1;
-      border-radius: inherit; /*important*/
-      background: url('/@/assets/images/vent/short-light.png') no-repeat;
-      background-position: center;
-      background-size: 100%;
-      z-index: 999;
-    }
-  }
-
-  .tab-button-box-active {
-    border: 1px solid #66989e !important;
-    &:hover {
-      background: none !important;
-    }
-    &::before {
-      background: linear-gradient(#1fa6cbcc, #127cb5cc) !important;
-    }
-  }
-</style>

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

@@ -1,10 +1,12 @@
 <template>
   <div class="nitrogen-box">
     <customHeader>智能压风管控系统</customHeader>
-    <!-- 布尔台 -->
-    <!-- <nitrogenHome1 v-if="btnActive == 'nitrogen_page'" /> -->
-    <!-- 补连塔 -->
-    <nitrogenHomeBLT v-if="btnActive == 'nitrogen_page'" />
+    <template v-if="btnActive == 'nitrogen_page'">
+      <!-- 补连塔（两套点表） -->
+      <nitrogenHomeBLT v-if="sysOrgCode === 'sdmtjtbltmk'" />
+      <!-- 一个系统一套点表的 -->
+      <nitrogenHome />
+    </template>
     <nitrogenEcharts v-if="btnActive == 'yfj_monitor_echarts'" />
     <nitrogenHistory v-if="btnActive == 'yfj_history'" />
     <nitrogenHandleHistory v-if="btnActive == 'yfj_handler_history'" />
@@ -14,17 +16,16 @@
 </template>
 <script lang="ts" setup>
   import { ref } from 'vue';
-  // import nitrogenHome from './components/nitrogenHome.vue';
-  // import nitrogenHome1 from './components/nitrogenHome1.vue';
-  import nitrogenHomeBLT from './components/nitrogenHomeBLT.vue'; //补连塔
-  // import nitrogenHomeYJ from './components/nitrogenHomeYJ.vue'; //
+  import nitrogenHome from './components/nitrogenHome.vue';
+  import nitrogenHomeBLT from './components/nitrogenHomeBLT.vue';
   import nitrogenEcharts from './components/nitrogenEcharts.vue';
   import nitrogenHistory from './components/nitrogenHistory.vue';
   import nitrogenHandleHistory from './components/nitrogenHandleHistory.vue';
   import nitrogenAlarmHistory from './components/nitrogenAlarmHistory.vue';
   import customHeader from '/@/views/vent/comment/components/customHeader.vue';
   import BottomMenu from '/@/views/vent/comment/components/bottomMenu.vue';
-
+  import { useGlobSetting } from '/@/hooks/setting';
+  const { sysOrgCode } = useGlobSetting();
   const btnActive = ref('nitrogen_page');
   const navList = ref([
     {

src/views/vent/monitorManager/nitrogen/nitrogen.data.1.ts

@@ -0,0 +1,154 @@
+import { ref } from 'vue';
+import { useGlobSetting } from '/@/hooks/setting';
+import {
+  monitorDataGroupArr as monitorDataGroupArr_Jj,
+  preFanMonitorData as preFanMonitorData_Jj,
+  preMonitorList as preMonitorList_Jj,
+  cqgMonitorList as cqgMonitorList_Jj,
+  prefix as prefix_Jj,
+  getSysState as getSysState_Jj,
+  totalData as totalData_Ji,
+} from './nitrogen.dataJj'; // 锦界
+
+import {
+  monitorDataGroupArr as monitorDataGroupArr_Bet,
+  preFanMonitorData as preFanMonitorData_Bet,
+  preMonitorList as preMonitorList_Bet,
+  cqgMonitorList as cqgMonitorList_Bet,
+  prefix as prefix_Bet,
+  getSysState as getSysState_Bet,
+  totalData as totalData_Bet,
+} from './nitrogen.dataBet'; // 布尔台
+
+import {
+  monitorDataGroupArr as monitorDataGroupArr_Dlt,
+  preFanMonitorData as preFanMonitorData_Dlt,
+  preMonitorList as preMonitorList_Dlt,
+  cqgMonitorList as cqgMonitorList_Dlt,
+  prefix as prefix_Dlt,
+  getSysState as getSysState_Dlt,
+  totalData as totalData_Dlt,
+} from './nitrogen.dataDlt'; // 大柳塔
+
+import {
+  monitorDataGroupArr as monitorDataGroupArr_Hjt,
+  preFanMonitorData as preFanMonitorData_Hjt,
+  preMonitorList as preMonitorList_Hjt,
+  cqgMonitorList as cqgMonitorList_Hjt,
+  prefix as prefix_Hjt,
+  getSysState as getSysState_Hjt,
+  totalData as totalData_Hjt,
+} from './nitrogen.dataHjt'; // 活鸡兔
+
+import {
+  monitorDataGroupArr as monitorDataGroupArr_YJ,
+  preFanMonitorData as preFanMonitorData_YJ,
+  preMonitorList as preMonitorList_YJ,
+  cqgMonitorList as cqgMonitorList_YJ,
+  prefix as prefix_YJ,
+  getSysState as getSysState_YJ,
+  totalData as totalData_YJ,
+} from './nitrogen.dataYJ'; // 窑姐
+
+export type State = {
+  isRun: boolean;
+  fault: boolean;
+};
+export const bottomBtnList = ref([
+  {
+    text: '监控界面',
+    value: 'nitrogenMonitor',
+    isHover: false,
+  },
+  {
+    text: '关键节点监测',
+    value: 'nitrogenNode',
+    isHover: false,
+  },
+  {
+    text: '实时曲线',
+    value: 'nitrogenEcharts',
+    isHover: false,
+  },
+  {
+    text: '压风机历史记录',
+    value: 'nitrogenHistory',
+    isHover: false,
+  },
+  {
+    text: '操作历史记录',
+    value: 'nitrogenHandleHistory',
+    isHover: false,
+  },
+  {
+    text: '故障诊断历史记录',
+    value: 'nitrogenWarningHistory',
+    isHover: false,
+  },
+]);
+
+export function getMonitorData() {
+  const globSetting = useGlobSetting();
+  switch (globSetting.sysOrgCode) {
+    case 'yjmdsankuang': // 窑姐三矿
+      return {
+        monitorDataGroupArr: monitorDataGroupArr_YJ,
+        preFanMonitorData: preFanMonitorData_YJ,
+        preMonitorList: preMonitorList_YJ,
+        cqgMonitorList: cqgMonitorList_YJ,
+        prefix: prefix_YJ,
+        totalData: totalData_YJ,
+        getSysState: getSysState_YJ,
+      };
+    case 'sdmtjtdltmkhjtj': // 活鸡兔井
+      return {
+        monitorDataGroupArr: monitorDataGroupArr_Hjt,
+        preFanMonitorData: preFanMonitorData_Hjt,
+        preMonitorList: preMonitorList_Hjt,
+        cqgMonitorList: cqgMonitorList_Hjt,
+        prefix: prefix_Hjt,
+        getSysState: getSysState_Hjt,
+        totalData: totalData_Hjt,
+      };
+    case 'sdmtjtdltmk': // 大柳塔井
+      return {
+        monitorDataGroupArr: monitorDataGroupArr_Dlt,
+        preFanMonitorData: preFanMonitorData_Dlt,
+        preMonitorList: preMonitorList_Dlt,
+        cqgMonitorList: cqgMonitorList_Dlt,
+        prefix: prefix_Dlt,
+        getSysState: getSysState_Dlt,
+        totalData: totalData_Dlt,
+      };
+    case 'sdmtjtbetmk': // 布尔台
+      return {
+        monitorDataGroupArr: monitorDataGroupArr_Bet,
+        preFanMonitorData: preFanMonitorData_Bet,
+        preMonitorList: preMonitorList_Bet,
+        cqgMonitorList: cqgMonitorList_Bet,
+        prefix: prefix_Bet,
+        getSysState: getSysState_Bet,
+        totalData: totalData_Bet,
+      };
+    case 'sdmtjtjjmk': // 锦界
+      return {
+        monitorDataGroupArr: monitorDataGroupArr_Jj,
+        preFanMonitorData: preFanMonitorData_Jj,
+        preMonitorList: preMonitorList_Jj,
+        cqgMonitorList: cqgMonitorList_Jj,
+        prefix: prefix_Jj,
+        getSysState: getSysState_Jj,
+        totalData: totalData_Ji,
+      };
+    default: //默认锦界
+      return {
+        monitorDataGroupArr: monitorDataGroupArr_Bet,
+        preFanMonitorData: preFanMonitorData_Bet,
+        preMonitorList: preMonitorList_Bet,
+        cqgMonitorList: cqgMonitorList_Bet,
+        prefix: prefix_Bet,
+        getSysState: getSysState_Bet,
+        totalData: totalData_Bet,
+      };
+  }
+}

src/views/vent/monitorManager/nitrogen/nitrogen.dataBLT.ts

@@ -1,41 +1,8 @@
-import { ref } from 'vue';
 export const monitorDataGroupArr = [
   [1, 2],
   [1, 2, 3],
 ];
 export const prefix = ['PRE', 'PRE', 'PRE'];
-export const bottomBtnList = ref([
-  {
-    text: '监控界面',
-    value: 'nitrogenMonitor',
-    isHover: false,
-  },
-  {
-    text: '关键节点监测',
-    value: 'nitrogenNode',
-    isHover: false,
-  },
-  {
-    text: '实时曲线',
-    value: 'nitrogenEcharts',
-    isHover: false,
-  },
-  {
-    text: '压风机历史记录',
-    value: 'nitrogenHistory',
-    isHover: false,
-  },
-  {
-    text: '操作历史记录',
-    value: 'nitrogenHandleHistory',
-    isHover: false,
-  },
-  {
-    text: '故障诊断历史记录',
-    value: 'nitrogenWarningHistory',
-    isHover: false,
-  },
-]);
 export type State = {
   isRun: boolean;
   fault: boolean;

src/views/vent/monitorManager/nitrogen/nitrogen.dataBet.ts

@@ -1,41 +1,8 @@
-import { ref } from 'vue';
 export const monitorDataGroupArr = [
   [1, 2],
   [3, 4, 5],
 ];
 export const prefix = ['PRE', 'PRE', 'PRE'];
-export const bottomBtnList = ref([
-  {
-    text: '监控界面',
-    value: 'nitrogenMonitor',
-    isHover: false,
-  },
-  {
-    text: '关键节点监测',
-    value: 'nitrogenNode',
-    isHover: false,
-  },
-  {
-    text: '实时曲线',
-    value: 'nitrogenEcharts',
-    isHover: false,
-  },
-  {
-    text: '压风机历史记录',
-    value: 'nitrogenHistory',
-    isHover: false,
-  },
-  {
-    text: '操作历史记录',
-    value: 'nitrogenHandleHistory',
-    isHover: false,
-  },
-  {
-    text: '故障诊断历史记录',
-    value: 'nitrogenWarningHistory',
-    isHover: false,
-  },
-]);
 export const preMonitorList = [
   {
     title: `机头温度`,

src/views/vent/monitorManager/nitrogen/nitrogen.dataDlt.ts

@@ -1,38 +1,5 @@
-import { ref } from 'vue';
 export const monitorDataGroupArr = [[1, 2, 3, 4]];
 export const prefix = ['PRE', 'PRE', 'PRE'];
-export const bottomBtnList = ref([
-  {
-    text: '监控界面',
-    value: 'nitrogenMonitor',
-    isHover: false,
-  },
-  {
-    text: '关键节点监测',
-    value: 'nitrogenNode',
-    isHover: false,
-  },
-  {
-    text: '实时曲线',
-    value: 'nitrogenEcharts',
-    isHover: false,
-  },
-  {
-    text: '压风机历史记录',
-    value: 'nitrogenHistory',
-    isHover: false,
-  },
-  {
-    text: '操作历史记录',
-    value: 'nitrogenHandleHistory',
-    isHover: false,
-  },
-  {
-    text: '故障诊断历史记录',
-    value: 'nitrogenWarningHistory',
-    isHover: false,
-  },
-]);
 export const preMonitorList = [
   {
     title: `机头温度`,

src/views/vent/monitorManager/nitrogen/nitrogen.dataHjt.ts

@@ -1,38 +1,6 @@
-import { ref } from 'vue';
 export const monitorDataGroupArr = [[1, 2, 3]];
 export const prefix = ['PRE', 'PRE', 'PRE'];
-export const bottomBtnList = ref([
-  {
-    text: '监控界面',
-    value: 'nitrogenMonitor',
-    isHover: false,
-  },
-  {
-    text: '关键节点监测',
-    value: 'nitrogenNode',
-    isHover: false,
-  },
-  {
-    text: '实时曲线',
-    value: 'nitrogenEcharts',
-    isHover: false,
-  },
-  {
-    text: '压风机历史记录',
-    value: 'nitrogenHistory',
-    isHover: false,
-  },
-  {
-    text: '操作历史记录',
-    value: 'nitrogenHandleHistory',
-    isHover: false,
-  },
-  {
-    text: '故障诊断历史记录',
-    value: 'nitrogenWarningHistory',
-    isHover: false,
-  },
-]);
+
 export const preMonitorList = [
   {
     title: `机头温度`,

src/views/vent/monitorManager/nitrogen/nitrogen.dataJj.ts

@@ -1,38 +1,6 @@
-import { ref } from 'vue';
 export const monitorDataGroupArr = [[1, 2, 3, 4]];
 export const prefix = ['PRE', 'PRE', 'PRE'];
-export const bottomBtnList = ref([
-  {
-    text: '监控界面',
-    value: 'nitrogenMonitor',
-    isHover: false,
-  },
-  {
-    text: '关键节点监测',
-    value: 'nitrogenNode',
-    isHover: false,
-  },
-  {
-    text: '实时曲线',
-    value: 'nitrogenEcharts',
-    isHover: false,
-  },
-  {
-    text: '压风机历史记录',
-    value: 'nitrogenHistory',
-    isHover: false,
-  },
-  {
-    text: '操作历史记录',
-    value: 'nitrogenHandleHistory',
-    isHover: false,
-  },
-  {
-    text: '故障诊断历史记录',
-    value: 'nitrogenWarningHistory',
-    isHover: false,
-  },
-]);
+
 export const preMonitorList = [
   {
     title: `机头温度`,
@@ -102,7 +70,13 @@ export const preFanMonitorData = [
     unit: 'h',
   },
 ];
-
+export const totalData = [
+  {
+    title: '总流量',
+    code: 'TotalInPipeFlow',
+    unit: 'bar',
+  },
+];
 export type State = {
   isRun: boolean;
   fault: boolean;

src/views/vent/monitorManager/nitrogen/nitrogen.dataYJ.ts

@@ -1,4 +1,3 @@
-import { ref } from 'vue';
 export const monitorDataGroupArr = [
   [1, 2],
   [3, 4],
@@ -6,38 +5,6 @@ export const monitorDataGroupArr = [
 ];
 export const prefix = ['Compressor', 'Compressor', 'PreFan'];
 
-export const bottomBtnList = ref([
-  {
-    text: '监控界面',
-    value: 'nitrogenMonitor',
-    isHover: false,
-  },
-  {
-    text: '关键节点监测',
-    value: 'nitrogenNode',
-    isHover: false,
-  },
-  {
-    text: '实时曲线',
-    value: 'nitrogenEcharts',
-    isHover: false,
-  },
-  {
-    text: '压风机历史记录',
-    value: 'nitrogenHistory',
-    isHover: false,
-  },
-  {
-    text: '操作历史记录',
-    value: 'nitrogenHandleHistory',
-    isHover: false,
-  },
-  {
-    text: '故障诊断历史记录',
-    value: 'nitrogenWarningHistory',
-    isHover: false,
-  },
-]);
 export const preMonitorList = [
   {
     title: `供气压力`,
@@ -96,6 +63,7 @@ export const preMonitorList = [
     ],
   },
 ];
+
 export const cqgMonitorList = [
   {
     title: `风包压力`,
@@ -110,6 +78,7 @@ export const cqgMonitorList = [
     child: [],
   },
 ];
+
 export const preFanMonitorData = [
   {
     title: '前轴温度',
@@ -165,6 +134,7 @@ export type State = {
   isRun: boolean;
   fault: boolean;
 };
+
 export function getSysState(monitorData) {
   const stateArr = <State[]>[];
   monitorDataGroupArr.forEach((group) => {

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

@@ -292,11 +292,7 @@
       cameraNames: string[] = [];
     if (cameras.length > 0) {
       cameras.forEach((item) => {
-        if (item['devicekind'] == 'toRtsp' || item['devicekind'] == 'toHLS') {
-          cameraNames.push(item['name']);
-        } else {
-          cameraAddrs.push({ name: item['name'], addr: item['addr'] });
-        }
+        cameraAddrs.push({ name: item['name'], addr: item['addr'] });
       });
     }
     if (cameraNames.length > 0) {

src/views/vent/monitorManager/tunFaceMonitor/components/tunFaceDustHome.vue

@@ -7,13 +7,13 @@
             <div>煤机喷雾参数</div>
           </template>
           <template #container>
-            <div v-for="(item, index) in coalMachineDustParam" class="input-item" style="padding: 4px 8px; margin: 6px 0;" :key="index">
+            <div v-for="(item, index) in coalMachineDustParam" class="input-item" style="padding: 4px 8px; margin: 6px 0" :key="index">
               <div class="title">{{ item.title }}</div>
               <div class="value">-</div>
               <div class="unit">{{ item.unit }}</div>
             </div>
           </template>
-        </ventBox1>        
+        </ventBox1>
       </div>
       <div class="lr right-box">
         <ventBox1>
@@ -24,7 +24,9 @@
             <div class="dust-fan-monitor">
               <div class="dust-fan-monitor-item" v-for="(item, index) in dustMonitor" :key="index">
                 <div class="title">{{ item.title }}</div>
-                <div class=""><span class="value">-</span> <span class="unit"> {{ item.unit }} </span></div>
+                <div class=""
+                  ><span class="value">-</span> <span class="unit"> {{ item.unit }} </span></div
+                >
               </div>
               <div class="dust-fan-monitor-item fault">
                 <div class="title">风机故障诊断</div>
@@ -32,202 +34,198 @@
               </div>
             </div>
 
-            <div class="parameter-title group-parameter-title vent-margin-t-10"><SvgIcon class="icon" size="20" name="control-setting"/><span>设备基础参数</span></div>
+            <div class="parameter-title group-parameter-title vent-margin-t-10"
+              ><SvgIcon class="icon" size="20" name="control-setting" /><span>设备基础参数</span></div
+            >
             <div class="data-group">
               <div class="data-item" v-for="(item, index) in dustFanParam" :key="index">
                 <div class="title">{{ item.title }}</div>
                 <div class="value">-</div>
               </div>
             </div>
-            <div class="parameter-title group-parameter-title"><SvgIcon class="icon" size="20" name="control-setting"/><span>控制设备</span></div>  
-              <div class="input-item vent-flex-row-between">
-                <div>除尘器控制：</div>
-                <div class="vent-flex-row btn-box">
-                  <div class="btn btn1">启动</div>
-                  <div class="btn btn2">停机</div>
-                </div>
+            <div class="parameter-title group-parameter-title"><SvgIcon class="icon" size="20" name="control-setting" /><span>控制设备</span></div>
+            <div class="input-item vent-flex-row-between">
+              <div>除尘器控制：</div>
+              <div class="vent-flex-row btn-box">
+                <div class="btn btn1">启动</div>
+                <div class="btn btn2">停机</div>
               </div>
-              <div v-for="(item, index) in dustFanSetting" :key="index" class="input-item vent-flex-row-between">
-                <div class="title-auto">{{ item.title }}:</div>
-                <div>
-                  <a-input class="input-value" v-model="item.inputNum" placeholder="" />
-                  <span class="btn btn1 vent-margin-l-8">保存</span>
-                </div>
+            </div>
+            <div v-for="(item, index) in dustFanSetting" :key="index" class="input-item vent-flex-row-between">
+              <div class="title-auto">{{ item.title }}:</div>
+              <div>
+                <a-input class="input-value" v-model="item.inputNum" placeholder="" />
+                <span class="btn btn1 vent-margin-l-8">保存</span>
               </div>
+            </div>
           </template>
         </ventBox1>
-  
       </div>
     </div>
   </a-spin>
 </template>
 
 <script setup lang="ts">
-
-import { onBeforeMount, ref, onMounted, onUnmounted, reactive, defineProps } from 'vue';
-import { list } from '../tunFace.api';
-import ventBox1 from '/@/components/vent/ventBox1.vue'
-import { SvgIcon } from '/@/components/Icon';
-import { dustFanParam, coalMachineDustParam, dustMonitor, dustFanSetting } from '../tunFace.data'
-
-const props = defineProps({
-  deviceId: {
-    type: String,
-    require: true
+  import { onBeforeMount, ref, onMounted, onUnmounted, reactive, defineProps } from 'vue';
+  import { list } from '../tunFace.api';
+  import ventBox1 from '/@/components/vent/ventBox1.vue';
+  import { SvgIcon } from '/@/components/Icon';
+  import { dustFanParam, coalMachineDustParam, dustMonitor, dustFanSetting } from '../tunFace.data';
+
+  const props = defineProps({
+    deviceId: {
+      type: String,
+      require: true,
+    },
+  });
+
+  const loading = ref(false);
+
+  // 默认初始是第一行
+  const openDust = ref(false);
+  const workFaceSource = ref({});
+  const workFaceHistorySource = ref([]);
+  const gateDataSource = ref([]);
+  const windowDataSource = ref([]);
+  const windDataSource = ref([]);
+  const temperatureDataSource = ref([]);
+  const fireDataSource = ref([]);
+
+  // 监测数据
+  const selectData = reactive({});
+
+  // https获取监测数据
+  let timer: null | NodeJS.Timeout = null;
+  function getMonitor(flag?) {
+    if (Object.prototype.toString.call(timer) === '[object Null]') {
+      timer = setTimeout(
+        async () => {
+          if (props.deviceId) {
+            const data = await getDataSource(props.deviceId);
+            Object.assign(selectData, data);
+          }
+          if (timer) {
+            timer = null;
+          }
+          await getMonitor();
+          loading.value = false;
+        },
+        flag ? 0 : 1000
+      );
+    }
   }
-})
-
-const loading = ref(false)
-
-// 默认初始是第一行
-const openDust = ref(false)
-const workFaceSource = ref({});
-const workFaceHistorySource = ref([])
-const gateDataSource = ref([]);
-const windowDataSource = ref([]);
-const windDataSource = ref([]);
-const temperatureDataSource = ref([]);
-const fireDataSource = ref([]);
-
-// 监测数据
-const selectData = reactive({});
 
-// https获取监测数据
-let timer: null | NodeJS.Timeout = null;
-function getMonitor(flag?) {
-  if (Object.prototype.toString.call(timer) === '[object Null]') {
-    timer = setTimeout(async () => {
-      if (props.deviceId) {
-        const data = await getDataSource(props.deviceId)
-        Object.assign(selectData, data);
+  async function getDataSource(systemID) {
+    const res = await list({ devicetype: 'sys', systemID, type: 'dustS' });
+    const result = res.deviceInfo;
+    for (const key in result) {
+      const item = result[key];
+      // ''.startsWith
+      if (item.type.startsWith('gate')) {
+        // 风门
+        gateDataSource.value = item['datalist'].filter((data: any) => {
+          const readData = data.readData;
+          return Object.assign(data, readData);
+        });
       }
-      if (timer) {
-        timer = null;
+      if (item.type.startsWith('window')) {
+        // 风窗
+        windowDataSource.value = item['datalist'].filter((data: any) => {
+          const readData = data.readData;
+          return Object.assign(data, readData);
+        });
+      }
+      if (item.type.startsWith('windrect')) {
+        // 测风
+        windDataSource.value = item['datalist'].filter((data: any) => {
+          const readData = data.readData;
+          return Object.assign(data, readData);
+        });
+      }
+      if (item.type === 'modelsensor_temperature') {
+        // 温度
+        temperatureDataSource.value = item['datalist'].filter((data: any) => {
+          const readData = data.readData;
+          return Object.assign(data, readData);
+        });
+      }
+      if (item.type === 'modelsensor_fire') {
+        // 火焰
+        fireDataSource.value = item['datalist'].filter((data: any) => {
+          const readData = data.readData;
+          return Object.assign(data, readData);
+        });
       }
-      await getMonitor();
-      loading.value = false
-    }, flag ? 0 : 1000);
-  }
-};
-
-async function getDataSource(systemID) {
-  const res = await list({ devicetype: 'sys', systemID, type: 'dustS' });
-  const result = res.deviceInfo;
-  for (const key in result) {
-    const item = result[key]
-    // ''.startsWith
-    if (item.type.startsWith('gate')) {
-      // 风门
-      gateDataSource.value = item['datalist'].filter((data: any) => {
-        const readData = data.readData;
-        return Object.assign(data, readData);
-      })
-
-    }
-    if (item.type.startsWith('window')) {
-      // 风窗
-      windowDataSource.value = item['datalist'].filter((data: any) => {
-        const readData = data.readData;
-        return Object.assign(data, readData);
-      })
-    }
-    if (item.type.startsWith('windrect')) {
-      // 测风
-      windDataSource.value = item['datalist'].filter((data: any) => {
-        const readData = data.readData;
-        return Object.assign(data, readData);
-      })
-    }
-    if (item.type === 'modelsensor_temperature') {
-      // 温度
-      temperatureDataSource.value = item['datalist'].filter((data: any) => {
-        const readData = data.readData;
-        return Object.assign(data, readData);
-      })
-    }
-    if (item.type === 'modelsensor_fire') {
-      // 火焰
-      fireDataSource.value = item['datalist'].filter((data: any) => {
-        const readData = data.readData;
-        return Object.assign(data, readData);
-      })
     }
-    
+    loading.value = false;
+    workFaceHistorySource.value = res['sysInfo']['history'];
+    workFaceSource.value = Object.assign(res['sysInfo'], res['sysInfo']['readData']);
   }
-  loading.value = false;
-  workFaceHistorySource.value = res['sysInfo']['history']
-  workFaceSource.value = Object.assign(res['sysInfo'], res['sysInfo']['readData']);
-}
-
-function toDetail() {
-
-}
-
-function changeType(e: Event, item) {
-  item.value = e.target?.value
-}
-
-onBeforeMount(() => {
 
-});
+  function toDetail() {}
 
-onMounted(async () => {
-  loading.value = true;
-  timer = null
-  await getMonitor(true)
-});
-onUnmounted(() => {
-  if (timer) {
-    clearTimeout(timer);
-    timer = undefined;
+  function changeType(e: Event, item) {
+    item.value = e.target?.value;
   }
-});
+
+  onBeforeMount(() => {});
+
+  onMounted(async () => {
+    loading.value = true;
+    timer = null;
+    await getMonitor(true);
+  });
+  onUnmounted(() => {
+    if (timer) {
+      clearTimeout(timer);
+      timer = undefined;
+    }
+  });
 </script>
 <style lang="less" scoped>
-@import '/@/design/vent/modal.less';
-// @import '../less/tunFace.less';
-@import '../../comment/less/workFace.less';
-@ventSpace: zxm;
-
-.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;
+  @import '/@/design/vent/modal.less';
+  // @import '../less/tunFace.less';
+  @import '../../comment/less/workFace.less';
+  @ventSpace: zxm;
+
+  .dust-fan-monitor {
+    display: flex;
+    flex-wrap: wrap;
   }
-  .unit{
-    font-size: 13px;
-    color: #ffffffaa;
-  }
-  .value{
-    color: #FFB212;
+  .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;
+  .fault {
+    .title {
+      color: #c4fdff;
+    }
+    .value {
+      // color: #FFB212;
+      color: #61ddb1;
+    }
   }
-}
-
 </style>

src/views/vent/monitorManager/workFaceMonitor/components/workFaceDustHome.vue

@@ -2,7 +2,6 @@
   <a-spin tip="Loading..." :spinning="loading">
     <div class="monitor-container">
       <div class="lr left-box vent-margin-t-10">
-        
         <div class="base-info">
           <div class="base-item">
             <div class="title">工作面总长</div>
@@ -54,7 +53,6 @@
             </div>
           </template>
         </ventBox1>
-        
       </div>
       <div class="lr right-box">
         <ventBox1>
@@ -65,11 +63,9 @@
             <div class="support-box">
               <div class="support-top">
                 <div class="top-item">
-                  <SvgIcon class="icon-style" size="50" name="pw-sy"/>
+                  <SvgIcon class="icon-style" size="50" name="pw-sy" />
                   <div class="">
-                    <div class="title">
-                      支管路压力
-                    </div>
+                    <div class="title"> 支管路压力 </div>
                     <span class="value">2.5</span>
                     <span class="unit">Pa</span>
                   </div>
@@ -77,9 +73,7 @@
                 <div class="top-item">
                   <SvgIcon class="icon-style" size="50" name="pw-zz" />
                   <div class="">
-                    <div class="title">
-                      支管路流量
-                    </div>
+                    <div class="title"> 支管路流量 </div>
                     <span class="value">2.5</span>
                     <span class="unit">m³/min</span>
                   </div>
@@ -87,7 +81,7 @@
               </div>
               <div class="vent-margin-t-10">
                 <span class="base-title">触发支架详情</span>
-                <dv-scroll-board  ref="scrollBoard" :config="dustConfig" style="width: 100%; height: 240px; overflow-y: auto; " />
+                <dv-scroll-board ref="scrollBoard" :config="dustConfig" style="width: 100%; height: 240px; overflow-y: auto" />
               </div>
             </div>
           </template>
@@ -113,305 +107,297 @@
 </template>
 
 <script setup lang="ts">
+  import { onBeforeMount, ref, onMounted, onUnmounted, reactive, defineProps } from 'vue';
+  import { list } from '../workFace.api';
+  import ventBox1 from '/@/components/vent/ventBox1.vue';
+  import { ScrollBoard as DvScrollBoard } from '@kjgl77/datav-vue3';
+  import { SvgIcon } from '/@/components/Icon';
+  import { beltMachineDustParam, dustConfig, coalMachineDustParam } from '../workFace.data';
 
-import { onBeforeMount, ref, onMounted, onUnmounted, reactive, defineProps } from 'vue';
-import { list } from '../workFace.api';
-import ventBox1 from '/@/components/vent/ventBox1.vue'
-import { ScrollBoard as DvScrollBoard } from '@kjgl77/datav-vue3';
-import { SvgIcon } from '/@/components/Icon';
-import { beltMachineDustParam, dustConfig, coalMachineDustParam } from '../workFace.data'
+  const props = defineProps({
+    deviceId: {
+      type: String,
+      require: true,
+    },
+  });
 
-const props = defineProps({
-  deviceId: {
-    type: String,
-    require: true
-  }
-})
+  const loading = ref(false);
 
-const loading = ref(false)
+  // 默认初始是第一行
+  const openDust = ref(false);
+  const workFaceSource = ref({});
+  const workFaceHistorySource = ref([]);
+  const gateDataSource = ref([]);
+  const windowDataSource = ref([]);
+  const windDataSource = ref([]);
+  const temperatureDataSource = ref([]);
+  const fireDataSource = ref([]);
 
-// 默认初始是第一行
-const openDust = ref(false)
-const workFaceSource = ref({});
-const workFaceHistorySource = ref([])
-const gateDataSource = ref([]);
-const windowDataSource = ref([]);
-const windDataSource = ref([]);
-const temperatureDataSource = ref([]);
-const fireDataSource = ref([]);
+  // 监测数据
+  const selectData = reactive({});
 
-// 监测数据
-const selectData = reactive({});
+  // https获取监测数据
+  let timer: null | NodeJS.Timeout = null;
+  function getMonitor(flag?) {
+    if (Object.prototype.toString.call(timer) === '[object Null]') {
+      timer = setTimeout(
+        async () => {
+          if (props.deviceId) {
+            const data = await getDataSource(props.deviceId);
+            Object.assign(selectData, data);
+          }
+          if (timer) {
+            timer = null;
+          }
+          await getMonitor();
+          loading.value = false;
+        },
+        flag ? 0 : 1000
+      );
+    }
+  }
 
-// https获取监测数据
-let timer: null | NodeJS.Timeout = null;
-function getMonitor(flag?) {
-  if (Object.prototype.toString.call(timer) === '[object Null]') {
-    timer = setTimeout(async () => {
-      if (props.deviceId) {
-        const data = await getDataSource(props.deviceId)
-        Object.assign(selectData, data);
+  async function getDataSource(systemID) {
+    const res = await list({ devicetype: 'sys', systemID, type: 'dustS' });
+    const result = res.deviceInfo;
+    for (const key in result) {
+      const item = result[key];
+      // ''.startsWith
+      if (item.type.startsWith('gate')) {
+        // 风门
+        gateDataSource.value = item['datalist'].filter((data: any) => {
+          const readData = data.readData;
+          return Object.assign(data, readData);
+        });
       }
-      if (timer) {
-        timer = null;
+      if (item.type.startsWith('window')) {
+        // 风窗
+        windowDataSource.value = item['datalist'].filter((data: any) => {
+          const readData = data.readData;
+          return Object.assign(data, readData);
+        });
+      }
+      if (item.type.startsWith('windrect')) {
+        // 测风
+        windDataSource.value = item['datalist'].filter((data: any) => {
+          const readData = data.readData;
+          return Object.assign(data, readData);
+        });
+      }
+      if (item.type === 'modelsensor_temperature') {
+        // 温度
+        temperatureDataSource.value = item['datalist'].filter((data: any) => {
+          const readData = data.readData;
+          return Object.assign(data, readData);
+        });
+      }
+      if (item.type === 'modelsensor_fire') {
+        // 火焰
+        fireDataSource.value = item['datalist'].filter((data: any) => {
+          const readData = data.readData;
+          return Object.assign(data, readData);
+        });
       }
-      await getMonitor();
-      loading.value = false
-    }, flag ? 0 : 1000);
-  }
-};
-
-async function getDataSource(systemID) {
-  const res = await list({ devicetype: 'sys', systemID, type: 'dustS' });
-  const result = res.deviceInfo;
-  for (const key in result) {
-    const item = result[key]
-    // ''.startsWith
-    if (item.type.startsWith('gate')) {
-      // 风门
-      gateDataSource.value = item['datalist'].filter((data: any) => {
-        const readData = data.readData;
-        return Object.assign(data, readData);
-      })
-
-    }
-    if (item.type.startsWith('window')) {
-      // 风窗
-      windowDataSource.value = item['datalist'].filter((data: any) => {
-        const readData = data.readData;
-        return Object.assign(data, readData);
-      })
-    }
-    if (item.type.startsWith('windrect')) {
-      // 测风
-      windDataSource.value = item['datalist'].filter((data: any) => {
-        const readData = data.readData;
-        return Object.assign(data, readData);
-      })
-    }
-    if (item.type === 'modelsensor_temperature') {
-      // 温度
-      temperatureDataSource.value = item['datalist'].filter((data: any) => {
-        const readData = data.readData;
-        return Object.assign(data, readData);
-      })
-    }
-    if (item.type === 'modelsensor_fire') {
-      // 火焰
-      fireDataSource.value = item['datalist'].filter((data: any) => {
-        const readData = data.readData;
-        return Object.assign(data, readData);
-      })
     }
+    loading.value = false;
+    workFaceHistorySource.value = res['sysInfo']['history'];
+    workFaceSource.value = Object.assign(res['sysInfo'], res['sysInfo']['readData']);
   }
-  loading.value = false;
-  workFaceHistorySource.value = res['sysInfo']['history']
-  workFaceSource.value = Object.assign(res['sysInfo'], res['sysInfo']['readData']);
-}
 
-function toDetail() {
+  function toDetail() {}
 
-}
-
-function changeType(e: Event, item) {
-  item.value = e.target?.value
-}
-
-onBeforeMount(() => {
+  function changeType(e: Event, item) {
+    item.value = e.target?.value;
+  }
 
-});
+  onBeforeMount(() => {});
 
-onMounted(async () => {
-  loading.value = true;
-  timer = null
-  await getMonitor(true)
-});
-onUnmounted(() => {
-  if (timer) {
-    clearTimeout(timer);
-    timer = undefined;
-  }
-});
+  onMounted(async () => {
+    loading.value = true;
+    timer = null;
+    await getMonitor(true);
+  });
+  onUnmounted(() => {
+    if (timer) {
+      clearTimeout(timer);
+      timer = undefined;
+    }
+  });
 </script>
 <style lang="less" scoped>
-@import '/@/design/vent/modal.less';
-@ventSpace: zxm;
-
-.monitor-container {
-  width: 100%;
-  height: 100%;
-  // height: 550px;
-  // border: 1px solid #fff;
-  margin-top: 50px;
-  display: flex;
-  justify-content: space-between;
+  @import '/@/design/vent/modal.less';
+  @ventSpace: zxm;
 
-  .lr {
-    width: 380px;
+  .monitor-container {
+    width: 100%;
     height: 100%;
+    // height: 550px;
+    // border: 1px solid #fff;
+    margin-top: 50px;
     display: flex;
-    flex-direction: column;
-    margin-top: 10px;
-    pointer-events: auto;
-    .base-title{
-      line-height: 32px;
-      position: relative;
-      padding-left: 10px;
-      &::after{
-        content: '';
-        position: absolute;
-        display: block;
-        width: 4px;
-        height: 12px;
-        top: 4px;
-        left: 0px;
-        background: #45d3fd;
-        border-radius: 4px;
+    justify-content: space-between;
+
+    .lr {
+      width: 380px;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      margin-top: 10px;
+      pointer-events: auto;
+      .base-title {
+        line-height: 32px;
+        position: relative;
+        padding-left: 10px;
+        &::after {
+          content: '';
+          position: absolute;
+          display: block;
+          width: 4px;
+          height: 12px;
+          top: 4px;
+          left: 0px;
+          background: #45d3fd;
+          border-radius: 4px;
+        }
+      }
+    }
+
+    .right-box {
+      width: 360px;
+      .support-box {
+        .support-top {
+          display: flex;
+          justify-content: space-between;
+          .top-item {
+            flex: 1;
+            display: flex;
+            align-items: center;
+            background-image: linear-gradient(to right, #00f2ff42, #006ea600);
+            border-left: 4px solid #5df7ff88;
+          }
+          .icon-style {
+            background: #25536f;
+            padding-left: 6px;
+            margin-right: 10px;
+            padding-right: 6px;
+          }
+          .value {
+            font-family: 'douyuFont';
+            font-weight: 600;
+            font-size: 14px;
+            color: #28dce4;
+            margin-right: 10px;
+          }
+        }
       }
     }
-  }
 
-  .right-box {
-    width: 360px;
-    .support-box{
-      .support-top{
+    .left-box {
+      margin-top: 30px;
+      .base-info {
         display: flex;
         justify-content: space-between;
-        .top-item{
-          flex: 1;
+        color: #fff;
+        padding: 0 5px;
+
+        .base-item {
+          width: calc(50% - 8px);
           display: flex;
+          flex-direction: column;
           align-items: center;
-          background-image: linear-gradient( to right, #00f2ff42, #006ea600);
-          border-left: 4px solid #5df7ff88;
-        }
-        .icon-style{
-          background: #25536f;
-          padding-left: 6px;
-          margin-right: 10px;
-          padding-right: 6px;
-        }
-        .value{
-          font-family: 'douyuFont';
-          font-weight: 600;
-          font-size: 14px;
-          color: #28DCE4;
-          margin-right: 10px;
+          font-size: 17px;
+          border: 1px solid;
+          border-image: linear-gradient(45deg, #00e5ff92, #006fa684, #00e5ff22, #006fa614) 1;
+          .title {
+            width: 100%;
+            background: #00e5ff52;
+            background: linear-gradient(45deg, #006ea652, #00f2ff42);
+            text-align: center;
+            line-height: 45px;
+          }
+          .value {
+            width: 100%;
+            background: #006ea622;
+            text-align: center;
+            line-height: 45px;
+            font-family: 'douyuFont';
+            color: #1bf5fd;
+            padding-top: 5px;
+          }
         }
       }
     }
-  }
-
-  .left-box {
-    margin-top: 30px;
-    .base-info{
+    .dust-group {
       display: flex;
+      flex-direction: row;
       justify-content: space-between;
-      color: #fff;
-      padding: 0 5px;
-      
-      .base-item{
-        width: calc(50% - 8px);
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        font-size: 17px;
-        border: 1px solid ;
-        border-image: linear-gradient(45deg, #00e5ff92, #006fa684, #00e5ff22, #006fa614) 1;
-        .title{
-          width: 100%;
-          background: #00e5ff52;
-          background: linear-gradient(45deg, #006ea652, #00f2ff42);
-          text-align: center;
-          line-height: 45px;
+      .dust-item {
+        width: 238px;
+        height: 148px;
+        background: url('/@/assets/images/vent/model_image/dust-bg.png') no-repeat;
+        scale: 0.9;
+        .title {
+          position: absolute;
+          top: 80px;
+          left: 70px;
+          font-size: 15px;
+          color: #ffffff;
+          font-weight: 600;
         }
-        .value{
-          width: 100%;
-          background: #006EA622;
-          text-align: center;
-          line-height: 45px;
+        .value {
+          position: absolute;
+          top: 50px;
+          left: 50px;
           font-family: 'douyuFont';
-          color: #1bf5fd;
-          padding-top: 5px;
+          color: #20dbfd;
+          text-shadow: 0 0 25px #00d8ff;
+          font-size: 18px;
+          font-weight: bolder;
+          span {
+            font-family: Arial, Helvetica, sans-serif;
+            font-size: 16px;
+            color: aliceblue;
+            margin-left: 8px;
+          }
         }
       }
     }
-  }
-  .dust-group{
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    .dust-item{
-      width: 238px;
-      height: 148px;
-      background: url('/@/assets/images/vent/model_image/dust-bg.png') no-repeat;
-      scale: 0.9;
-      .title{
-        position: absolute;
-        top: 80px;
-        left: 70px;
-        font-size: 15px;
-        color: #ffffff;
-        font-weight: 600;
-      }
-      .value{
-        position: absolute;
-        top: 50px;
-        left: 50px;
-        font-family: 'douyuFont';
-        color: #20dbfd;
-        text-shadow: 0 0 25px #00d8ff;
-        font-size: 18px;
-        font-weight: bolder;
-        span{
-          font-family: Arial, Helvetica, sans-serif;
-          font-size: 16px;
-          color: aliceblue;
-          margin-left: 8px;
-        }
-      }
-      
-    }
-  }
 
-  .input-item {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 4px 8px;
-    margin: 6px 0;
-    background-image: linear-gradient(to right, #39deff15, #3977e500);
+    .input-item {
+      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;
-    }
+      .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{
+      .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;
+      }
     }
-  }
 
-  .action-link {
-    color: #1bf5fd;
+    .action-link {
+      color: #1bf5fd;
+    }
   }
-}
-
-
-
-
 </style>

src/views/vent/monitorManager/workFaceMonitor/wokeFace.threejs.ts

@@ -74,18 +74,19 @@ export const setModelType = (type, n = Math.ceil(Math.random() * 10), isShowPlan
         // 判断模型类型
         var oldControlsPosition = { x: 0.055, y: 0.062, z: 0.117 };
         var oldCameraPosition = { x: 0.055, y: 0.062, z: 0.117 };
-        var newCameraPosition = { x: -0.17182200678070425, y: 1.7188311320712673, z: 1.787394450495768 };
-        var newControlsPosition = { x: -0.171622930063528, y: -0.1442344658741759, z: 0.032110784753260874 };
+        var newCameraPosition = { x: -0.078, y: 2.524, z: 0.886 };
+        var newControlsPosition = { x: -0.078, y: 0.063, z: 0.181 };
       } else if (type == 'workFace2') {
         var oldControlsPosition = { x: 0.055, y: 0.062, z: 0.117 };
         var oldCameraPosition = { x: 1.403, y: 3.354, z: 2.873 };
-        var newCameraPosition = { x: -0.0271, y: 0.9205, z: 0.1973 };
-        var newControlsPosition = { x: -0.027, y: 0.1244, z: -0.0306 };
+        var newCameraPosition = { x: -0.078, y: 2.524, z: 0.886 };
+        var newControlsPosition = { x: -0.078, y: 0.063, z: 0.181 };
       } else if (type == 'workFace3') {
+        // 双进单会
         var oldControlsPosition = { x: 0.055, y: 0.062, z: 0.117 };
         var oldCameraPosition = { x: 1.403, y: 3.354, z: 2.873 };
-        var newCameraPosition = { x: -0.026, y: 0.927, z: 0.333 };
-        var newControlsPosition = { x: -0.026, y: 0.089, z: 0.093 };
+        var newCameraPosition = { x: -0.078, y: 2.524, z: 0.886 };
+        var newControlsPosition = { x: -0.078, y: 0.063, z: 0.181 };
       } else {
         var oldControlsPosition = { x: 0.055, y: 0.062, z: 0.117 };
         var oldCameraPosition = { x: 1.403, y: 3.354, z: 2.873 };

src/views/vent/monitorManager/workFaceMonitor/workFace.threejs.base.ts

@@ -350,8 +350,8 @@ class WorkFace {
   }
 
   setModalType(modalType) {
-    const intakeWind = this.group.getObjectByName('intakewind01');
-    const returnWind = this.group.getObjectByName('returnwind');
+    const intakeWind = this.group.getObjectByName('workFace-jin');
+    const returnWind = this.group.getObjectByName('workFace-hui');
     if (intakeWind && returnWind) {
       if (modalType === 'workFace1') {
         // 单进单回

types/config.d.ts

@@ -155,8 +155,8 @@ export interface GlobConfig {
   // Project abbreviation
   shortName: string;
   modalUrlArr: string;
-  homePath: string
-
+  homePath: string;
+  sysOrgCode: string;
   // isSimulate: boolean
 }
 export interface GlobEnvConfig {
@@ -186,4 +186,10 @@ export interface GlobEnvConfig {
   VITE_APP_SUB_APP?: Array;
   // 是否模拟
   VITE_GLOB_IS_SIMULATE: boolean;
+  // 海康平台URL
+  VITE_HK_URL: string;
+  // 海康平台appKey
+  VITE_HK_APP_KEY: string;
+  // 海康平台Signature
+  VITE_HK_SIGNATURE: string;
 }