[Feat 0000]应急控风减灾左侧组件开发

src/views/vent/home/configurable/belt/beltJcyj.vue

@@ -0,0 +1,101 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <div class="company-home">
+    <div class="border">
+      <customHeader :fieldNames="{ label: 'systemname', value: 'id', options: 'children' }">皮带巷智能管控</customHeader>
+      <div class="top-bg">
+        <BeltNav />
+      </div>
+      <div class="box-container">
+        <ModuleCommon
+          v-for="cfg in configs"
+          :key="cfg.deviceType"
+          :show-style="cfg.showStyle"
+          :module-data="cfg.moduleData"
+          :module-name="cfg.moduleName"
+          :device-type="cfg.deviceType"
+          :page-type="cfg.pageType"
+          :data="data"
+          :visible="true"
+        />
+      </div>
+      <!-- 巷道模型组件 -->
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+import customHeader from './components/customHeader-belt.vue';
+import { useInitConfigs, useInitPage } from '../hooks/useInit';
+import { testYjkf } from './configurable.data';
+import ModuleCommon from './components/ModuleCommonBelt.vue';
+import { getHomeData, sysList, list } from './configurable.api';
+import { message, Modal } from 'ant-design-vue';
+import BeltNav from './components/BeltNav.vue';
+import { doorMock } from './mock.ts';
+
+// import { BDFireMock } from './mock';
+const { configs, fetchConfigs } = useInitConfigs();
+const { updateEnhancedConfigs, data, updateData } = useInitPage('皮带巷智能管控');
+function refresh() {
+  fetchConfigs('belt').then(() => {
+    configs.value = testYjkf;
+    // Promise.resolve(doorMock).then(updateData);
+    // getHomeData({}).then(updateData);
+    // getDataSource();
+  });
+}
+function initInterval() {
+  setInterval(() => {
+    // getHomeData({}).then(updateData);
+  }, 60000);
+}
+onMounted(async () => {
+  refresh();
+  initInterval();
+});
+</script>
+
+<style lang="less" scoped>
+.spray-wrapper {
+  width: 100%;
+  height: 100%;
+  background-image: url('/@/assets/images/beltFire/baseMap.png');
+  background-size: cover;
+}
+
+#spray3D {
+  pointer-events: all;
+}
+
+.spray-wrapper :deep(.list-item_L .list-item__icon_L) {
+  background-image: url('/@/assets/images/home-container/configurable/minehome/list-icon-file.png');
+}
+.spray-wrapper :deep(.list-item_N:nth-child(1)) {
+  background-image: url('/@/assets/images/home-container/configurable/minehome/list-bg-n5.png');
+}
+.spray-wrapper :deep(.list-item_N:nth-child(2)) {
+  background-image: url('/@/assets/images/home-container/configurable/minehome/list-bg-n6.png');
+}
+.company-home {
+  background: url('/@/assets/images/beltFire/baseMap.png') no-repeat center;
+  width: 100%;
+  height: 100%;
+  color: @white;
+  position: relative;
+  .border {
+    width: 100%;
+    height: 94%;
+    background: url('/@/assets/images/beltFire/mainbj.png') no-repeat;
+    background-size: 100% 100%;
+    margin-top: 55px;
+  }
+  .top-bg {
+    width: 100%;
+    height: 56px;
+    position: absolute;
+    margin-top: -20px;
+    z-index: 1;
+  }
+}
+</style>

src/views/vent/home/configurable/belt/beltYjkf.vue

@@ -15,7 +15,7 @@
           :module-name="cfg.moduleName"
           :device-type="cfg.deviceType"
           :page-type="cfg.pageType"
-          :data="readData"
+          :data="data"
           :visible="true"
         />
       </div>
@@ -29,12 +29,14 @@ import customHeader from './components/customHeader-belt.vue';
 import { useInitConfigs, useInitPage } from '../hooks/useInit';
 import { testYjkf } from './configurable.data';
 import ModuleCommon from './components/ModuleCommonBelt.vue';
-import { getDevice, sysList } from './configurable.api';
+import { getHomeData, sysList, list } from './configurable.api';
 import { message, Modal } from 'ant-design-vue';
 import BeltNav from './components/BeltNav.vue';
+import { doorMock } from './mock.ts';
+
 // import { BDFireMock } from './mock';
 const { configs, fetchConfigs } = useInitConfigs();
-const { updateEnhancedConfigs, updateData } = useInitPage('皮带巷智能管控');
+const { updateEnhancedConfigs, data, updateData } = useInitPage('皮带巷智能管控');
 const readData = ref([
   {
     id: 1,
@@ -67,14 +69,14 @@ const readData = ref([
 function refresh() {
   fetchConfigs('belt').then(() => {
     configs.value = testYjkf;
-    Promise.resolve(readData).then(updateData);
-    // updateEnhancedConfigs(configs.value);
+    Promise.resolve(doorMock).then(updateData);
+    // getHomeData({}).then(updateData);
     // getDataSource();
   });
 }
 function initInterval() {
   setInterval(() => {
-    refresh();
+    // getHomeData({}).then(updateData);
   }, 60000);
 }
 onMounted(async () => {

src/views/vent/home/configurable/belt/components/detail/gateBoard.vue

@@ -8,11 +8,11 @@
       <div class="left-panel">
         <!-- 风门数据列表 -->
         <div class="door-list">
-          <div class="door-card" v-for="item in gateData" :key="item.id">
+          <div class="door-card" v-for="item in gateData" :key="item.deviceID">
             <div class="door-position">
               <div class="position"></div>
               <div class="door-name"
-                ><span>位置</span><span>{{ item.position }}</span></div
+                ><span>位置</span><span>{{ item.strname }}</span></div
               >
               <a-button class="door-btn">一键双开</a-button>
             </div>
@@ -26,7 +26,7 @@
             </div>
             <!-- 模型展示占位div -->
             <div class="model-placeholder">
-              <img :src="item.modelImg" alt="风门模型" class="model-img" />
+              <gateSVG :ref="(el) => setChildRef(el, index)" :identify="index"> </gateSVG>
             </div>
           </div>
         </div>
@@ -36,23 +36,45 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, nextTick, defineProps, watch } from 'vue';
+import { ref, onMounted, nextTick, defineProps, watch } from 'vue';
 import * as echarts from 'echarts';
 import { get } from 'lodash-es';
+import gateSVG from '../gateSVG.ssl.vue';
+import { config } from 'dotenv';
+let props = defineProps({});
+// const gateData = [
+//   {
+//     label: '前门状态',
+//     value: 'frontStatus',
+//     trans: {
+//       '0': '关闭',
+//       '1': '打开',
+//     },
+//   },
+//   {
+//     label: '后门状态',
+//     value: 'backStatus',
+//     trans: {
+//       '0': '关闭',
+//       '1': '打开',
+//     },
+//   },
+//   {
+//     label: '网络状态',
+//     value: 'networkStatus',
+//     trans: {
+//       '0': '离线',
+//       '1': '在线',
+//     },
+//   },
+// ];
+const childRefs = ref<any[]>([]);
+const setChildRef = (el, index) => {
+  childRefs.value[index] = el;
+};
 
-let props = defineProps({
-  devicedata: {
-    type: Object,
-    default: () => {
-      return {};
-    },
-  },
-  gateData: {
-    type: Object,
-    default: () => {
-      return [];
-    },
-  },
+onMounted(() => {
+  console.log(props.data, 'qqqqqqqq');
 });
 </script>
 
@@ -236,7 +258,7 @@ let props = defineProps({
 }
 .model-placeholder {
   width: 100%;
-  height: 120px;
+  height: 180px;
   background: url('/@/assets/images/beltFire/yjkf/1-4-1.png') no-repeat;
   background-size: 100% 100%;
   border-radius: 4px;

src/views/vent/home/configurable/belt/configurable.data.ts

@@ -1,5 +1,4 @@
 import { Config } from '../../deviceManager/configurationTable/types';
-// import Mock from 'mock.ts';
 // 皮带巷三级防灭火首页
 export const testBeltLaneFire: Config[] = [
   {
@@ -352,11 +351,11 @@ export const testYjkf: Config[] = [
       complex_list: [],
       preset: [
         {
-          readFrom: '',
-          gateData: [
+          readFrom: 'device.gate_list',
+          items: [
             {
               label: '前门状态',
-              value: '${frontStatus}',
+              value: 'frontGateOpen',
               trans: {
                 '0': '关闭',
                 '1': '打开',
@@ -364,7 +363,7 @@ export const testYjkf: Config[] = [
             },
             {
               label: '后门状态',
-              value: '${backStatus}',
+              value: 'rearGateOpen',
               trans: {
                 '0': '关闭',
                 '1': '打开',
@@ -372,16 +371,12 @@ export const testYjkf: Config[] = [
             },
             {
               label: '网络状态',
-              value: '${networkStatus}',
-              trans: {
-                '0': '离线',
-                '1': '在线',
-              },
+              value: 'warnLevel_str',
             },
           ],
         },
       ],
-      mock: Mock,
+      // mock: doorMock,
     },
     showStyle: {
       size: 'width:440px;height:810px;',
@@ -437,3 +432,312 @@ export const testYjkf: Config[] = [
     },
   },
 ];
+export const testJcyj: Config[] = [
+  {
+    deviceType: 'pdhzfxInfo',
+    moduleName: '火灾监测设备监测与分析',
+    pageType: 'belt',
+    moduleData: {
+      header: {
+        show: false,
+        readFrom: '',
+        selector: {
+          show: true,
+          value: '${beltName}',
+        },
+        slot: {
+          show: false,
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: {
+        direction: 'column',
+        items: [
+          {
+            name: 'complex_list1',
+            basis: '100%',
+          },
+        ],
+      },
+      board: [],
+      chart: [],
+      gallery: [],
+      gallery_list: [],
+      table: [],
+      list: [],
+      complex_list: [],
+      complex_list1: [
+        {
+          type: 'A',
+          readFrom: 'pdhzfxInfo[0].sysList',
+          mapFromData: true,
+          items: [
+            {
+              title: '',
+              contents: [
+                {
+                  label: '${beltName}',
+                  value: '${warnlevel}',
+                  info: '',
+                },
+              ],
+            },
+          ],
+        },
+        // {
+        //   type: 'C',
+        //   readFrom: 'sysList',
+        //   mapFromData: true,
+        //   items: [
+        //     {
+        //       title: '',
+        //       contents: [
+        //         {
+        //           label: '${beltName}',
+        //           value: '${warnlevel}',
+        //           info: '',
+        //         },
+        //       ],
+        //     },
+        //   ],
+        // },
+      ],
+      preset: [],
+      to: '/micro-vent-3dModal/beltYjkf/index',
+    },
+    showStyle: {
+      size: 'width:440px;height:810px;',
+      version: '原版',
+      position: 'top:40px;left:25px;',
+    },
+  },
+  {
+    deviceType: 'fmhjcInfo',
+    moduleName: '预警结果',
+    pageType: 'belt',
+    moduleData: {
+      header: {
+        show: true,
+        readFrom: '',
+        selector: {
+          show: true,
+          value: '${beltName}',
+        },
+        slot: {
+          show: false,
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: {
+        direction: 'column',
+        items: [
+          {
+            name: 'complex_list',
+            basis: '100%',
+          },
+        ],
+      },
+      board: [],
+      chart: [],
+      gallery: [],
+      gallery_list: [],
+      table: [],
+      list: [],
+      complex_list: [
+        {
+          type: 'C',
+          readFrom: 'sysList',
+          mapFromData: true,
+          items: [
+            {
+              title: '',
+              contents: [
+                {
+                  label: '${deviceType}',
+                  value: '${warnLevel}',
+                  info: '',
+                },
+              ],
+            },
+          ],
+        },
+      ],
+      preset: [],
+      // mock: BDfireMock,
+    },
+    showStyle: {
+      size: 'width:900px;height:280px;',
+      version: '原版',
+      position: 'top:640px;left:410px;',
+    },
+  },
+  {
+    deviceType: 'plmhInfo',
+    moduleName: '火灾监测设备监测与分析',
+    pageType: 'belt',
+    moduleData: {
+      header: {
+        show: true,
+        readFrom: '',
+        selector: {
+          show: true,
+          value: '${beltName}',
+        },
+        slot: {
+          show: false,
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: {
+        direction: 'column',
+        items: [
+          {
+            name: 'list',
+            basis: '100%',
+          },
+        ],
+      },
+      board: [],
+      chart: [],
+      gallery: [],
+      gallery_list: [],
+      table: [],
+      list: [
+        {
+          type: 'B',
+          readFrom: 'sysList',
+          items: [
+            {
+              label: '系统状态',
+              value: '${[0].netstatus}',
+              trans: {
+                '0': '离线',
+                '1': '正常',
+              },
+              color: 'blue',
+              info: '',
+            },
+            {
+              label: '运行状态',
+              value: '${[0].yxzt}',
+              trans: {
+                '0': '未喷淋',
+                '1': '正在喷淋',
+              },
+              color: 'blue',
+              info: '',
+            },
+            {
+              label: '喷淋水压状态',
+              value: '${[0].plsy}',
+              color: 'blue',
+              info: '',
+            },
+            {
+              label: '控制模式',
+              value: '${[0].kzms}',
+              color: 'blue',
+              info: '',
+            },
+          ],
+        },
+      ],
+      complex_list: [],
+      preset: [
+        {
+          readFrom: '',
+        },
+      ],
+      // mock: BDfireMock,
+    },
+    showStyle: {
+      size: 'width:430px;height:350px;',
+      version: '原版',
+      position: 'top:30px;right:25px;',
+    },
+  },
+  {
+    deviceType: 'yjkfArray',
+    moduleName: '车辆定位于CO浓度关联分析',
+    pageType: 'belt',
+    moduleData: {
+      header: {
+        show: true,
+        readFrom: '',
+        selector: {
+          show: true,
+          value: '${beltName}',
+        },
+        slot: {
+          show: false,
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: {
+        direction: 'row',
+        items: [
+          {
+            name: 'table',
+            basis: '100%',
+          },
+        ],
+      },
+      board: [],
+      chart: [],
+      gallery: [],
+      gallery_list: [],
+      table: [
+        {
+          type: 'C',
+          readFrom: 'aqjkData',
+          columns: [
+            {
+              name: '设备位置',
+              prop: 'deviceName',
+            },
+            {
+              name: '前门状态',
+              prop: 'frontDoorStatus',
+            },
+            {
+              name: '后门状态',
+              prop: 'backDoorStatus',
+            },
+            {
+              name: '网络状态',
+              prop: 'netStatus',
+            },
+          ],
+        },
+      ],
+      list: [],
+      complex_list: [],
+      preset: [],
+    },
+    showStyle: {
+      size: 'width:430px;height:430px;',
+      version: '原版',
+      position: 'top:415px;right:25px;',
+    },
+  },
+];

src/views/vent/home/configurable/belt/mock.ts

@@ -0,0 +1,28 @@
+export const doorMock = {
+  doorArray: [
+    {
+      id: 1,
+      position: '16联巷短路风门',
+      frontStatus: '关闭',
+      backStatus: '关闭',
+      networkStatus: '在线',
+      modelImg: '',
+    },
+    {
+      id: 2,
+      position: '18联巷短路风门',
+      frontStatus: '打开',
+      backStatus: '打开',
+      networkStatus: '在线',
+      modelImg: '',
+    },
+    {
+      id: 3,
+      position: '23联巷短路风门',
+      frontStatus: '关闭',
+      backStatus: '关闭',
+      networkStatus: '1',
+      modelImg: '',
+    },
+  ],
+};

src/views/vent/home/configurable/blue/components/content.vue

@@ -3,38 +3,62 @@
   <!-- 主体内容部分 -->
   <div class="content">
     <!-- 背景 -->
-    <img v-if="background.show && background.type === 'image'" class="content__background image__background"
-      :src="background.link" />
-    <video v-if="background.show && background.type == 'video'"
-      :class="layout.items.length ? 'content__background' : 'content__background_1'" width="100%" autoplay loop muted
-      disablepictureinpicture playsinline>
+    <img v-if="background.show && background.type === 'image'" class="content__background image__background" :src="background.link" />
+    <video
+      v-if="background.show && background.type == 'video'"
+      :class="layout.items.length ? 'content__background' : 'content__background_1'"
+      width="100%"
+      autoplay
+      loop
+      muted
+      disablepictureinpicture
+      playsinline
+    >
       <source :src="background.link" />
       Not Supportted Link Or Browser
     </video>
     <div class="flex w-full h-full" :style="{ flexDirection: layout.direction }">
-      <div v-for="config in layoutConfig" :key="config.name"
-        :style="{ flexBasis: config.basis, overflow: config.overflow ? 'auto' : 'none' }">
+      <div v-for="config in layoutConfig" :key="config.name" :style="{ flexBasis: config.basis, overflow: config.overflow ? 'auto' : 'none' }">
         <!-- 告示板部分 -->
         <template v-if="config.name === 'board'">
-          <div v-if="config.pageType == 'vent_New'" style="padding-top: 11%"
-            class="content__module content__module1 flex flex-justify-around flex-items-center flex-wrap">
-            <MiniBoard v-for="item in config.items" :key="item.prop" :label="item.label" :value="item.value"
-              :type="config.type" :layout="config.layout" />
+          <div
+            v-if="config.pageType == 'vent_New'"
+            style="padding-top: 11%"
+            class="content__module content__module1 flex flex-justify-around flex-items-center flex-wrap"
+          >
+            <MiniBoard
+              v-for="item in config.items"
+              :key="item.prop"
+              :label="item.label"
+              :value="item.value"
+              :type="config.type"
+              :layout="config.layout"
+            />
           </div>
-          <div v-else-if="config.pageType == 'New_fire'"
-            class="content__module flex flex-justify-around flex-items-center flex-wrap">
-            <MiniBoardNew v-for="item in config.items" :key="item.prop" :label="item.label" :value="item.value"
-              :type="config.type" :layout="config.layout" />
+          <div v-else-if="config.pageType == 'New_fire'" class="content__module flex flex-justify-around flex-items-center flex-wrap">
+            <MiniBoardNew
+              v-for="item in config.items"
+              :key="item.prop"
+              :label="item.label"
+              :value="item.value"
+              :type="config.type"
+              :layout="config.layout"
+            />
           </div>
           <div v-else class="content__module flex flex-justify-around flex-items-center flex-wrap">
-            <MiniBoard v-for="item in config.items" :key="item.prop" :label="item.label" :value="item.value"
-              :type="config.type" :layout="config.layout" />
+            <MiniBoard
+              v-for="item in config.items"
+              :key="item.prop"
+              :label="item.label"
+              :value="item.value"
+              :type="config.type"
+              :layout="config.layout"
+            />
           </div>
         </template>
         <!-- 图表部分，这部分通常需要填充，有告示板、Header等内容需要填充父级 -->
         <template v-if="config.name === 'chart'">
-          <CustomChart v-if="config.pageType == 'New_dust'" class="content__module_dust" :chart-config="config.config"
-            :chart-data="config.data" />
+          <CustomChart v-if="config.pageType == 'New_dust'" class="content__module_dust" :chart-config="config.config" :chart-data="config.data" />
           <CustomChart v-else class="content__module" :chart-config="config.config" :chart-data="config.data" />
         </template>
         <!-- 通常列表部分 -->
@@ -57,14 +81,12 @@
           <CustomGallery class="content__module" :type="config.type" :gallery-config="config.items" />
         </template>
         <template v-if="config.name === 'gallery_new'">
-          <CustomGalleryNew class="content__module" :type="config.config.type" :option="config.config.items"
-            :galleryData="config.data" />
+          <CustomGalleryNew class="content__module" :type="config.config.type" :option="config.config.items" :galleryData="config.data" />
         </template>
 
         <!-- 复杂列表部分 -->
         <template v-if="config.name === 'gallery_list'">
-          <GalleryList class="content__module" :type="config.type" :list-config="config.items"
-            :gallery-config="config.galleryItems" />
+          <GalleryList class="content__module" :type="config.type" :list-config="config.items" :gallery-config="config.galleryItems" />
         </template>
         <!-- 复杂列表部分 -->
         <template v-if="config.name === 'complex_list'">
@@ -75,26 +97,25 @@
         </template>
         <!-- 表格部分，这部分通常是占一整个模块的 -->
         <template v-if="config.name === 'table'">
-          <CustomTable class="content__module text-center overflow-auto" :type="config.type" :columns="config.columns"
-            :data="config.data" />
+          <CustomTable class="content__module text-center overflow-auto" :type="config.type" :columns="config.columns" :data="config.data" />
         </template>
         <template v-if="config.name === 'table_new'">
-          <CustomTableNew class="content__module text-center overflow-auto" :columns="config.config.columns"
-            :tableData="config.data" />
+          <CustomTableNew class="content__module text-center overflow-auto" :columns="config.config.columns" :tableData="config.data" />
         </template>
         <template v-if="config.name === 'tabs'">
-          <CustomTabs class="content__module" :type="config.type" :tab-config="config.items"
-            :overflow="config.overflow" />
+          <CustomTabs class="content__module" :type="config.type" :tab-config="config.items" :overflow="config.overflow" />
         </template>
         <template v-if="config.name === 'blast_delta'">
-          <BlastDelta v-if="config.pageType === 'New_fire'" class="content__moduleFire" :pos-monitor="config.data"
-            :canvasSize="{ width: 250, height: 200 }" />
-          <BlastDelta v-else class="content__module" :pos-monitor="config.data"
-            :canvasSize="{ width: 250, height: 200 }" />
+          <BlastDelta
+            v-if="config.pageType === 'New_fire'"
+            class="content__moduleFire"
+            :pos-monitor="config.data"
+            :canvasSize="{ width: 250, height: 200 }"
+          />
+          <BlastDelta v-else class="content__module" :pos-monitor="config.data" :canvasSize="{ width: 250, height: 200 }" />
         </template>
         <template v-if="config.name === 'qh_curve'">
-          <QHCurve class="content__module" :mainfan="config.data" :fan1-prop="config.config.fan1Prop"
-            :fan2-prop="config.config.fan2Prop" />
+          <QHCurve class="content__module" :mainfan="config.data" :fan1-prop="config.config.fan1Prop" :fan2-prop="config.config.fan2Prop" />
         </template>
         <template v-if="config.name === 'ai_chat'">
           <AIChat class="content__module" />
@@ -107,8 +128,13 @@
           <SelectCs :devicedata="config.data" :config="config.config" />
         </template>
         <template v-if="config.name === 'measure_detail'">
-          <MeasureDetail class="content__module" :show-title="false" :composite-data="config.data"
-            :topconfig="config.config.topconfig" :btnconfig="config.config.btnconfig" />
+          <MeasureDetail
+            class="content__module"
+            :show-title="false"
+            :composite-data="config.data"
+            :topconfig="config.config.topconfig"
+            :btnconfig="config.config.btnconfig"
+          />
         </template>
         <template v-if="config.name === 'partition'">
           <Partition class="content__module" :type="config.type" :label="config.label" :icon="config.icon" />
@@ -120,8 +146,7 @@
           <RadioLabel class="content__module" :type="config.config.type" :config="config.config" />
         </template>
         <template v-if="config.name === 'button_list'">
-          <ButtonList class="content__module" :type="config.config.type" :config="config.config"
-            :buttonList="config.config.buttonList" />
+          <ButtonList class="content__module" :type="config.config.type" :config="config.config" :buttonList="config.config.buttonList" />
         </template>
         <template v-if="config.name === 'vent_route'">
           <VentRoute class="content__module" :ventData="config.data" :config="config.config.echartOption" />
@@ -158,12 +183,12 @@ import TimelineList from '../../components/detail/TimelineList.vue';
 import TimelineListNew from '../../components/detail/TimelineListNew.vue';
 import CustomList from '../../components/detail/CustomList.vue';
 import CustomGallery from '../../components/detail/CustomGallery.vue';
-import CustomGalleryNew from '../../components/preset/CustomGalleryNew.vue'
+import CustomGalleryNew from '../../components/preset/CustomGalleryNew.vue';
 import ComplexList from '../../components/detail/ComplexList.vue';
 import ComplexListNew from '../../components/preset/ComplexListNew.vue';
 import GalleryList from '../../components/detail/GalleryList.vue';
 import CustomTable from '../../components/detail/CustomTable.vue';
-import CustomTableNew from '../../components/preset/CustomTableNew.vue'
+import CustomTableNew from '../../components/preset/CustomTableNew.vue';
 import CustomChart from '../../components/detail/CustomChart.vue';
 import { clone } from 'lodash-es';
 import { getData, getFormattedText } from '../../hooks/helper';
@@ -179,9 +204,9 @@ import Partition from '../../components/preset/partition.vue';
 import SelectorDualChart from '../../components/preset/selectorDualChart.vue';
 import RadioLabel from '../../components/preset/radioLabel.vue';
 import ButtonList from '../../components/preset/buttonList.vue';
-import VentRoute from '../../components/preset/ventRoute.vue'
-import EarlyWarnMonitor from '../../components/preset/earlyWarnMonitor.vue'
-import CoalSeam from '../../components/preset/CoalSeam.vue'
+import VentRoute from '../../components/preset/ventRoute.vue';
+import EarlyWarnMonitor from '../../components/preset/earlyWarnMonitor.vue';
+import CoalSeam from '../../components/preset/CoalSeam.vue';
 // import FIreWarn from './preset/FIreWarn.vue';
 // import FIreControl from './preset/FIreControl.vue';
 

src/views/vent/home/configurable/components/content.vue

@@ -164,10 +164,16 @@
           <generalList class="content__module" :generalData="config.data" />
         </template>
         <template v-if="config.name === 'nitrogenBtnList'">
-          <NitrogenBtnList class="content__module" :type="config.config.type" :config="config.config" :buttonList="config.config.buttonList" />
+          <NitrogenBtnList
+            class="content__module"
+            :data="config.data"
+            :type="config.config.type"
+            :config="config.config"
+            :buttonList="config.config.buttonList"
+          />
         </template>
         <template v-if="config.name === 'gateBoard'">
-          <GateBoard class="content__module" :devicedata="config.data" :gateData="config.config.gateData" />
+          <GateBoard class="content__module" :data="config.data" :config="config.config" />
         </template>
         <!-- <template v-if="config.key === 'fire_control'">
         <FIreControl class="content__module" />
@@ -216,7 +222,7 @@ import ButtonList from './preset/buttonList.vue';
 import NitrogenBtnList from './preset/nitrogenBtnList.vue';
 import cardList from './preset/cardList.vue';
 import generalList from './preset/generalList.vue';
-
+import GateBoard from '../belt/components/detail/gateBoard.vue';
 // import FIreWarn from './preset/FIreWarn.vue';
 // import FIreControl from './preset/FIreControl.vue';
 
@@ -474,7 +480,7 @@ const layoutConfig = computed(() => {
         break;
       }
     }
-    // console.log(arr,'arr---')
+    console.log(arr, 'arr---');
     return arr;
   }, []);
 });

src/views/vent/home/configurable/components/preset/nitrogenBtnList.vue

@@ -3,10 +3,7 @@
     <div class="button-group-container" v-for="(btn, index) in buttonList" :key="index" :class="index % 2 === 0 ? 'green-item' : 'blue-item'">
       <div class="button-name">{{ btn.label }}</div>
       <div class="radio-card" @click="toggleStatus(btn, index)">
-        <a-radio class="radio-dot" :checked="btn.value"></a-radio>
-        <span class="radio-text">
-          {{ btn.value ? '开启' : '关闭' }}
-        </span>
+        <a-radio class="radio-dot" v-model="btn.value" :value="true"></a-radio>
       </div>
     </div>
   </div>
@@ -15,9 +12,13 @@
 
 <script setup lang="ts">
 import ConfirmModal from '@/views/vent/gas/components/modal/confirmModal1.vue';
-import { ref, inject } from 'vue';
-import { InputPassword } from 'ant-design-vue';
+import { ref, inject, onMounted } from 'vue';
+import { InputPassword, message } from 'ant-design-vue';
+import { deviceControlApi } from '/@/api/vent/index';
+const globalConfig = inject<any>('globalConfig');
+
 let props = defineProps({
+  data: Object,
   buttonList: {
     type: Array,
     default: () => {
@@ -53,23 +54,23 @@ const handleButtonConfirm = inject<(button: ButtonItem) => void>(
  */
 const handleConfirm = async (inputPassword: string) => {
   try {
-    // 1. 密码验证
-    if (inputPassword !== '123456') {
-      throw new Error('密码错误');
-    }
-
-    // 2. 密码正确：获取 控制字段value
-    const controlField = currentButton.value.value;
-    // =============== 在这里调用你的控制接口 ===============
-    // await api.switchDevice({
-    //   field: controlField,  // 传给后端的控制字段
-    //   password: inputPassword,
-    //   status: !currentButton.value.isRunning // 要切换成的状态
-    // });
-
-    // 3. 前端切换显示状态
-    currentButton.value.isRunning = !currentButton.value.isRunning;
-
+    console.log(globalConfig?.simulatedPassword, '123123');
+    const data = {
+      paramcode: currentButton.value.value,
+      password: inputPassword || globalConfig?.simulatedPassword,
+      devicetype: props.data.deviceType,
+      value: !currentButton.value.value,
+      deviceid: props.data.deviceID,
+    };
+    deviceControlApi(data).then((res) => {
+      if (res.success) {
+        message.success('指令已下发成功！');
+      } else {
+        message.error(res.message);
+      }
+      modalVisible.value = false;
+    });
+    currentButton.value.value = !currentButton.value.value;
     message.success('操作成功');
     modalVisible.value = false; // 关闭弹窗
     return true;
@@ -88,6 +89,7 @@ const handleCancel = () => {
   inputWarn.value = '';
   modalVisible.value = false;
 };
+onMounted(() => {});
 </script>
 
 <style lang="less" scoped>
@@ -143,7 +145,7 @@ const handleCancel = () => {
 }
 
 .radio-dot {
-  margin-left: 10px;
+  margin-left: 30px;
   margin-right: 5px;
 }
 

src/views/vent/home/configurable/configurable.data.Belt.ts

@@ -1,441 +0,0 @@
-import { Config } from '../../deviceManager/configurationTable/types';
-
-// 皮带巷三级防灭火首页
-export const testBeltLaneFire: Config[] = [
-  {
-    deviceType: 'pdhzfxInfo',
-    moduleName: '皮带火灾风险状态整体评价',
-    pageType: 'belt',
-    moduleData: {
-      header: {
-        show: false,
-        readFrom: '',
-        selector: {
-          show: true,
-          value: '${beltName}',
-        },
-        slot: {
-          show: false,
-          value: '',
-        },
-      },
-      background: {
-        show: false,
-        type: 'video',
-        link: '',
-      },
-      layout: {
-        direction: 'column',
-        items: [
-          {
-            name: 'complex_list1',
-            basis: '100%',
-          },
-        ],
-      },
-      board: [],
-      chart: [],
-      gallery: [],
-      gallery_list: [],
-      table: [],
-      list: [],
-      complex_list: [],
-      complex_list1: [
-        {
-          type: 'A',
-          readFrom: 'pdhzfxInfo[0].sysList',
-          mapFromData: true,
-          items: [
-            {
-              title: '',
-              contents: [
-                {
-                  label: '${beltName}',
-                  value: '${warnlevel}',
-                  info: '',
-                },
-              ],
-            },
-          ],
-        },
-        // {
-        //   type: 'C',
-        //   readFrom: 'sysList',
-        //   mapFromData: true,
-        //   items: [
-        //     {
-        //       title: '',
-        //       contents: [
-        //         {
-        //           label: '${beltName}',
-        //           value: '${warnlevel}',
-        //           info: '',
-        //         },
-        //       ],
-        //     },
-        //   ],
-        // },
-      ],
-      preset: [],
-      to: '/beltYjkf/index',
-    },
-    showStyle: {
-      size: 'width:430px;height:350px;',
-      version: '原版',
-      position: 'top:30px;left:25px;',
-    },
-  },
-  {
-    deviceType: 'fmhjcInfo',
-    moduleName: '防灭火检测与预警信息',
-    pageType: 'belt',
-    moduleData: {
-      header: {
-        show: true,
-        readFrom: '',
-        selector: {
-          show: true,
-          value: '${beltName}',
-        },
-        slot: {
-          show: false,
-          value: '',
-        },
-      },
-      background: {
-        show: false,
-        type: 'video',
-        link: '',
-      },
-      layout: {
-        direction: 'column',
-        items: [
-          {
-            name: 'complex_list',
-            basis: '100%',
-          },
-        ],
-      },
-      board: [],
-      chart: [],
-      gallery: [],
-      gallery_list: [],
-      table: [],
-      list: [],
-      complex_list: [
-        {
-          type: 'C',
-          readFrom: 'sysList',
-          mapFromData: true,
-          items: [
-            {
-              title: '',
-              contents: [
-                {
-                  label: '${deviceType}',
-                  value: '${warnLevel}',
-                  info: '',
-                },
-              ],
-            },
-          ],
-        },
-      ],
-      preset: [],
-      // mock: BDfireMock,
-    },
-    showStyle: {
-      size: 'width:430px;height:430px;',
-      version: '原版',
-      position: 'top:415px;left:25px;',
-    },
-  },
-  {
-    deviceType: 'plmhInfo',
-    moduleName: '喷淋灭火系统',
-    pageType: 'belt',
-    moduleData: {
-      header: {
-        show: true,
-        readFrom: '',
-        selector: {
-          show: true,
-          value: '${beltName}',
-        },
-        slot: {
-          show: false,
-          value: '',
-        },
-      },
-      background: {
-        show: false,
-        type: 'video',
-        link: '',
-      },
-      layout: {
-        direction: 'column',
-        items: [
-          {
-            name: 'list',
-            basis: '100%',
-          },
-        ],
-      },
-      board: [],
-      chart: [],
-      gallery: [],
-      gallery_list: [],
-      table: [],
-      list: [
-        {
-          type: 'B',
-          readFrom: 'sysList',
-          items: [
-            {
-              label: '系统状态',
-              value: '${[0].netstatus}',
-              trans: {
-                '0': '离线',
-                '1': '正常',
-              },
-              color: 'blue',
-              info: '',
-            },
-            {
-              label: '运行状态',
-              value: '${[0].yxzt}',
-              trans: {
-                '0': '未喷淋',
-                '1': '正在喷淋',
-              },
-              color: 'blue',
-              info: '',
-            },
-            {
-              label: '喷淋水压状态',
-              value: '${[0].plsy}',
-              color: 'blue',
-              info: '',
-            },
-            {
-              label: '控制模式',
-              value: '${[0].kzms}',
-              color: 'blue',
-              info: '',
-            },
-          ],
-        },
-      ],
-      complex_list: [],
-      preset: [
-        {
-          readFrom: '',
-        },
-      ],
-      // mock: BDfireMock,
-    },
-    showStyle: {
-      size: 'width:430px;height:350px;',
-      version: '原版',
-      position: 'top:30px;right:25px;',
-    },
-  },
-  {
-    deviceType: 'yjkfArray',
-    moduleName: '应急控风减灾',
-    pageType: 'belt',
-    moduleData: {
-      header: {
-        show: true,
-        readFrom: '',
-        selector: {
-          show: true,
-          value: '${beltName}',
-        },
-        slot: {
-          show: false,
-          value: '',
-        },
-      },
-      background: {
-        show: false,
-        type: 'video',
-        link: '',
-      },
-      layout: {
-        direction: 'row',
-        items: [
-          {
-            name: 'table',
-            basis: '100%',
-          },
-        ],
-      },
-      board: [],
-      chart: [],
-      gallery: [],
-      gallery_list: [],
-      table: [
-        {
-          type: 'C',
-          readFrom: 'aqjkData',
-          columns: [
-            {
-              name: '设备位置',
-              prop: 'deviceName',
-            },
-            {
-              name: '前门状态',
-              prop: 'frontDoorStatus',
-            },
-            {
-              name: '后门状态',
-              prop: 'backDoorStatus',
-            },
-            {
-              name: '网络状态',
-              prop: 'netStatus',
-            },
-          ],
-        },
-      ],
-      list: [],
-      complex_list: [],
-      preset: [],
-    },
-    showStyle: {
-      size: 'width:430px;height:430px;',
-      version: '原版',
-      position: 'top:415px;right:25px;',
-    },
-  },
-];
-export const testYjkf: Config[] = [
-  {
-    deviceType: 'plmhInfo',
-    moduleName: '',
-    pageType: 'beltYjkf1',
-    moduleData: {
-      header: {
-        show: true,
-        readFrom: '',
-        selector: {
-          show: true,
-          value: '${beltName}',
-        },
-        slot: {
-          show: false,
-          value: '',
-        },
-      },
-      background: {
-        show: false,
-        type: 'video',
-        link: '',
-      },
-      layout: {
-        direction: 'column',
-        items: [
-          {
-            name: 'list',
-            basis: '100%',
-          },
-        ],
-      },
-      board: [],
-      chart: [],
-      gallery: [],
-      gallery_list: [],
-      table: [],
-      list: [
-        {
-          type: 'B',
-          readFrom: 'sysList',
-          items: [],
-        },
-      ],
-      complex_list: [],
-      preset: [
-        {
-          readFrom: '',
-        },
-      ],
-      // mock: BDfireMock,
-    },
-    showStyle: {
-      size: 'width:440px;height:830px;',
-      version: '原版',
-      position: 'top:10px;left:25px;',
-    },
-  },
-  {
-    deviceType: 'yjkfArray',
-    moduleName: '摄像头视频信号',
-    pageType: 'beltYjkf',
-    moduleData: {
-      header: {
-        show: true,
-        readFrom: '',
-        selector: {
-          show: true,
-          value: '${beltName}',
-        },
-        slot: {
-          show: false,
-          value: '',
-        },
-      },
-      background: {
-        show: false,
-        type: 'video',
-        link: '',
-      },
-      layout: {
-        direction: 'row',
-        items: [
-          {
-            name: 'table',
-            basis: '100%',
-          },
-        ],
-      },
-      board: [],
-      chart: [],
-      gallery: [],
-      gallery_list: [],
-      table: [
-        {
-          type: 'C',
-          readFrom: 'aqjkData',
-          columns: [
-            {
-              name: '设备位置',
-              prop: 'deviceName',
-            },
-            {
-              name: '前门状态',
-              prop: 'frontDoorStatus',
-            },
-            {
-              name: '后门状态',
-              prop: 'backDoorStatus',
-            },
-            {
-              name: '网络状态',
-              prop: 'netStatus',
-            },
-          ],
-        },
-      ],
-      list: [],
-      complex_list: [],
-      preset: [],
-      // mock: BDfireMock,
-    },
-    showStyle: {
-      size: 'width:440px;height:820px;',
-      version: '原版',
-      position: 'top:20px;right:25px;',
-    },
-  },
-];

src/views/vent/home/configurable/configurable.data.ts

@@ -252,9 +252,9 @@ export const testConfigVentSsl: Config[] = [
       to: '/micro-vent-3dModal/dashboard/analysis?type=tunMonitor&deviceType=windrect',
     },
     showStyle: {
-      size: 'width:1100px;height:280px;',
+      size: 'width:985px;height:280px;',
       version: '原版',
-      position: 'top:640px;left:410px;',
+      position: 'top:570px;left:472px;',
     },
   },
   {

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

@@ -39,8 +39,8 @@ const readData = ref({});
 function refresh() {
   // fetchConfigs(isDataRealTime.value ? 'vent_realtime' : 'vent').then(() => {
   fetchConfigs('nitrogen').then(() => {
-    configs.value = nitrogenConfigs;
-    // updateEnhancedConfigs(configs.value);
+    // configs.value = nitrogenConfigs;
+    updateEnhancedConfigs(configs.value);
     getDataSource();
   });
 }

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

@@ -242,17 +242,15 @@ export const nitrogenConfigs: Config[] = [
       complex_list: [],
       preset: [
         {
-          readFrom: '',
+          readFrom: 'nitrogen_auto[0]',
           type: 'A',
           buttonList: [
             { label: '制氮机1', value: 'nitrogenState', content: '' },
-            { label: '制氮机2', value: 'isRunning', content: '' },
-            { label: '制氮机3', value: 'isRunning', content: '' },
-            { label: '制氮机4', value: 'isRunning', content: '' },
-            { label: '1号空压机', value: 'isRunning', content: '' },
-            { label: '2号空压机', value: 'isRunning', content: '' },
-            { label: '3号空压机', value: 'isRunning', content: '' },
-            { label: '是否开启联动', value: 'isRunning', content: '' },
+            { label: '制氮机2', value: 'deviceStatus', content: '' },
+            { label: '制氮机3', value: 'nitrogenState', content: '' },
+            { label: '制氮机4', value: 'deviceStatus', content: '' },
+            { label: '1号空压机', value: 'nitrogenState', content: '' },
+            { label: '2号空压机', value: 'nitrogenState', content: '' },
           ],
         },
       ],