1. 获取企业唯一标识，将注氮、压风等功能不同矿端的业务代码根据唯一标识码动态获取，初步一个包可以在不同矿使用

2. 修改综采工作面，使得瓦斯抽采单元只在瓦斯监测与管控中显示，其他监测模块不显示
3.

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/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/nitrogenHome1.vue

@@ -1,865 +0,0 @@
-<template>
-  <div>{{ Math.random() }}</div>
-  <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" />
-    <template>
-      <div v-for="groupNum in monitorDataGroupNum" :key="groupNum" class="modal-monitor" >
-        <fourBorderBg :class="`kyj${groupNum}`" :id="`nitrogenMonitor${groupNum}`">
-          <div class="title">{{ monitorData[groupNum - 1]['strname'] }} </div>
-          <div class="monitor-item">
-            <span class="monitor-title">排气压力:</span>
-            <span class="monitor-val" v-if="!refresh"><span class="val">{{
-              monitorData[groupNum - 1]['AirCompressor_ExhaustPre'] ? monitorData[groupNum -
-              1]['AirCompressor_ExhaustPre'] : '-'
-            }}</span>
-            <span class="unit">kPa</span></span>
-          </div>
-          <div class="monitor-item">
-            <span class="monitor-title">累计流量:</span>
-            <span class="monitor-val" v-if="!refresh"><span class="val">{{ monitorData[groupNum - 1]['FluxTotal1'] ? parseFloat(monitorData[groupNum - 1]['FluxTotal1']).toFixed(2) : '-' }}</span><span class="unit">m³</span></span>
-          </div>
-          <div class="monitor-item">
-            <span class="monitor-title">氮气纯度:</span>
-            <span class="monitor-val" v-if="!refresh"><span class="val">{{ monitorData[groupNum - 1]['NitrogenPurity'] ? parseFloat(monitorData[groupNum - 1]['NitrogenPurity']).toFixed(2) : '-' }}</span>
-            <span class="unit">%</span></span>
-          </div>
-          <div class="monitor-item">
-            <span class="monitor-title">运行时间:</span>
-            <span class="monitor-val" v-if="!refresh"><span class="val">{{
-              monitorData[groupNum - 1]['AirCompressor_RunTime'] ? monitorData[groupNum - 1]['AirCompressor_RunTime'] :
-              '-'
-            }}</span><span class="unit">h</span></span>
-          </div>
-          <div class="monitor-item">
-            <span class="monitor-title">加载时间:</span>
-            <span class="monitor-val" v-if="!refresh"><span class="val">{{
-              monitorData[groupNum - 1]['AirCompressor_LoadTime'] ? monitorData[groupNum - 1]['AirCompressor_LoadTime']
-              : '-'
-            }}</span><span class="unit">h</span></span>
-          </div>
-        </fourBorderBg>
-      </div>
-    </template>
-  </div>
-  <div class="nitrogen-home">
-    <div class="nitrogen-container">
-      <div v-if="monitorNetStatus == 0" class="device-state">网络断开</div>
-      <div class="top-box">
-        <!-- 左边监测数据 -->
-        <div class="lr-box left-box">
-          <div class="item item-l" v-for="groupNum in monitorDataGroupNum" :key="groupNum">
-            <ventBox1>
-              <template #title>
-                <div>{{ monitorData[groupNum - 1]['strname'] }}</div>
-              </template>
-              <template #container>
-                <div class="monitor-box">
-                  <div class="parameter-title group-parameter-title">
-                    <SvgIcon class="icon" size="38" name="device-group-paramer" /><span>机组参数</span>
-                  </div>
-                  <div class="state-item" v-for="(data, index) in groupParameterData" :key="index">
-                    <div class="item-col">
-                      <span class="state-title">{{ Object.values(data)[0] }} :</span>
-                      <span class="state-val">{{
-                        (monitorData.length > 0 && monitorData[groupNum - 1][Object.keys(data)[0]]) >= 0
-                        ? monitorData[groupNum - 1][Object.keys(data)[0]] ? parseFloat(monitorData[groupNum -
-                          1][Object.keys(data)[0]]).toFixed(2) : '-'
-                        : '-'
-                      }}</span>
-                    </div>
-                    <div class="item-col" v-if="Object.keys(data)[1]">
-                      <span class="state-title">{{ Object.values(data)[1] }} :</span>
-                      <span class="state-val">{{
-                        (monitorData.length > 0 && monitorData[groupNum - 1][Object.keys(data)[1]]) >= 0
-                        ? monitorData[groupNum - 1][Object.keys(data)[1]] ? parseFloat(monitorData[groupNum -
-                          1][Object.keys(data)[1]]).toFixed(2) : '-'
-                        : '-'
-                      }}</span>
-                    </div>
-                  </div>
-                </div>
-                <div class="monitor-box">
-                  <div class="parameter-title device-parameter-title">
-                    <SvgIcon class="icon" size="32" name="device-paramer" /><span>空压机数据</span>
-                  </div>
-                  <div class="state-item" v-for="(data, index) in deviceParameterData" :key="index">
-                    <div class="item-col">
-                      <span class="state-title">{{ Object.values(data)[0] }} :</span>
-                      <span class="state-val">{{
-                        (monitorData.length > 0 && monitorData[groupNum - 1][Object.keys(data)[0]]) >= 0
-                        ? monitorData[groupNum - 1][Object.keys(data)[0]]
-                        : '-'
-                      }}</span>
-                    </div>
-                    <div class="item-col" v-if="Object.keys(data)[1]">
-                      <span class="state-title">{{ Object.values(data)[1] }} :</span>
-                      <span class="state-val">{{
-                        (monitorData.length > 0 && monitorData[groupNum - 1][Object.keys(data)[1]]) >= 0
-                        ? monitorData[groupNum - 1][Object.keys(data)[1]]
-                        : '-'
-                      }}</span>
-                    </div>
-                  </div>
-                </div>
-              </template>
-            </ventBox1>
-          </div>
-          <div class="item item-l">
-            <ventBox1 class="vent-margin-t-10">
-              <template #title>
-                <div>下风侧详情</div>
-              </template>
-              <template #container>
-                <div class="monitor-box">
-                  <div class="state-item" v-for="(data, index) in downWindData" :key="index">
-                    <div class="item-col">
-                      <span class="state-title">{{ Object.values(data)[0] }} :</span>
-                      <span class="state-val">{{
-                        (monitorData.length > 0 && monitorData[0][Object.keys(data)[0]]) >= 0
-                        ? monitorData[0][Object.keys(data)[0]] ? parseFloat(monitorData[0][Object.keys(data)[0]]).toFixed(2) : '-'
-                        : '-'
-                      }}</span>
-                    </div>
-                    <div class="item-col" v-if="Object.keys(data)[1]">
-                      <span class="state-title">{{ Object.values(data)[1] }} :</span>
-                      <span class="state-val">{{
-                        (monitorData.length > 0 && monitorData[0][Object.keys(data)[1]]) >= 0
-                        ? monitorData[0][Object.keys(data)[1]] ? parseFloat(monitorData[0][Object.keys(data)[1]]).toFixed(2) : '-'
-                        : '-'
-                      }}</span>
-                    </div>
-                  </div>
-                </div>
-              </template>
-            </ventBox1>
-          </div>
-        </div>
-        <!-- 右边控制状态 -->
-        <div class="lr-box right-box">
-          <ventBox1>
-            <template #title>
-              <div>远程控制</div>
-            </template>
-            <template #container>
-              <div class="control-group">
-                <div class="control-item" v-for="(groupNum, index) in monitorDataGroupNum" :key="groupNum">
-                  <div class="control-item-title">{{ monitorData[groupNum - 1]['strname'] }}</div>
-                  <div class="control-item-state">
-                    <a-button disabled v-if="index == 0" size="small" type="text" style="color: #fff;"
-                      @click="handlerDevice(airCompressorState[groupNum - 1], false)">一键启停</a-button>
-                    <a-button disabled v-else size="small" type="text" style="color: #fff;"
-                      @click="handlerDevice(airCompressorState[groupNum - 1], false)">一键启停</a-button>
-
-                  </div>
-                </div>
-                <div class="control-item" v-for="(groupNum, index) in monitorDataGroupNum" :key="groupNum">
-                  <div class="control-item-title">{{ monitorData[groupNum - 1]['strname'] }}</div>
-                  <div class="control-item-state">
-                    <a-button disabled v-if="index == 0" size="small" type="text" style="color: #fff;"
-                      @click="handlerDevice(airCompressorState[groupNum - 1], true)">一键复位</a-button>
-                    <a-button disabled v-else size="small" type="text" style="color: #fff;"
-                      @click="handlerDevice(airCompressorState[groupNum - 1], true)">一键复位</a-button>
-                  </div>
-                </div>
-              </div>
-            </template>
-          </ventBox1>
-          <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" />
-              <!-- :option="zhudanOption" -->
-            </template>
-          </ventBox1>
-        </div>
-      </div>
-    </div>
-  </div>
-  <HandleModal :modal-is-show="modalIsShow" :modal-title="modalTitle" :modal-type="modalType" @handle-ok="handleOK"
-    @handle-cancel="handleCancel" />
-</template>
-<script lang="ts" setup name="nitrogenHome">
-import { onMounted, onUnmounted, ref, watch, reactive, defineProps, nextTick, inject, computed } from 'vue';
-import ventBox1 from '/@/components/vent/ventBox1.vue';
-import fourBorderBg from '../../../comment/components/fourBorderBg.vue';
-import { mountedThree, destroy, setModelType, addText } from '../nitrogen.threejs';
-import { getDevice } from '../nitrogen.api';
-import { SvgIcon } from '/@/components/Icon';
-import BarAndLine from '/@/components/chart/BarAndLine.vue';
-import HandleModal from './modal.vue';
-import { deviceControlApi } from '/@/api/vent/index';
-import { groupParameterData, deviceParameterData, downWindData } from '../nitrogen.data'
-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 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(0);
-
-let airCompressorState = reactive<any[]>([]);
-
-const propTypeArr = ref([])
-const chartsColumns = ref([])
-watch(monitorDataGroupNum, () => {
-
-  const arr = <any[]>[]
-  const item = {
-    legend: '瞬时流量',
-    seriesName: '(m³/h)',
-    ymax: 2000,
-    yname: 'm³/h',
-    linetype: 'line',
-    yaxispos: 'left',
-    color: '#FDB146',
-    sort: 1,
-    xRotate: 0,
-    dataIndex: 'InputFlux',
-  }
-  const propTypeList = []
-  for (let i = 1; i <= monitorDataGroupNum.value; i++) {
-    const lineType = lodash.cloneDeep(item)
-    lineType.legend = `制氮机${i}瞬时流量`;
-    lineType.dataIndex = `InputFlux${i}`
-    lineType.color = colors[i - 1]
-    arr.push(lineType)
-  }
-  chartsColumns.value = arr
-
-})
-
-
-
-const monitorData = ref(
-  new Array(3).fill({
-    // strName: '空压机',
-    // cumulativeFlow: '-',
-    // centerTemperature: '-',
-    // outletTemperature: '-',
-    // Ia: '-',
-    // Ib: '-',
-    // Ic: '-',
-    // Vab: '-',
-    // Vac: '-',
-    // Vbc: '-',
-    // compressGroupName: '',
-    // compressExhaustPressF1: '-',
-    // compressSeparatePressF1: '-',
-    // compressHostTempF1: '-',
-    // compressCrewTempF1: '-',
-    // compressRunTimeF1: '-',
-    // controlModel: 'LOC'
-  })
-);
-
-//图表数据
-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;
-    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 = item['datalist'].filter((data) => {
-          const readData = data.readData;
-          if (data['netStatus'] == 1) {
-            netStatus = 1
-          }
-          airCompressorState.push({
-            id: data.deviceID,
-            deviceType: data.deviceType,
-            HMIReset: readData.HMIReset,
-            HMIStartStop: readData.HMIStartStop
-          });
-          return Object.assign(data, readData);
-        });
-        monitorNetStatus.value = netStatus
-        console.log(monitorData,'monitorData.value---===')
-        const airCompressor = { readTime: monitorData.value[0]['readTime'].substring(11) }
-        const dataArr = lodash.cloneDeep(echartData.value)
-        //图表数据
-        if (dataArr.length <= 5) {
-          monitorData.value.forEach((el, index) => {
-            airCompressor[`InputFlux${index + 1}`] = el['InputFlux'] || 0
-          });
-          dataArr.push(airCompressor)
-        } else {
-          dataArr.shift()
-          dataArr.push(airCompressor)
-        }
-        echartData.value = dataArr
-      }
-    });
-    monitorDataGroupNum.value = monitorData.value.length;
-    refresh.value = true
-    nextTick(() => {
-      refresh.value = false
-    })
-  }
-}
-
-function handlerDevice(data, bol) {
-  console.log(bol, 'bol-------')
-  kzParam.data = data;
-  kzParam.isFw = bol;
-  console.log(kzParam, 'kz--------')
-  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;
-  });
-});
-
-onUnmounted(() => {
-  destroy();
-  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;
-      .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: 335px;
-        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;
-          }
-        }
-
-        .state-item {
-          display: flex;
-          flex-direction: row;
-          padding: 5px;
-
-          .item-col {
-            width: calc(50% - 5px);
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            padding-right: 4px;
-            background-image: linear-gradient(to right, #39a3ff00, #39a3ff10);
-
-            &:first-child {
-              margin-right: 10px;
-            }
-
-            .state-title {
-              color: #ffffffcc;
-              flex: 9;
-              font-size: 14px;
-            }
-
-            .state-val {
-              flex: 1;
-              color: #00eefffe;
-              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: 330px;
-        margin-top: 50px;
-
-        .control-group {
-          display: flex;
-          // justify-content: space-around;
-          flex-wrap: wrap;
-
-          .control-item {
-            width: 50%; //lxh
-            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;
-            }
-          }
-        }
-      }
-
-      .left-box {
-        width: 365px;
-        margin-top: 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/components/nitrogenHome2.vue

@@ -1,1535 +0,0 @@
-<template>
-    <div>{{ Math.random() }}</div>
-    <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" />
-        <template>
-            <div v-for="groupNum in 1" :key="groupNum" class="modal-monitor">
-                <fourBorderBg :class="`kyj${groupNum}`" :id="`nitrogenMonitor${groupNum}`">
-                    <div class="title">{{ monitorData[0]['strname'] }} </div>
-                    <div class="monitor-item">
-                        <span class="monitor-title">实时流量:</span>
-                        <span class="monitor-val" v-if="!refresh"><span class="val">{{
-                            monitorData[0]['flow'] ? monitorData[0]['flow'] : '-' }}</span>
-                            <span class="unit">m³/min</span></span>
-                    </div>
-
-                    <div class="monitor-item">
-                        <span class="monitor-title">单次流量:</span>
-                        <span class="monitor-val" v-if="!refresh"><span class="val">{{
-                            monitorData[0]['single_flow'] ? monitorData[0]['single_flow'] : '-'
-                        }}</span>
-                            <span class="unit">m³</span></span>
-                    </div>
-
-                    <div class="monitor-item">
-                        <span class="monitor-title">总流量:</span>
-                        <span class="monitor-val" v-if="!refresh"><span class="val">{{
-                            monitorData[0]['total_flow'] ? monitorData[0]['total_flow'] : '-'
-                        }}</span>
-                            <span class="unit">m³</span></span>
-                    </div>
-
-                    <div class="monitor-item">
-                        <span class="monitor-title">氧浓度:</span>
-                        <span class="monitor-val" v-if="!refresh"><span class="val">{{
-                            monitorData[0]['oxygen_concentration'] ? monitorData[0]['oxygen_concentration'] : '-'
-                        }}</span>
-                            <span class="unit">%</span></span>
-                    </div>
-
-                </fourBorderBg>
-            </div>
-        </template>
-    </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 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[0]['netStatus']==1 ? '连接' : monitorData[0]['netStatus']==0 ? '断开' : '未知'  }}</div>
-                    </div>
-                    <div class="top-right">
-                        <div class="control-type">
-                            <div class="control-title">运行状态：</div>
-                            <a-radio-group v-model:value="monitorData[0]['overhaul_run']">
-                                <a-radio :value="`1`" disabled>检修</a-radio>
-                                <a-radio :value="`0`" disabled>运行</a-radio>
-                            </a-radio-group>
-                        </div>
-                        <div class="control-type">
-                            <div class="control-title">控制模式：</div>
-                            <a-radio-group v-model:value="monitorData[0]['remote_local']">
-                                <a-radio :value="`1`" disabled>就地</a-radio>
-                                <a-radio :value="`0`" disabled>远程</a-radio>
-                            </a-radio-group>
-                        </div>
-
-                    </div>
-                </div>
-                <!-- 底部区域故障数据 -->
-                <div class="footer-item-box">
-                    <div class="device-detail">
-                        <div class="device-title">&nbsp</div>
-                        <div class="device-val">主机进气蝶阀</div>
-                        <div class="device-val">主机出气蝶阀</div>
-                        <div class="device-val">备机进气蝶阀</div>
-                        <div class="device-val">备机出气蝶阀</div>
-                        <!-- <div class="device-val">故障</div> -->
-                    </div>
-                    <div v-for="(device, key) in deviceMonitorList" class="device-detail" :key="key">
-                        <div class="device-title">{{ device.title }}</div>
-                        <div v-for="(detailItem, index) in device.dataList" :key="detailItem.code" class="device-val">
-                            <span :style="{ color: monitorData[0][detailItem.code] != '1' ? '#BFBFBF' : '#10BC79' }">{{
-                                monitorData[0][detailItem.code] == '0' ? '正常' : monitorData[0][detailItem.code] == '1' ?
-                                '故障' :
-                                '-'
-                            }}</span>
-                            <!-- <span v-if="index == 1"
-                                :style="{ color: monitorData[0][detailItem.code] != '1' ? '#BFBFBF' : '#10BC79' }">{{
-                                    monitorData[0][detailItem.code] == '0' ? '正常' : monitorData[0][detailItem.code] == '1' ? '故障' :
-                                    '-'
-                                }}</span> -->
-                        </div>
-                    </div>
-                </div>
-
-                <!-- 左边监测数据 -->
-                <div class="lr-box left-box">
-                    <div class="item item-l" v-for="(groupNum, ind) in monitorDataGroupNum" :key="groupNum">
-                        <ventBox1>
-                            <template #title>
-                                <!-- <div>{{ monitorData[groupNum - 1]['strname'] }}</div>   -->
-                                <div v-if="ind == 0">{{ `${monitorData[0]['strname']}-主` }}</div>
-                                <div v-else>{{ `${monitorData[0]['strname']}-备` }}</div>
-                            </template>
-                            <template #container>
-                                <div class="monitor-box">
-                                    <div class="parameter-title group-parameter-title">
-                                        <SvgIcon class="icon" size="38" name="device-group-paramer" /><span>进气蝶阀参数</span>
-                                    </div>
-
-                                    <div v-if="ind == 0">
-                                        <div class="state-item" v-for="(data, index) in groupParameterData" :key="index">
-                                            <div class="item-col">
-                                                <span class="state-title1">{{ Object.values(data)[0] }} :</span>
-                                                <span class="state-val1" v-if="index == 0">{{
-                                                    (monitorData.length > 0 && monitorData[0][Object.keys(data)[0]])
-                                                    >= 0
-                                                    ? monitorData[0][Object.keys(data)[0]] ?
-                                                        parseFloat(monitorData[0][Object.keys(data)[0]]).toFixed(2) : '-'
-                                                    : '-'
-                                                }}</span>
-
-                                                <span class="state-val" v-else>
-                                                    <span v-if="monitorData[0][Object.keys(data)[0]] == '0'"
-                                                        style="display: inline-block; width: 10px;height: 10px;border-radius: 50%;background-color: blue;"></span>
-                                                    <span v-else-if="monitorData[0][Object.keys(data)[0]] == '1'"
-                                                        style="display: inline-block; width: 10px;height: 10px;border-radius: 50%;background-color: greenyellow;"></span>
-                                                    <span v-else
-                                                        style="display: inline-block; width: 10px;height: 10px;border-radius: 50%;background-color: #ccc;"></span>
-
-                                                </span>
-                                            </div>
-                                            <div class="item-col" v-if="Object.keys(data)[1]">
-                                                <span class="state-title1">{{ Object.values(data)[1] }} :</span>
-                                                <span class="state-val1">
-                                                    <span v-if="monitorData[0][Object.keys(data)[1]] == '0'"
-                                                        style="display: inline-block; width: 10px;height: 10px;border-radius: 50%;background-color: blue;"></span>
-                                                    <span v-else-if="monitorData[0][Object.keys(data)[1]] == '1'"
-                                                        style="display: inline-block; width: 10px;height: 10px;border-radius: 50%;background-color: greenyellow;"></span>
-                                                    <span v-else
-                                                        style="display: inline-block; width: 10px;height: 10px;border-radius: 50%;background-color: #ccc;"></span>
-
-                                                </span>
-                                            </div>
-                                        </div>
-                                    </div>
-
-                                    <div v-else>
-                                        <div class="state-item" v-for="(data, index) in groupParameterData1" :key="index">
-                                            <div class="item-col">
-                                                <span class="state-title1">{{ Object.values(data)[0] }} :</span>
-                                                <span class="state-val1" v-if="index == 0">{{
-                                                    (monitorData.length > 0 && monitorData[0][Object.keys(data)[0]])
-                                                    >= 0
-                                                    ? monitorData[0][Object.keys(data)[0]] ?
-                                                        parseFloat(monitorData[0][Object.keys(data)[0]]).toFixed(2) : '-'
-                                                    : '-'
-                                                }}</span>
-
-                                                <span class="state-val" v-else>
-                                                    <span v-if="monitorData[0][Object.keys(data)[0]] == '0'"
-                                                        style="display: inline-block; width: 10px;height: 10px;border-radius: 50%;background-color: blue;"></span>
-                                                    <span v-else-if="monitorData[0][Object.keys(data)[0]] == '1'"
-                                                        style="display: inline-block; width: 10px;height: 10px;border-radius: 50%;background-color: greenyellow;"></span>
-                                                    <span v-else
-                                                        style="display: inline-block; width: 10px;height: 10px;border-radius: 50%;background-color: #ccc;"></span>
-
-                                                </span>
-                                            </div>
-                                            <div class="item-col" v-if="Object.keys(data)[1]">
-                                                <span class="state-title1">{{ Object.values(data)[1] }} :</span>
-                                                <span class="state-val1">
-                                                    <span v-if="monitorData[0][Object.keys(data)[1]] == '0'"
-                                                        style="display: inline-block; width: 10px;height: 10px;border-radius: 50%;background-color: blue;"></span>
-                                                    <span v-else-if="monitorData[0][Object.keys(data)[1]] == '1'"
-                                                        style="display: inline-block; width: 10px;height: 10px;border-radius: 50%;background-color: greenyellow;"></span>
-                                                    <span v-else
-                                                        style="display: inline-block; width: 10px;height: 10px;border-radius: 50%;background-color: #ccc;"></span>
-
-                                                </span>
-                                            </div>
-                                        </div>
-                                    </div>
-
-                                </div>
-                                <div class="monitor-box monitor-box1 ">
-                                    <div class="parameter-title device-parameter-title">
-                                        <SvgIcon class="icon" size="32" name="device-paramer" /><span>出气蝶阀参数</span>
-                                    </div>
-                                    <div class="state-box">
-                                        <div v-if="ind == 0">
-                                            <div class="state-item" v-for="(data, index) in deviceParameterData"
-                                                :key="index">
-                                                <div class="item-col">
-                                                    <span class="state-title1">{{ Object.values(data)[0] }} :</span>
-                                                    <span class="state-val1" v-if="index == 0">{{
-                                                        (monitorData.length > 0 && monitorData[0][Object.keys(data)[0]])
-                                                        >= 0
-                                                        ? monitorData[0][Object.keys(data)[0]] ?
-                                                            parseFloat(monitorData[0][Object.keys(data)[0]]).toFixed(2) : '-'
-                                                        : '-'
-                                                    }}</span>
-
-                                                    <span class="state-val" v-else>
-                                                        <span v-if="monitorData[0][Object.keys(data)[0]] == '0'"
-                                                            style="display: inline-block; width: 10px;height: 10px;border-radius: 50%;background-color: blue;"></span>
-                                                        <span v-else-if="monitorData[0][Object.keys(data)[0]] == '1'"
-                                                            style="display: inline-block; width: 10px;height: 10px;border-radius: 50%;background-color: greenyellow;"></span>
-                                                        <span v-else
-                                                            style="display: inline-block; width: 10px;height: 10px;border-radius: 50%;background-color: #ccc;"></span>
-                                                    </span>
-                                                </div>
-                                                <div class="item-col" v-if="Object.keys(data)[1]">
-                                                    <span class="state-title1">{{ Object.values(data)[1] }} :</span>
-                                                    <span class="state-val1">
-                                                        <span v-if="monitorData[0][Object.keys(data)[1]] == '0'"
-                                                            style="display: inline-block; width: 10px;height: 10px;border-radius: 50%;background-color: blue;"></span>
-                                                        <span v-else-if="monitorData[0][Object.keys(data)[1]] == '1'"
-                                                            style="display: inline-block; width: 10px;height: 10px;border-radius: 50%;background-color: greenyellow;"></span>
-                                                        <span v-else
-                                                            style="display: inline-block; width: 10px;height: 10px;border-radius: 50%;background-color: #ccc;"></span>
-                                                    </span>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div v-else>
-                                            <div class="state-item" v-for="(data, index) in deviceParameterData1"
-                                                :key="index">
-                                                <div class="item-col">
-                                                    <span class="state-title1">{{ Object.values(data)[0] }} :</span>
-                                                    <span class="state-val1" v-if="index == 0">{{
-                                                        (monitorData.length > 0 && monitorData[0][Object.keys(data)[0]])
-                                                        >= 0
-                                                        ? monitorData[0][Object.keys(data)[0]] ?
-                                                            parseFloat(monitorData[0][Object.keys(data)[0]]).toFixed(2) : '-'
-                                                        : '-'
-                                                    }}</span>
-
-                                                    <span class="state-val" v-else>
-                                                        <span v-if="monitorData[0][Object.keys(data)[0]] == '0'"
-                                                            style="display: inline-block; width: 10px;height: 10px;border-radius: 50%;background-color: blue;"></span>
-                                                        <span v-else-if="monitorData[0][Object.keys(data)[0]] == '1'"
-                                                            style="display: inline-block; width: 10px;height: 10px;border-radius: 50%;background-color: greenyellow;"></span>
-                                                        <span v-else
-                                                            style="display: inline-block; width: 10px;height: 10px;border-radius: 50%;background-color: #ccc;"></span>
-
-                                                    </span>
-                                                </div>
-                                                <div class="item-col" v-if="Object.keys(data)[1]">
-                                                    <span class="state-title1">{{ Object.values(data)[1] }} :</span>
-                                                    <span class="state-val1">
-                                                        <span v-if="monitorData[0][Object.keys(data)[1]] == '0'"
-                                                            style="display: inline-block; width: 10px;height: 10px;border-radius: 50%;background-color: blue;"></span>
-                                                        <span v-else-if="monitorData[0][Object.keys(data)[1]] == '1'"
-                                                            style="display: inline-block; width: 10px;height: 10px;border-radius: 50%;background-color: greenyellow;"></span>
-                                                        <span v-else
-                                                            style="display: inline-block; width: 10px;height: 10px;border-radius: 50%;background-color: #ccc;"></span>
-                                                    </span>
-                                                </div>
-                                            </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" />
-                            <!-- :option="zhudanOption" -->
-                        </template>
-                    </ventBox1>
-                </div>
-            </div>
-        </div>
-    </div>
-    <HandleModal :modal-is-show="modalIsShow" :modal-title="modalTitle" :modal-type="modalType" @handle-ok="handleOK"
-        @handle-cancel="handleCancel" />
-</template>
-<script lang="ts" setup name="nitrogenHome">
-import { onMounted, onUnmounted, ref, watch, reactive, defineProps, nextTick, inject, computed } from 'vue';
-import ventBox1 from '/@/components/vent/ventBox1.vue';
-import fourBorderBg from '../../../comment/components/fourBorderBg.vue';
-import { mountedThree, destroy, setModelType, addText } from '../nitrogen.threejs';
-import { getDevice } from '../nitrogen.api';
-import { SvgIcon } from '/@/components/Icon';
-import BarAndLine from '/@/components/chart/BarAndLine.vue';
-import HandleModal from './modal.vue';
-import { deviceControlApi } from '/@/api/vent/index';
-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 refresh = ref(false)
-const modalTitle = ref(''); // 模态框标题显示内容，根据设备操作类型决定
-const modalType = ref(''); // 模态框内容显示类型，设备操作类型
-const modalIsShow = ref<boolean>(false); // 是否显示模态框
-const loading = ref(true);
-let kzParam = reactive<any>({
-    data: {},
-    isFw: '',
-});
-
-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: '20%',
-        left: '0px',
-        right: '10px',
-        bottom: '3%',
-        containLabel: true
-    },
-    toolbox: {
-        feature: {}
-    }
-}
-const monitorDataGroupNum = ref(0);
-let airCompressorState = reactive<any[]>([]);
-
-//主机进气
-const groupParameterData = [
-    {
-        m_in_open: '开度',
-        m_bv_in_remote: '远控',
-    },
-    {
-        m_bv_in_open: '开到位',
-        m_bv_in_close: '关到位',
-    },
-
-];
-//备机进气
-const groupParameterData1 = [
-    {
-        b_in_open: '开度',
-        b_bv_in_remote: '远控',
-    },
-    {
-        b_bv_in_open: '开到位',
-        b_bv_in_close: '关到位',
-    },
-
-];
-//主机出气
-const deviceParameterData = [
-    {
-        m_out_open: '开度',
-        m_bv_out_remote: '远控',
-    },
-    {
-        m_bv_out_open: '开到位',
-        m_bv_out_close: '关到位',
-    },
-];
-//备机出气
-const deviceParameterData1 = [
-    {
-        b_out_open: '开度',
-        b_bv_out_remote: '远控',
-    },
-    {
-        b_bv_out_open: '开到位',
-        b_bv_out_close: '关到位',
-    },
-];
-
-
-const deviceMonitorList = reactive([
-    {
-        title: '负载短路故障',
-        dataList: [
-            {
-                title: '主机-进',
-                code: 'm_in_load_short',
-            },
-            {
-                title: '主机-出',
-                code: 'm_out_load_short',
-            },
-            {
-                title: '备机-进',
-                code: 'b_in_load_short',
-            },
-            {
-                title: '备机-出',
-                code: 'b_out_load_short',
-            },
-        ],
-    },
-
-    {
-        title: '电压过低故障',
-        dataList: [
-            {
-                title: '主机-进',
-                code: 'm_in_low_voltage',
-            },
-            {
-                title: '主机-出',
-                code: 'm_out_low_voltage',
-            },
-            {
-                title: '备机-进',
-                code: 'b_in_low_voltage',
-            },
-
-            {
-                title: '备机-出',
-                code: 'b_out_low_voltage',
-            },
-
-        ],
-    },
-
-    {
-        title: '电压过高故障',
-        dataList: [
-            {
-                title: '主机-进',
-                code: 'm_in_high_voltage',
-            },
-            {
-                title: '主机-出',
-                code: 'm_out_high_voltage',
-            },
-            {
-                title: '备机-进',
-                code: 'b_in_high_voltage',
-            },
-
-            {
-                title: '备机-出',
-                code: 'b_out_high_voltage',
-            },
-
-        ],
-    },
-
-    {
-        title: '电机漏电故障',
-        dataList: [
-            {
-                title: '主机-进',
-                code: 'm_in_motor_leakage',
-            },
-            {
-                title: '主机-出',
-                code: 'm_out_motor_leakage',
-            },
-            {
-                title: '备机-进',
-                code: 'b_in_motor_leakage',
-            },
-
-            {
-                title: '备机-出',
-                code: 'b_out_motor_leakage',
-            },
-
-        ],
-    },
-
-    {
-        title: '电源缺相故障',
-        dataList: [
-            {
-                title: '主机-进',
-                code: 'm_in_supply_phase',
-            },
-            {
-                title: '主机-出',
-                code: 'm_out_supply_phase',
-            },
-            {
-                title: '备机-进',
-                code: 'b_in_supply_phase',
-            },
-
-            {
-                title: '备机-出',
-                code: 'b_out_supply_phase',
-            },
-        ],
-    },
-
-    {
-        title: '关向过力矩故障',
-        dataList: [
-            {
-                title: '主机-进',
-                code: 'm_in_closing_overtorque',
-            },
-            {
-                title: '主机-出',
-                code: 'm_out_closing_overtorque',
-            },
-            {
-                title: '备机-进',
-                code: 'b_in_closing_overtorque',
-            },
-
-            {
-                title: '备机-出',
-                code: 'b_out_closing_overtorque',
-            },
-
-        ],
-    },
-
-    {
-        title: '开向过力矩故障',
-        dataList: [
-            {
-                title: '主机-进',
-                code: 'm_in_opening_overtorque',
-            },
-            {
-                title: '主机-出',
-                code: 'm_out_opening_overtorque',
-            },
-            {
-                title: '备机-进',
-                code: 'b_in_opening_overtorque',
-            },
-
-            {
-                title: '备机-出',
-                code: 'b_out_opening_overtorque',
-            },
-
-        ],
-    },
-
-    {
-        title: '关向过电流故障',
-        dataList: [
-            {
-                title: '主机-进',
-                code: 'm_in_closing_overcurrent',
-            },
-            {
-                title: '主机-出',
-                code: 'm_out_closing_overcurrent',
-            },
-            {
-                title: '备机-进',
-                code: 'b_in_closing_overcurrent',
-            },
-
-            {
-                title: '备机出',
-                code: 'b_out_closing_overcurrent',
-            },
-
-        ],
-    },
-
-    {
-        title: '开向过电流故障',
-        dataList: [
-            {
-                title: '主机-进',
-                code: 'm_in_opening_overcurrent',
-            },
-            {
-                title: '主机-出',
-                code: 'm_out_opening_overcurrent',
-            },
-            {
-                title: '备机-进',
-                code: 'b_in_opening_overcurrent',
-            },
-
-            {
-                title: '备机-出',
-                code: 'b_out_opening_overcurrent',
-            },
-
-        ],
-    },
-
-    {
-        title: '关向超时故障',
-        dataList: [
-            {
-                title: '主机-进',
-                code: 'm_in_closing_timeout',
-            },
-            {
-                title: '主机-出',
-                code: 'm_out_closing_timeout',
-            },
-            {
-                title: '备机-进',
-                code: 'b_in_closing_timeout',
-            },
-
-            {
-                title: '备机-出',
-                code: 'b_out_closing_timeout',
-            },
-
-        ],
-    },
-
-    {
-        title: '开向超时故障',
-        dataList: [
-            {
-                title: '主机-进',
-                code: 'm_in_opening_timeout',
-            },
-            {
-                title: '主机-出',
-                code: 'm_out_opening_timeout',
-            },
-            {
-                title: '备机-进',
-                code: 'b_in_opening_timeout',
-            },
-
-            {
-                title: '备机-出',
-                code: 'b_out_opening_timeout',
-            },
-
-        ],
-    },
-
-    {
-        title: '阀位故障',
-        dataList: [
-            {
-                title: '主机-进',
-                code: 'm_in_valve_position',
-            },
-            {
-                title: '主机-出',
-                code: 'm_out_valve_position',
-            },
-            {
-                title: '备机-进',
-                code: 'b_in_valve_position',
-            },
-
-            {
-                title: '备机-出',
-                code: 'b_out_valve_position',
-            },
-
-        ],
-    },
-
-    {
-        title: '热过载故障',
-        dataList: [
-            {
-                title: '主机-进',
-                code: 'm_in_thermal_overload',
-            },
-            {
-                title: '主机-出',
-                code: 'm_out_thermal_overload',
-            },
-            {
-                title: '备机-进',
-                code: 'b_in_thermal_overload',
-            },
-
-            {
-                title: '备机-出',
-                code: 'b_out_thermal_overload',
-            },
-
-        ],
-    },
-
-])
-
-
-const propTypeArr = ref([])
-const chartsColumns = ref([])
-watch(monitorDataGroupNum, () => {
-
-    const arr = <any[]>[]
-    const item = {
-        legend: '实时流量',
-        seriesName: '(m³/min)',
-        ymax: 100,
-        yname: 'm³/min',
-        linetype: 'line',
-        yaxispos: 'left',
-        color: '#FDB146',
-        sort: 1,
-        xRotate: 0,
-        dataIndex: 'flow',
-    }
-    const propTypeList = []
-    let echartLend=1
-    for (let i = 1; i <= echartLend; i++) {
-        const lineType = lodash.cloneDeep(item)
-        lineType.legend = '制氮机实时流量';
-        lineType.dataIndex = 'flow'
-        lineType.color = colors[i - 1]
-        arr.push(lineType)
-    }
-    chartsColumns.value = arr
-
-})
-
-
-
-const monitorData = ref(
-    new Array(3).fill({
-        // strName: '空压机',
-        // cumulativeFlow: '-',
-        // centerTemperature: '-',
-        // outletTemperature: '-',
-        // Ia: '-',
-        // Ib: '-',
-        // Ic: '-',
-        // Vab: '-',
-        // Vac: '-',
-        // Vbc: '-',
-        // compressGroupName: '',
-        // compressExhaustPressF1: '-',
-        // compressSeparatePressF1: '-',
-        // compressHostTempF1: '-',
-        // compressCrewTempF1: '-',
-        // compressRunTimeF1: '-',
-        // controlModel: 'LOC'
-    })
-);
-
-//图表数据
-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;
-        if (!result || result.msgTxt.length < 1) return;
-        result.msgTxt.forEach((item) => {
-            if (item.type && item.type.startsWith('nitrogen')) {
-                airCompressorState.length = 0;
-                monitorData.value = item['datalist'].filter((data) => {
-                    const readData = data.readData;
-                    airCompressorState.push({
-                        id: data.deviceID,
-                        deviceType: data.deviceType,
-                        m_start: readData.m_start,
-                        m_stop: readData.m_stop,
-                        b_start: readData.b_start,
-                        b_stop: readData.b_stop,
-                    });
-                    return Object.assign(data, readData);
-                });
-                console.log(monitorData, 'monitorData.value---===')
-                const airCompressor = { readTime: monitorData.value[0]['readTime'].substring(11) }
-                const dataArr = lodash.cloneDeep(echartData.value)
-                //图表数据
-                if (dataArr.length <4) {
-                    monitorData.value.forEach((el, index) => {
-                        airCompressor['flow'] = el['flow'] || 0
-                    });
-                    dataArr.push(airCompressor)
-                } else {
-                    dataArr.shift()
-                    // dataArr.push(airCompressor)
-                    monitorData.value.forEach((el, index) => {
-                        airCompressor['flow'] = el['flow'] || 0
-                    });
-                    dataArr.push(airCompressor)
-                    console.log(dataArr,'dataArr---------')
-                }
-                echartData.value = dataArr
-
-            }
-        });
-        // monitorDataGroupNum.value = monitorData.value.length;
-        monitorDataGroupNum.value = 2;
-        refresh.value = true
-        nextTick(() => {
-            refresh.value = false
-        })
-    }
-}
-
-function handlerDevice(data, titles) {
-    kzParam.data = data;
-    kzParam.isFw = titles
-    switch (titles) {
-        case '主机启动':
-            modalTitle.value = titles;
-            modalType.value = '1';
-            modalIsShow.value = true;
-            kzParam.data.m_start = '1'
-            break;
-        case '备机启动':
-            modalTitle.value = titles;
-            modalType.value = '2';
-            modalIsShow.value = true;
-            kzParam.data.b_start = '1'
-            break;
-        case '主机停止':
-            modalTitle.value = titles;
-            modalType.value = '1';
-            modalIsShow.value = true;
-            kzParam.data.m_stop = '1'
-            break;
-        case '备机停止':
-            modalTitle.value = titles;
-            modalType.value = '2';
-            modalIsShow.value = true;
-            kzParam.data.b_stop = '1'
-            break;
-
-    }
-
-}
-function handleOK(passWord, handlerState) {
-    console.log(kzParam, 'kz----------');
-    // if (passWord !== '123456') {
-    //   message.warning('密码不正确，请重新输入');
-    //   return;
-    // }
-
-    let data = {};
-    switch (kzParam.isFw) {
-        case '主机启动':
-            data = {
-                deviceid: kzParam.data.id,
-                devicetype: kzParam.data.deviceType,
-                password: passWord,
-                m_start: kzParam.data.m_start,
-            };
-            break;
-        case '备机启动':
-            data = {
-                deviceid: kzParam.data.id,
-                devicetype: kzParam.data.deviceType,
-                password: passWord,
-                b_start: kzParam.data.b_start,
-            };
-            break;
-        case '主机停止':
-            data = {
-                deviceid: kzParam.data.id,
-                devicetype: kzParam.data.deviceType,
-                password: passWord,
-                m_stop: kzParam.data.m_stop,
-            };
-            break;
-        case '备机停止':
-            data = {
-                deviceid: kzParam.data.id,
-                devicetype: kzParam.data.deviceType,
-                password: passWord,
-                b_stop: kzParam.data.b_stop,
-            };
-            break;
-
-
-    }
-
-
-    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;
-    });
-});
-
-onUnmounted(() => {
-    destroy();
-    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;
-
-        .top-box {
-            // margin-top: 40px; //lxh
-            position: relative;
-            width: 100%;
-            padding: 10px;
-            overflow: hidden;
-            display: flex;
-            justify-content: space-between;
-
-            .center-item-box {
-                position: absolute;
-                left: 50%;
-                top: 50px;
-                transform: translate(-48%, 0);
-                width: calc(100% - 760px);
-                height: 50px;
-                display: flex;
-                align-items: center;
-                pointer-events: auto;
-
-                .top-left {
-                    display: flex;
-                    flex: 2;
-                    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);
-                    }
-                }
-                .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;
-                        }
-                    }
-                }
-
-            }
-
-            .footer-item-box {
-                width: calc(100% - 20px);
-                height: auto;
-                position: absolute;
-                left: 50%;
-                bottom: 30px;
-                transform: translate(-50%);
-                display: flex;
-                justify-content: center;
-                color: #fff;
-                // box-shadow: 0 0 30px rgb(0, 153, 184) inset;
-                pointer-events: auto;
-
-                .device-detail {
-                    text-align: center;
-
-                    &:first-child {
-                        background-color: #00bbff11;
-                    }
-
-                    &:last-child {
-
-                        .device-val,
-                        .device-title {
-                            border-right: 1px solid #00baffd4;
-                        }
-                    }
-
-                    .device-val {
-                        line-height: 36px;
-                        border-top: 1px solid #00baffd4;
-                        border-left: 1px solid #00baffd4;
-
-                        &:last-child {
-                            border-bottom: 1px solid #00baffd4;
-                        }
-                    }
-                }
-
-                .device-title {
-                    width: 110px;
-                    text-align: center;
-                    border-top: 1px solid #00baffd4;
-                    border-left: 1px solid #00baffd4;
-                    line-height: 46px;
-                    color: #00e5ff;
-                    background-color: #00bbff21;
-                }
-
-            }
-
-            .lr-box {
-                height: fit-content;
-                display: flex;
-                flex-direction: column;
-                position: relative;
-                overflow: hidden;
-                z-index: 9999;
-                pointer-events: auto;
-            }
-
-            .item {
-                width: 335px;
-                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;
-                    }
-                }
-
-                .state-item {
-                    display: flex;
-                    flex-direction: row;
-                    padding: 5px;
-
-                    .item-col {
-                        width: calc(50% - 5px);
-                        display: flex;
-                        justify-content: center;
-                        align-items: center;
-                        padding-right: 4px;
-                        background-image: linear-gradient(to right, #39a3ff00, #39a3ff10);
-
-                        &:first-child {
-                            margin-right: 10px;
-                        }
-
-
-                        .state-title {
-                            color: #ffffffcc;
-                            flex: 9;
-                            font-size: 14px;
-                        }
-
-                        .state-val {
-                            flex: 1;
-                            color: #00eefffe;
-                            margin-right: 5px;
-                            text-align: right;
-                            font-size: 14px;
-                        }
-
-                        .state-title1 {
-                            color: #ffffffcc;
-                            flex: 5;
-                            font-size: 14px;
-                        }
-
-                        .state-val1 {
-                            display: flex;
-                            flex: 1;
-                            justify-content: center;
-                            align-items: center;
-                        }
-                    }
-                }
-
-                .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);
-                        }
-                    }
-                }
-
-                // .monitor-box1 {
-                //     height: 126px;
-                // }   
-
-                .state-box {
-                    height: calc(100% - 24px);
-                    overflow-y: auto;
-                }
-            }
-
-            .right-box {
-                width: 330px;
-                margin-top: 50px;
-
-                .control-group {
-                    display: flex;
-                    // justify-content: space-around;
-                    flex-wrap: wrap;
-                    height: 262px;
-                    overflow-y: auto;
-                    overflow-x: hidden;
-
-                    .control-item {
-                        width: 50%; //lxh
-                        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;
-                            width: 162px;
-                            // height: 47px;
-                            height: 36px;
-                            background: url('/@/assets/images/vent/control-switch-bg.png');
-                            background-size: 100% 100%;
-                            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;
-                        }
-                    }
-                }
-            }
-
-            .left-box {
-                width: 365px;
-                margin-top: 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;
-                font-size: 16px;
-            }
-
-            .unit {
-                color: #ffffffbb;
-                // font-size: 14px;
-                font-size: 16px;
-            }
-        }
-    }
-
-    .monitor-title {
-        width: 100px;
-        color: #7af5ff;
-        font-weight: 400;
-        // font-size: 14px;
-        font-size: 16px;
-    }
-
-
-
-    .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;
-}
-
-:deep(.zxm-radio-group) {
-    color: #fff !important;
-}
-
-:deep(.zxm-radio-group .zxm-radio-wrapper) {
-    color: #fff !important;
-}
-:deep(.zxm-radio-disabled + span){
-    color: #fff;
-}
-
-:deep(.zxm-radio-disabled .zxm-radio-inner::after){
-    background-color:#0490a8;
-}
-</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.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

@@ -1,826 +0,0 @@
-<template>
-  <div id="compressor3D" style="width: 100%; height: 100%; position: absolute; overflow: hidden"></div>
-  <template v-for="(sysItem, sysIndex) in monitorDataGroupArr" :key="sysIndex">
-    <div
-      :id="`compressorCss3D${sysIndex + 1}`"
-      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>
-  </template>
-  <div v-for="(sysItem, sysIndex) in monitorDataGroupArr" :key="sysIndex">
-    <div v-show="monitorDataGroupFlag == sysIndex + 1">
-      <div v-for="(groupNum, index) in sysItem" :key="index" class="modal-monitor">
-        <fourBorderBg :class="`kyj${groupNum}`" :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${groupNum}`" :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>
-
-  <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(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" v-for="(data, index) in totalData" :key="index"
-          >{{ data.title + '(' + data.unit + ')' }}：<span class="val">{{
-            monitorData[data.code] ? formatNum(monitorData[data.code]) : '-'
-          }}</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 } 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.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 { formatNum } from '/@/utils/ventutil';
-
-  const loading = ref(true);
-  const monitorDataGroupFlag = ref(0);
-  const monitorDataGroup = ref<Number[]>([]);
-  const kyjs = ref<string[]>([]);
-  const cqgs = ref<string[]>([]);
-  const monitorData = ref<Object | []>({});
-  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(flag) {
-    monitorDataGroupFlag.value = flag;
-    const monitorGroup = monitorDataGroupArr[flag - 1];
-    changeGroup(monitorGroup);
-    setModelType('compressor' + (flag - 1));
-    monitorDataGroup.value = monitorGroup;
-  }
-
-  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',
-    });
-  }
-
-  onMounted(async () => {
-    mountedThree(monitorDataGroupArr).then(async () => {
-      await getMonitor(true);
-      monitorDataGroupFlag.value = 1;
-      setMonitorGroupNum(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/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.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;
 }