浏览代码

解决冲突

hongrunxia 1 年之前
父节点
当前提交
9c16034728

二进制
src/assets/images/vent/custom-board.png


+ 54 - 0
src/views/vent/gas/gasPumpMonitor/components/customBoard.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="board">
+    <div class="board__label">
+      <slot name="label">
+        {{ label }}
+      </slot>
+    </div>
+    <div class="board__value">
+      <slot name="value">
+        <div class="board__value_txt">
+          {{ value }}
+        </div>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  // @TODO 对组件的颜色、背景等样式进行修改,符合全局规范
+
+  withDefaults(
+    defineProps<{
+      /** label(即上侧)内容,可用slot */
+      label?: string;
+      /** value(即下侧)内容,可用slot */
+      value?: string | number;
+    }>(),
+    {
+      label: '',
+      value: '',
+    }
+  );
+</script>
+
+<style lang="less" scoped>
+  @light-blue: aqua;
+
+  .board {
+    background-image: url('../../../../../assets/images/vent/custom-board.png');
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: 100% auto;
+    width: 100%;
+    padding: 30px;
+    text-align: center;
+    color: @white;
+  }
+
+  .board__value_txt {
+    font-size: 24px;
+    color: @light-blue;
+    font-style: italic;
+  }
+</style>

+ 117 - 0
src/views/vent/gas/gasPumpMonitor/components/listItem.vue

@@ -0,0 +1,117 @@
+<template>
+  <div class="list-item" :class="{ 'list-item__background': hasBackground }">
+    <div class="list-item__label">
+      <slot name="label">
+        {{ label }}
+      </slot>
+    </div>
+    <div class="list-item__value" :class="{ 'list-item__border': hasBorder }">
+      <slot name="value">
+        <div v-if="statusMode" :class="{ 'list-item__actived': matchedStatus.actived, 'list-item__deactived': !matchedStatus.actived }">
+          {{ matchedStatus.label }}
+        </div>
+        <div v-else-if="inputMode">
+          <Input :bordered="false" :value="value" @update:value="$emit('update:value', $event)" />
+        </div>
+        <div v-else class="text-right list-item__text_blue">
+          {{ value }}
+        </div>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  // @TODO 对组件的颜色、背景等样式进行修改,符合全局规范
+  import { Input } from 'ant-design-vue';
+  import { computed } from 'vue';
+
+  const props = withDefaults(
+    defineProps<{
+      /** value(即右侧)部分是否有边框 */
+      hasBorder?: boolean;
+      /** 是否有背景 */
+      hasBackground?: boolean;
+      /** label(即左侧)内容,可用slot */
+      label?: string;
+      /** value(即右侧)内容,可用slot */
+      value?: string;
+      /** 是否是状态灯模式,配合statusConfig使用 */
+      statusMode?: boolean;
+      /** 是否是输入框模式,不与状态灯模式兼容 */
+      inputMode?: boolean;
+      /** 状态灯配置,状态灯模式下,成功匹配的条目将按照配置显示 */
+      statusConfig?: { label: string; value: any; actived: boolean }[];
+    }>(),
+    {
+      hasBorder: false,
+      hasBackground: true,
+      label: '',
+      value: '',
+    }
+  );
+  defineEmits(['update:value']);
+
+  const defaultStatusConfig = {
+    value: undefined,
+    label: '未知',
+    actived: false,
+  };
+  const matchedStatus = computed(() => {
+    if (!props.statusConfig) return defaultStatusConfig;
+    return (
+      props.statusConfig.find((cfg) => {
+        return cfg.value === props.value;
+      }) || defaultStatusConfig
+    );
+  });
+</script>
+
+<style lang="less" scoped>
+  @light-blue: aqua;
+
+  .list-item {
+    height: 40px;
+    line-height: 40px;
+    padding: 0 10px;
+    display: flex;
+  }
+  .list-item__label {
+    flex-grow: 1;
+  }
+  .list-item__value {
+    flex-basis: 150px;
+    padding: 0 10px;
+  }
+
+  .list-item__background {
+    background-image: linear-gradient(to right, #0f73bbd8, #0f73bb62);
+  }
+
+  .list-item__text_blue {
+    color: @light-blue;
+  }
+
+  .list-item__border {
+    border: 1px solid @light-blue;
+    border-radius: 5px;
+  }
+
+  .list-item__actived {
+    padding-left: 35px;
+    background-image: url('../../../../../assets/images/company/home/select-bg.png');
+    background-repeat: no-repeat;
+    background-position: left center;
+  }
+
+  .list-item__deactived {
+    padding-left: 35px;
+    background-image: url('../../../../../assets/images/company/home/unselect-bg.png');
+    background-repeat: no-repeat;
+    background-position: left center;
+  }
+
+  ::v-deep(.zxm-input) {
+    color: @white;
+  }
+</style>

+ 87 - 4
src/views/vent/gas/gasPumpMonitor/components/monitor.vue

@@ -5,17 +5,47 @@
         <template #title>
           <div>抽采泵信息</div>
         </template>
-        <template #container> </template>
+        <template #container>
+          <div class="pump__tabs w-100% flex text-center">
+            <div
+              v-for="tab in tabs"
+              :key="tab.id"
+              class="flex-1 cursor-pointer pt-5px pb-5px"
+              :class="{ pump__tabs_pane_actived: activedTab === tab.id }"
+              @click="activedTab = tab.id"
+            >
+              {{ tab.name }}
+            </div>
+          </div>
+          <ListItem class="w-100% mb-5px" :value="activedPump.name" label="电压" />
+          <ListItem class="w-100% mb-5px" :value="activedPump.name" label="电流" />
+          <ListItem class="w-100% mb-5px" :value="activedPump.name" label="电机前轴温度" />
+          <ListItem class="w-100% mb-5px" :value="activedPump.name" label="电机后轴温度" />
+          <ListItem class="w-100% mb-5px" :value="activedPump.name" label="泵前轴温度" />
+          <ListItem class="w-100% mb-5px" :value="activedPump.name" label="泵后轴温度" />
+          <ListItem class="w-100% mb-5px" :value="activedPump.name" label="垂直振幅" />
+          <ListItem class="w-100% mb-5px" :value="activedPump.name" label="水平振幅" />
+          <ListItem class="w-100%" :value="activedPump.name" label="运行时间" />
+        </template>
       </ventBox1>
       <ventBox1 class="vent-margin-t-10">
         <template #title>
           <div>泵站环境</div>
         </template>
-        <template #container> </template>
+        <template #container>
+          <ListItem class="w-100% mb-5px" :value="activedPump.name" label="高位水池液位" />
+          <ListItem class="w-100% mb-5px" :value="activedPump.name" label="高位水池液温" />
+          <ListItem class="w-100% mb-5px" :value="activedPump.name" label="低位水池液位" />
+          <ListItem class="w-100% mb-5px" :value="activedPump.name" label="低位水池液温" />
+          <ListItem class="w-100% mb-5px" :value="activedPump.name" label="环境甲烷浓度" />
+          <ListItem class="w-100% mb-5px" :value="activedPump.name" label="泵站室内温度" />
+        </template>
       </ventBox1>
     </div>
     <div class="lr right-box">
       <div class="item-box sensor-container">
+        <CustomBoard label="累积抽采量" :value="cumulativeExtraction" />
+        <CustomBoard label="累积抽采时间" :value="cumulativeExtractionTime" />
         <ventBox1>
           <template #title>
             <div>自动模式</div>
@@ -28,8 +58,13 @@
 </template>
 
 <script setup lang="ts" name="gas-pump-monitor">
-  import { ref, onMounted, defineProps } from 'vue';
+  import { ref, onMounted, defineProps, computed } from 'vue';
   import ventBox1 from '/@/components/vent/ventBox1.vue';
+  import { Tabs, TabPane } from 'ant-design-vue';
+  import ListItem from './listItem.vue';
+  import CustomBoard from './customBoard.vue';
+  import { string } from 'vue-types';
+  import { PumpCtrlItems } from '../../../monitorManager/gasPumpMonitor/gasPump.data';
 
   const props = defineProps({
     deviceId: {
@@ -38,10 +73,58 @@
     },
   });
 
-  onMounted(async () => {});
+  // 抽放泵相关
+  const pumps = ref<any[]>([]);
+
+  function fetchPumps() {
+    const fakePPS = [
+      { name: 't1', id: 1 },
+      { name: 't2', id: 2 },
+      { name: 't3', id: 3 },
+      { name: 't4', id: 4 },
+    ];
+    pumps.value = fakePPS;
+    activedTab.value = fakePPS[0].id;
+  }
+
+  // 抽放泵模块的Tab相关
+  const tabs = computed(() => {
+    return pumps.value;
+  });
+  const activedTab = ref(0);
+
+  // 已选中的具体的抽放泵
+  const activedPump = computed(() => {
+    return pumps.value.find((e) => e.id === activedTab.value) || {};
+  });
+
+  // 告示板相关字段
+  // 累积抽采量
+  const cumulativeExtraction = ref(121345);
+  // 累积抽采时间
+  const cumulativeExtractionTime = ref(345121);
+
+  onMounted(async () => {
+    fetchPumps();
+  });
 </script>
 
 <style lang="less" scoped>
   @import '@/views/vent/monitorManager/comment/less/workFace.less';
   @ventSpace: zxm;
+  @tab-bg: darkcyan;
+  @tab-pane-bg: blue;
+  @tab-pane-border: lightblue;
+
+  .pump__tabs {
+    font-weight: bold;
+    background-color: @tab-bg;
+    border-radius: 5px 5px 0 0;
+  }
+
+  .pump__tabs_pane_actived {
+    background-color: @tab-pane-bg;
+    border-radius: 5px 5px 0 0;
+    border-bottom: 4px solid @tab-pane-border;
+  }
 </style>

+ 821 - 0
src/views/vent/monitorManager/compressor/components/nitrogenHome_ln.vue

@@ -1,4 +1,5 @@
 <template>
+<<<<<<< HEAD
   <div id="nitrogen3D" style="width: 100%; height: 100%; position: absolute; overflow: hidden"></div>
   <div
     id="nitrogenCss3D"
@@ -298,6 +299,295 @@
     }
   }
   function handleOK(passWord, handlerState) {
+=======
+    <div id="nitrogen3D" style="width: 100%; height: 100%; position: absolute; overflow: hidden"></div>
+    <div id="nitrogenCss3D" class="threejs-Object-CSS"
+        style="width: 100%; height: 100%; position: absolute; pointer-events: none; overflow: hidden; z-index: 2; top: 0px; left: 0px">
+        <a-spin :spinning="loading" />
+        <div v-for="groupNum in monitorDataGroupNum" :key="groupNum" class="modal-monitor">
+            <fourBorderBg :class="`kyj${groupNum}`" :id="`nitrogenMonitor${groupNum}`">
+                <div class="title">空压机{{ groupNum }} </div>
+                <template v-for="(preMonitor, preMonitorIndex) in preMonitorList" :key="preMonitorIndex">
+                    <div v-if="preMonitor.code !== 'signal'" class="monitor-item">
+                        <span class="monitor-title">{{ preMonitor.title }}:</span>
+                        <span class="monitor-val"><span class="val">{{ monitorData[groupNum] ?
+            monitorData[groupNum][preMonitor.code] : '-' }}</span><span class="unit">{{
+            preMonitor.unit }}</span></span>
+                    </div>
+                </template>
+            </fourBorderBg>
+        </div>
+    </div>
+    <div class="nitrogen-home">
+        <div class="nitrogen-container">
+            <div class="top-box">
+                <!-- 中间区域控制按钮 -->
+                <div class="center-item-box">
+                    <div class="top-left">
+                        <div class="button-box" @click="handlerDevice(airCompressorState, '制氮机启动')">制氮机启动</div>
+                        <div class="button-box" @click="handlerDevice(airCompressorState, '制氮机停止')">制氮机停止</div>
+                        <div class="button-box" @click="handlerDevice(airCompressorState, '空压机启动')">空压机启动</div>
+                        <div class="button-box" @click="handlerDevice(airCompressorState, '空压机停止')">空压机停止</div>
+                    </div>
+                    <div class="top-center">
+                        <div class="top-c-label">通信状态:</div>
+                        <!-- <div class="top-c-val">{{ monitorData['netStatus'] == 1 ? '连接' : monitorData['netStatus'] == 0 ?
+            '断开' : '未知' }}</div> -->
+                        <div class="top-c-val">{{ '未知' }}</div>
+                    </div>
+                    <div class="top-right">
+                        <div class="control-type">
+                            <div class="control-title">空压机状态切换:</div>
+                            <a-radio-group v-model:value="statusKyj">
+                                <a-radio :value="`1`">工作</a-radio>
+                                <a-radio :value="`0`">停机</a-radio>
+                            </a-radio-group>
+                        </div>
+                        <div class="control-type">
+                            <div class="control-title">制氮机远近控切换:</div>
+                            <a-radio-group v-model:value="statusZdj">
+                                <a-radio :value="`1`">远程</a-radio>
+                                <a-radio :value="`0`">就地</a-radio>
+                            </a-radio-group>
+                        </div>
+                    </div>
+                </div>
+                <!-- 左边监测数据 -->
+                <div class="lr-box left-box">
+                    <ventBox1 v-if="monitorData.length!=0 && monitorData[0]['deviceType'] == 'nitrogen_auto'">
+                        <template #title>
+                            <div>注氮机监测</div>
+                        </template>
+                        <template #container>
+                            <div class="input-item" v-for="(preFan, index) in nitrogenMonitorData" :key="index">
+                                <div class="title">{{ preFan.title }}</div>
+                                <div v-if="preFan.unit !== 'signal'" class="value">{{
+            monitorData[0] ? formatNum(Number(monitorData[0][preFan.code])) :
+                '-'
+        }}</div>
+                                <div v-else :class="{
+                'signal-round': true,
+                'signal-round-warning':monitorData[0][preFan.code] == '1',
+                'signal-round-gry': monitorData[0][preFan.code] != '1',
+            }"></div>
+                                <div class="unit">{{ preFan.unit !== 'signal' ? `(${preFan.unit})` : '' }}</div>
+                            </div>
+                        </template>
+                    </ventBox1>
+                    <div class="item item-l" v-for="groupNum in monitorDataGroupNum" :key="groupNum">
+                        <ventBox1>
+                            <template #title>
+                                <div>空压机{{ groupNum }}</div>
+                            </template>
+                            <template #container>
+                                <div class="monitor-box">
+                                    <div class="monitor-item">
+                                        <div class="state-item" v-for="(preFan, index) in preFanMonitorData"
+                                            :key="index">
+                                            <div class="state-title">{{ preFan.title + (preFan.unit !== 'signal' &&
+            preFan.unit !== '' ? `(${preFan.unit})` : '') }}</div>
+                                            <div v-if="preFan.unit !== 'signal'" class="state-val">{{
+            monitorData[groupNum] ?
+                monitorData[groupNum][preFan.code] : '-'
+        }}</div>
+                                            <div v-else :class="{
+                'signal-round': true,
+                'signal-round-warning': monitorData[groupNum][preFan.code] != '',
+                            'signal-round-gry': monitorData[groupNum][preFan.code] == '',
+                          }"></div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </template>
+                        </ventBox1>
+                    </div>
+                </div>
+                <!-- 右边控制状态 -->
+                <div class="lr-box right-box">
+                    <ventBox1 class="vent-margin-t-10">
+                        <template #title>
+                            <div>设备实时监测曲线</div>
+                        </template>
+                        <template #container>
+                            <BarAndLine v-if="chartsColumns.length > 0" xAxisPropType="readTime"
+                                :dataSource="echartData" height="340px" :chartsColumns="chartsColumns"
+                                chartsType="listMonitor" :option="echatsOption" />
+                        </template>
+                    </ventBox1>
+                    <div ref="playerRef" style="height: auto; width: 100%; margin-top: 10px"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script lang="ts" setup name="nitrogenHome">
+import { onMounted, onUnmounted, ref, watch, reactive, defineProps, nextTick, inject } from 'vue';
+import ventBox1 from '/@/components/vent/ventBox1.vue';
+import fourBorderBg from '../../../comment/components/fourBorderBg.vue';
+import { mountedThree, destroy, setModelType } from '../nitrogen.threejs';
+import { getDevice } from '../nitrogen.api';
+import BarAndLine from '/@/components/chart/BarAndLine.vue';
+import { deviceControlApi } from '/@/api/vent/index';
+import { preMonitorList, preFanMonitorData, nitrogenMonitorData } from '../nitrogen.data.ln';
+import { formatNum } from '/@/utils/ventutil';
+import { useCamera } from '/@/hooks/system/useCamera';
+import { message } from 'ant-design-vue';
+import lodash from 'lodash';
+const globalConfig = inject('globalConfig');
+
+
+const props = defineProps({
+    deviceId: {
+        type: String,
+        require: true,
+    },
+    modalType: {
+        type: String,
+        require: true,
+    },
+});
+const playerRef = ref();
+const refresh = ref(false);
+const modalTitle = ref(''); // 模态框标题显示内容,根据设备操作类型决定
+const modalType = ref(''); // 模态框内容显示类型,设备操作类型
+const modalIsShow = ref<boolean>(false); // 是否显示模态框
+const loading = ref(true);
+let kzParam = reactive<any>({
+    data: {},
+    isFw: null,
+});
+
+// const kyjs = ['1号空压机', '1号空压机', '1号空压机', '1号空压机'];
+const flvURL1 = () => {
+    // return `https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv`;
+    return '';
+};
+const colors = ['#FDB146', '#EE6666', '#9BCB75', '#03C2EC', '#DA3914', '#9C83D9'];
+const echatsOption = {
+    grid: {
+        top: '35%',
+        left: '15%',
+        right: '20px',
+        bottom: '8%',
+        // containLabel: true
+    },
+    toolbox: {
+        feature: {},
+    },
+};
+
+const monitorDataGroupNum = ref(0);
+const statusKyj = ref('')//空压机工作状态
+const statusZdj = ref('')//制氮机远近程状态
+
+let airCompressorState = reactive<any[]>([]);
+
+const chartsColumns = ref([
+    {
+        legend: '氮气流量',
+        seriesName: '(m³/h)',
+        ymax: 1000,
+        yname: 'm³/h',
+        linetype: 'line',
+        yaxispos: 'left',
+        color: '#FDB146',
+        sort: 1,
+        xRotate: 0,
+        dataIndex: 'nitrogen_flow_rate',
+    },
+]);
+const { getCamera, webRtcServer } = useCamera();
+
+const monitorData = reactive<any[]>([]);
+
+//图表数据
+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.length = 0
+                item.datalist.forEach(el => {
+                    if (el.deviceType == 'nitrogen_auto') {
+                        monitorData.splice(0, 0, Object.assign(el, el.readData))
+                    } else {
+                        monitorData.push({ ...el, ...el.readData })
+                    }
+                })
+                statusKyj.value = monitorData[1] ? monitorData[1]['operation_shutdown'] : ''
+                statusZdj.value = monitorData[0] ? monitorData[0]['remote_local'] : ''
+                monitorDataGroupNum.value = monitorData.length - 1
+                // if (monitorData['netStatus'] == 1) {
+                //     netStatus = 1;
+                // }
+                airCompressorState.push({
+                    id: monitorData[1] ? monitorData[1]['deviceID'] : '',
+                    deviceType: monitorData[1] ? monitorData[1]['deviceType'] : '',
+                });
+                const airCompressor = { readTime: monitorData[0]['readTime'].substring(11) };
+                const dataArr = lodash.cloneDeep(echartData.value);
+                //图表数据
+                if (dataArr.length <= 5) {
+                    airCompressor[`nitrogen_flow_rate`] = monitorData[0]['nitrogen_flow_rate'] || 0;
+                    dataArr.push(airCompressor);
+                } else {
+                    dataArr.shift();
+                    dataArr.push(airCompressor);
+                }
+                echartData.value = dataArr;
+            }
+        });
+        refresh.value = true;
+        nextTick(() => {
+            refresh.value = false;
+        });
+    }
+}
+
+function handlerDevice(data, bol) {
+    kzParam.data = data;
+    kzParam.isFw = bol;
+    if (bol == '制氮机启动' || bol == '空压机启动') {
+        modalTitle.value = bol;
+        modalType.value = '1';
+        modalIsShow.value = true;
+        kzParam.data.start = true;
+        kzParam.data.stop = false;
+    } else {
+        modalTitle.value = bol;
+        modalType.value = '2';
+        modalIsShow.value = true;
+        kzParam.data.start = false;
+        kzParam.data.stop = true;
+    }
+}
+function handleOK(passWord, handlerState) {
+>>>>>>> c7c0a5d5177a6321d0aa67c133dc2d90f7cd0dfa
     console.log(kzParam, 'kz----------');
     // if (passWord !== '123456') {
     //   message.warning('密码不正确,请重新输入');
@@ -306,6 +596,7 @@
 
     let data = {};
     if (kzParam.isFw == '制氮机启动' || kzParam.isFw == '空压机启动') {
+<<<<<<< HEAD
       data = {
         deviceid: kzParam.data.id,
         devicetype: kzParam.data.deviceType,
@@ -374,10 +665,81 @@
   @ventSpace: zxm;
 
   .nitrogen-box {
+=======
+        data = {
+            deviceid: kzParam.data.id,
+            devicetype: kzParam.data.deviceType,
+            password: passWord,
+            start: kzParam.data.start,
+        };
+    } else {
+        data = {
+            deviceid: kzParam.data.id,
+            password: passWord,
+            devicetype: kzParam.data.deviceType,
+            stop: kzParam.data.stop,
+        };
+    }
+
+    deviceControlApi(data).then((res) => {
+        // 模拟时开启
+        if (res.success) {
+            modalIsShow.value = false;
+            getDataSource(props.deviceId);
+            if (globalConfig.History_Type == 'remote') {
+                message.success('指令已下发至生产管控平台成功!');
+            } else {
+                message.success('指令已下发成功!');
+            }
+        }
+    });
+}
+function handleCancel() {
+    modalIsShow.value = false;
+    modalTitle.value = '';
+    modalType.value = '';
+}
+
+watch([monitorDataGroupNum, loading], ([newMonitorDataGroupNum, newLoading]) => {
+    nextTick(() => {
+        if (newMonitorDataGroupNum && !newLoading) {
+            setModelType(props.modalType, newMonitorDataGroupNum);
+        }
+    });
+});
+
+onMounted(async () => {
+    await getMonitor(true);
+    await mountedThree().then(() => {
+        loading.value = false;
+    });
+    await getCamera(props.deviceId, playerRef.value);
+});
+
+onUnmounted(() => {
+    destroy();
+    if (webRtcServer.length > 0) {
+        webRtcServer.forEach((item) => {
+            item.disconnect();
+        });
+    }
+    if (timer) {
+        clearTimeout(timer);
+        timer = undefined;
+    }
+});
+</script>
+
+<style lang="less" scoped>
+@ventSpace: zxm;
+
+.nitrogen-box {
+>>>>>>> c7c0a5d5177a6321d0aa67c133dc2d90f7cd0dfa
     width: 100%;
     height: 100%;
     display: flex;
     justify-content: center;
+<<<<<<< HEAD
   }
 
   #nitrogenCss3D {
@@ -395,6 +757,25 @@
   }
 
   .nitrogen-home {
+=======
+}
+
+#nitrogenCss3D {
+    .modal-monitor {
+        width: 200px;
+        position: absolute;
+        left: 0px;
+        top: 0px;
+    }
+
+    &:deep(.win) {
+        margin: 0 !important;
+        background: #00000044;
+    }
+}
+
+.nitrogen-home {
+>>>>>>> c7c0a5d5177a6321d0aa67c133dc2d90f7cd0dfa
     width: 100%;
     height: 100%;
     position: fixed;
@@ -407,6 +788,7 @@
     top: 20px;
 
     .nitrogen-container {
+<<<<<<< HEAD
       width: 100%;
       height: calc(100% - 100px);
       display: flex;
@@ -844,3 +1226,442 @@
     color: #fff !important;
   }
 </style>
+=======
+        width: 100%;
+        height: calc(100% - 100px);
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 100px;
+
+        .device-state {
+            width: 100%;
+            position: absolute;
+            top: 20px;
+            color: #e90000;
+            display: flex;
+            justify-content: center;
+            font-size: 20px;
+        }
+
+        .top-box {
+            width: 100%;
+            padding: 10px;
+            overflow: hidden;
+            display: flex;
+            justify-content: space-between;
+            // margin-top: 40px;
+
+            .center-item-box {
+                position: absolute;
+                left: 50%;
+                top: 50px;
+                transform: translate(-48%, 0);
+                width: calc(100% - 720px);
+                height: 50px;
+                display: flex;
+                align-items: center;
+                pointer-events: auto;
+
+                .top-left {
+                    display: flex;
+                    width: 40%;
+                    color: #fff;
+
+                    .button-box {
+                        position: relative;
+                        width: auto;
+                        height: 32px;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        border-radius: 5px;
+                        color: #fff;
+                        padding: 10px 15px;
+                        margin: 0px 10px;
+                        box-sizing: border-box;
+                        cursor: pointer;
+                        background: linear-gradient(#1fa6cb, #127cb5);
+
+                        &:hover {
+                            background: linear-gradient(#1fa6cbcc, #127cb5cc);
+                        }
+                    }
+                }
+
+                .top-center {
+                    display: flex;
+                    //   flex: 1;
+                    width: 15%;
+                    justify-content: center;
+                    align-items: center;
+                    font-size: 20px;
+                    color: #fff;
+
+                    .top-c-label {
+                        color: yellow;
+                    }
+                }
+
+                .top-right {
+                    display: flex;
+                    //   flex: 2;
+                    width: 45%;
+                    justify-content: right;
+                    align-items: center;
+                    color: #fff;
+
+                    .control-type {
+                        display: flex;
+                        color: #fff;
+
+                        .control-title {
+                            color: #73e8fe;
+                        }
+                    }
+                }
+            }
+
+            .lr-box {
+                height: 100%;
+                display: flex;
+                flex-direction: column;
+                position: relative;
+                // overflow: hidden;
+                z-index: 9999;
+                pointer-events: auto;
+                overflow-y: auto;
+                overflow-x: hidden;
+                height: calc(100% - 70px);
+            }
+
+            .item {
+                width: 305px;
+                height: auto;
+                position: relative;
+                border-radius: 5px;
+                margin-top: 10px;
+                margin-bottom: 0px;
+                pointer-events: auto;
+                color: #fff;
+                // overflow: hidden;
+
+                &:first-child {
+                    margin-top: 0px;
+                }
+
+                .base-title {
+                    color: #fff;
+                    margin-bottom: 8px;
+                    padding-left: 10px;
+                    position: relative;
+                    font-size: 16px;
+
+                    &::after {
+                        content: '';
+                        position: absolute;
+                        display: block;
+                        width: 4px;
+                        height: 12px;
+                        top: 7px;
+                        left: 0px;
+                        background: #45d3fd;
+                        border-radius: 4px;
+                    }
+                }
+
+                .monitor-item {
+                    width: 100%;
+                    display: flex;
+                    flex-direction: row;
+                    flex-wrap: wrap;
+
+                    .state-item {
+                        width: 50%;
+                        padding: 5px;
+                        display: flex;
+                        align-items: center;
+                        justify-content: space-between;
+
+                        .state-title {
+                            width: 100px;
+                            color: #ffffffdd;
+                            flex: 9;
+                            font-size: 14px;
+
+                            .unit {
+                                // color: #ffffffbb;
+                            }
+                        }
+
+                        .state-val {
+                            flex: 1;
+                            color: #e4a300;
+                            margin-right: 5px;
+                            text-align: right;
+                            font-size: 14px;
+                        }
+                    }
+                }
+
+                .signal-box {
+                    margin: 5px 0;
+                    display: flex;
+                    align-items: center;
+
+                    .signal-title {
+                        color: #7af5ff;
+                        margin: 0 5px;
+                    }
+
+                    &:last-child {
+                        margin-right: 0px;
+                    }
+                }
+
+                .list-item {
+                    padding: 0 10px;
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+
+                    .item-data-key {
+                        color: #ffffff99;
+                    }
+                }
+
+                .item-data-box {
+                    color: #fff;
+
+                    .state-icon {
+                        display: inline-block;
+                        width: 12px;
+                        height: 12px;
+                        border-radius: 12px;
+                    }
+
+                    .open {
+                        border: 5px solid #133a56;
+                        background: #4ecb73;
+                    }
+
+                    .close {
+                        border: 5px solid #192961;
+                        background: #6d7898;
+                    }
+                }
+            }
+
+            .item-l {
+                width: 100%;
+
+                .monitor-box {
+                    width: 100%;
+
+                    .parameter-title {
+                        position: relative;
+                        width: 100%;
+                        height: 14px;
+                        margin-top: 10px;
+
+                        .icon,
+                        span {
+                            position: absolute;
+                            top: -10px;
+                        }
+                    }
+
+                    .group-parameter-title {
+                        background-image: linear-gradient(to right, #39a3ff50, #39a3ff00);
+
+                        .icon {
+                            left: -12px;
+                            top: -17px;
+                        }
+
+                        span {
+                            left: 18px;
+                        }
+
+                        .item-col {
+                            background-image: linear-gradient(to right, #39a3ff00, #39a3ff10);
+                        }
+                    }
+
+                    .device-parameter-title {
+                        background-image: linear-gradient(to right, #3df6ff40, #3df6ff00);
+
+                        .icon {
+                            left: -10px;
+                            top: -14px;
+                        }
+
+                        span {
+                            left: 18px;
+                        }
+
+                        .item-col {
+                            background-image: linear-gradient(to right, #3df6ff10, #3df6ff00);
+                        }
+                    }
+                }
+            }
+
+            .right-box {
+                width: 300px;
+                margin-top: 50px;
+            }
+
+            .left-box {
+                width: 335px;
+                margin-top: 80px;
+
+                .input-item {
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    padding: 4px 8px;
+                    margin: 6px 0;
+                    background-image: linear-gradient(to right, #39deff15, #3977e500);
+
+                    .title {
+                        width: 200px;
+                    }
+
+                    .title-auto {
+                        width: auto;
+                    }
+
+                    .input-value {
+                        width: 80px;
+                        height: 28px;
+                        line-height: 28px !important;
+                        background: transparent !important;
+                        border-color: #228da2 !important;
+                        color: #fff !important;
+                    }
+
+                    .value {
+                        width: 100px;
+                        color: #00d8ff;
+                        padding-right: 20px;
+                    }
+
+                    .unit {
+                        width: 80px;
+                    }
+                }
+            }
+        }
+
+        &:deep(.win) {
+            width: 100%;
+            margin: 0 !important;
+        }
+    }
+}
+
+&:deep(.main) {
+    .title {
+        height: 34px;
+        text-align: center;
+        font-weight: 600;
+        color: #7af5ff;
+        // background-image: url('../../../assets/img/yfj/light.png');
+        background-repeat: no-repeat;
+        background-position-x: center;
+        background-position-y: 100%;
+        background-size: 80%;
+        font-size: 16px;
+    }
+
+    .monitor-item {
+        width: 200px;
+        display: flex;
+        flex-direction: row;
+        width: auto;
+        margin-bottom: 3px;
+
+        .monitor-val {
+            color: #ffb700;
+            display: flex;
+            width: auto;
+
+            .val {
+                width: 80px;
+                font-size: 14px;
+            }
+
+            .unit {
+                color: #ffffffbb;
+                font-size: 14px;
+            }
+        }
+    }
+
+    .monitor-title {
+        // width: 100px;
+        width: 125px;
+        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>
+>>>>>>> c7c0a5d5177a6321d0aa67c133dc2d90f7cd0dfa

+ 161 - 0
src/views/vent/monitorManager/compressor/nitrogen.data.ln.ts

@@ -1,3 +1,4 @@
+<<<<<<< HEAD
 export const nitrogenMonitorData = [
   {
     title: '管道温度',
@@ -122,3 +123,163 @@ export const preFanMonitorData = [
     unit: 'signal',
   },
 ];
+=======
+
+  export const nitrogenMonitorData = [
+    {
+      title: '管道温度',
+      code: 'pipe_temperature',
+      unit: '℃',
+    },
+    {
+      title: '管道压力',
+      code: 'pipe_pressure',
+      unit: 'MPa',
+    },
+    {
+      title: '氮气流量',
+      code: 'nitrogen_flow_rate',
+      unit: 'm³',
+    },
+    {
+      title: '氮气浓度',
+      code: 'nitrogen_concentration',
+      unit: '%',
+    },
+    {
+        title: '电动排氮阀开度',
+        code: 'nitrogen_discharge_opening',
+        unit: '--',
+      },
+  ];
+
+  export const preMonitorList = [
+    {
+      title: `主机温度`,
+      code: `host_temperature`,
+      unit: '℃',
+      child: [],
+    },
+    {
+      title: `排气压力`,
+      code: `exhaust_pressure`,
+      unit: 'MPa',
+      child: [],
+    },
+    {
+        title: `管道温度`,
+        code: `pipe_temperature`,
+        unit: '℃',
+        child: [],
+      },
+      {
+        title: `管道压力`,
+        code: `pipe_pressure`,
+        unit: 'MPa',
+        child: [],
+      },
+    {
+      title: `电机定子温度`,
+      code: `stator_temperature`,
+      unit: '℃',
+      child: [],
+    },
+    {
+      title: `电机前端轴承温度`,
+      code: `front_axle_temperature`,
+      unit: '℃',
+      child: [],
+    },
+    {
+        title: `电机后端轴承温度`,
+        code: `rear_axle_temperature`,
+        unit: '℃',
+        child: [],
+      },
+     
+    // {
+    //   code: 'signal',
+    //   child: [
+    //     {
+    //       title: `加载/卸载:`,
+    //       code: `LoadorUnload`,
+    //       isFault: -1,
+    //     },
+    //     {
+    //       title: `控制方式:`,
+    //       code: `CtrlMode`,
+    //       isFault: -2,
+    //     },
+    //   ],
+    // },
+    // {
+    //   code: 'signal',
+    //   child: [
+    //     {
+    //       title: `运行信号:`,
+    //       code: `Status`,
+    //       isFault: false,
+    //     },
+    //     {
+    //       title: `排气压力过高:`,
+    //       code: `ExhaustPreHighFault`,
+    //       isFault: true,
+    //     },
+    //   ],
+    // },
+  ];
+  export const preFanMonitorData = [
+    {
+      title: '运行状态',
+      code: 'operation_shutdown',
+      unit: '',
+    },
+    {
+        title: '运行时间',
+        code: 'operation_hours',
+        unit: 'h',
+      },
+    {
+      title: '油压未建立故障',
+      code: 'oil_pressure_not_established',
+      unit: 'signal',
+    },
+    {
+      title: '排气压力超限故障',
+      code: 'exhaust_pressure_exceeding_limit',
+      unit: 'signal',
+    },
+    {
+      title: '相序故障',
+      code: 'phase-sequence_protection',
+      unit: 'signal',
+    },
+    {
+        title: '风机1过载故障',
+        code: 'fan1_overload',
+        unit: 'signal',
+      },
+      {
+        title: '风机2过载故障',
+        code: 'fan2_overload',
+        unit: 'signal',
+      },
+      {
+        title: '风机3过载故障',
+        code: 'fan3_overload',
+        unit: 'signal',
+      },
+      {
+        title: '风机4过载故障',
+        code: 'fan4_overload',
+        unit: 'signal',
+      },
+      {
+        title: '高压柜故障',
+        code: 'hvc_malfunction',
+        unit: 'signal',
+      },
+  
+  ];
+  
+>>>>>>> c7c0a5d5177a6321d0aa67c133dc2d90f7cd0dfa

+ 2 - 2
src/views/vent/monitorManager/compressor/nitrogen.data.ts

@@ -222,8 +222,8 @@ export function getMonitorComponent() {
       return nitrogenHome;
     default:
       // nitrogenHome = defineAsyncComponent(() => import('./components/nitrogenHome_dltj.vue'));
-      // nitrogenHome = defineAsyncComponent(() => import('./components/nitrogenHome_new.vue'));
-      nitrogenHome = defineAsyncComponent(() => import('./components/nitrogenHome_bet.vue'));
+      nitrogenHome = defineAsyncComponent(() => import('./components/nitrogenHome_ln.vue'));
+      // nitrogenHome = defineAsyncComponent(() => import('./components/nitrogenHome_bet.vue'));
       return nitrogenHome;
   }
 }