[Wip 0000] 阻化剂DEMO页面开发

src/views/vent/monitorManager/sprayMonitor/backup.vue

@@ -0,0 +1,99 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <div class="spray-wrapper">
+    <BasicMonitoring
+      main-title="凝胶防灭火材料自动喷洒系统"
+      :main-config="{
+        operations: operations,
+        configs: configs,
+      }"
+      :monitor-history-config="{}"
+      :handler-history-config="{}"
+      :alarm-history-config="{}"
+      strtype="sys_surface_juejin"
+    >
+      <template #default="{ monitorData }">
+        <div id="spray3D" class="w-full h-full flex justify-center items-center overflow-hidden">
+          <a-spin :spinning="loading" />
+          <div id="sprayCSS3D" v-show="!loading" style="width: 100%; height: 100%; position: absolute; overflow: hidden; pointer-events: none">
+            <FourBorderBg id="sprayCSS3DEnvA">
+              <div>送料电机</div>
+              <div>电压US：{{ get(monitorData, 'spray_auto[0].readData.SlDjdy', '-') }}</div>
+              <div>电流LA：{{ get(monitorData, 'spray_auto[0].readData.SlDjAdl', '-') }}</div>
+              <div>电流LB：{{ get(monitorData, 'spray_auto[0].readData.SlDjBdl', '-') }}</div>
+              <div>电流LC：{{ get(monitorData, 'spray_auto[0].readData.SlDjCdl', '-') }}</div>
+            </FourBorderBg>
+            <FourBorderBg id="sprayCSS3DEnvB">
+              <div>注浆电机</div>
+              <div>电压US：{{ get(monitorData, 'spray_auto[0].readData.ZjDjdy', '-') }}</div>
+              <div>电流LA：{{ get(monitorData, 'spray_auto[0].readData.ZjDjAdl', '-') }}</div>
+              <div>电流LB：{{ get(monitorData, 'spray_auto[0].readData.ZjDjBdl', '-') }}</div>
+              <div>电流LC：{{ get(monitorData, 'spray_auto[0].readData.ZjDjCdl', '-') }}</div>
+            </FourBorderBg>
+          </div>
+        </div>
+      </template>
+    </BasicMonitoring>
+  </div>
+</template>
+<script setup lang="ts">
+  import { onMounted, ref } from 'vue';
+  import BasicMonitoring from '/@/components/vent/BasicMonitoring.vue';
+  import { useInitConfigs } from '../../home/configurable/hooks/useInit';
+  import { mountedThree, setModelType } from './spray.three';
+  import FourBorderBg from '/@/components/vent/fourBorderBg.vue';
+  import { get } from 'lodash-es';
+
+  const { configs, fetchConfigs } = useInitConfigs();
+  const loading = ref(false);
+
+  const operations = ref([
+    {
+      label: '开启控制箱',
+      key: 'run_auto_sign',
+      value: '1',
+      disabled: false,
+      showPassword: true,
+      // permission: 'spray:run_auto_sign',
+    },
+    {
+      label: '关闭控制箱',
+      key: 'run_auto_sign',
+      value: '0',
+      disabled: false,
+      showPassword: true,
+      // permission: 'spray:run_auto_sign',
+    },
+  ]);
+
+  onMounted(() => {
+    fetchConfigs('spray');
+    loading.value = true;
+    mountedThree('#spray3D', ['#sprayCSS3D', '#sprayCSS3DEnvA', '#sprayCSS3DEnvB']).then(() => {
+      setModelType('spray').finally(() => {
+        loading.value = false;
+      });
+    });
+  });
+</script>
+
+<style lang="less" scoped>
+  .spray-wrapper {
+    width: 100%;
+    height: 100%;
+  }
+
+  #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');
+  }
+</style>

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

@@ -16,7 +16,7 @@
         <div id="spray3D" class="w-full h-full flex justify-center items-center overflow-hidden">
           <a-spin :spinning="loading" />
           <div id="sprayCSS3D" v-show="!loading" style="width: 100%; height: 100%; position: absolute; overflow: hidden; pointer-events: none">
-            <FourBorderBg id="sprayCSS3DEnvA">
+            <!-- <FourBorderBg id="sprayCSS3DEnvA">
               <div>送料电机</div>
               <div>电压US：{{ get(monitorData, 'spray_auto[0].readData.SlDjdy', '-') }}</div>
               <div>电流LA：{{ get(monitorData, 'spray_auto[0].readData.SlDjAdl', '-') }}</div>
@@ -29,7 +29,7 @@
               <div>电流LA：{{ get(monitorData, 'spray_auto[0].readData.ZjDjAdl', '-') }}</div>
               <div>电流LB：{{ get(monitorData, 'spray_auto[0].readData.ZjDjBdl', '-') }}</div>
               <div>电流LC：{{ get(monitorData, 'spray_auto[0].readData.ZjDjCdl', '-') }}</div>
-            </FourBorderBg>
+            </FourBorderBg> -->
           </div>
         </div>
       </template>
@@ -44,6 +44,7 @@
   import { mountedThree, setModelType } from './spray.three';
   import FourBorderBg from '/@/components/vent/fourBorderBg.vue';
   import { get } from 'lodash-es';
+  import { zuhuabengConfigs } from './spray.data';
 
   const defaultConfigs: Config[] = [
     {
@@ -279,9 +280,27 @@
   const { configs, fetchConfigs } = useInitConfigs();
   const loading = ref(false);
 
+  // const operations = ref([
+  //   {
+  //     label: '开启控制箱',
+  //     key: 'run_auto_sign',
+  //     value: '1',
+  //     disabled: false,
+  //     showPassword: true,
+  //     // permission: 'spray:run_auto_sign',
+  //   },
+  //   {
+  //     label: '关闭控制箱',
+  //     key: 'run_auto_sign',
+  //     value: '0',
+  //     disabled: false,
+  //     showPassword: true,
+  //     // permission: 'spray:run_auto_sign',
+  //   },
+  // ]);
   const operations = ref([
     {
-      label: '开启控制箱',
+      label: '急停',
       key: 'run_auto_sign',
       value: '1',
       disabled: false,
@@ -289,7 +308,63 @@
       // permission: 'spray:run_auto_sign',
     },
     {
-      label: '关闭控制箱',
+      label: '补水阀启停',
+      key: 'run_auto_sign',
+      value: '0',
+      disabled: false,
+      showPassword: true,
+      // permission: 'spray:run_auto_sign',
+    },
+    {
+      label: '搅拌阀启停',
+      key: 'run_auto_sign',
+      value: '0',
+      disabled: false,
+      showPassword: true,
+      // permission: 'spray:run_auto_sign',
+    },
+    {
+      label: '组化泵启停',
+      key: 'run_auto_sign',
+      value: '0',
+      disabled: false,
+      showPassword: true,
+      // permission: 'spray:run_auto_sign',
+    },
+    {
+      label: '上料机启停',
+      key: 'run_auto_sign',
+      value: '0',
+      disabled: false,
+      showPassword: true,
+      // permission: 'spray:run_auto_sign',
+    },
+    // {
+    //   label: '上料机2启停',
+    //   key: 'run_auto_sign',
+    //   value: '0',
+    //   disabled: false,
+    //   showPassword: true,
+    //   // permission: 'spray:run_auto_sign',
+    // },
+    {
+      label: '搅拌电机启停',
+      key: 'run_auto_sign',
+      value: '0',
+      disabled: false,
+      showPassword: true,
+      // permission: 'spray:run_auto_sign',
+    },
+    {
+      label: '上料自动',
+      key: 'run_auto_sign',
+      value: '0',
+      disabled: false,
+      showPassword: true,
+      // permission: 'spray:run_auto_sign',
+    },
+    {
+      label: '喷洒自动',
       key: 'run_auto_sign',
       value: '0',
       disabled: false,
@@ -299,7 +374,8 @@
   ]);
 
   onMounted(() => {
-    fetchConfigs('spray');
+    // fetchConfigs('spray');
+    configs.value = zuhuabengConfigs;
     loading.value = true;
     mountedThree('#spray3D', ['#sprayCSS3D', '#sprayCSS3DEnvA', '#sprayCSS3DEnvB']).then(() => {
       setModelType('spray').finally(() => {

src/views/vent/monitorManager/sprayMonitor/spray.data.ts

@@ -0,0 +1,611 @@
+import { Config } from '../../deviceManager/configurationTable/types';
+
+export const defaultConfigs: Config[] = [
+  {
+    deviceType: '',
+    moduleName: '压力传感器',
+    pageType: 'spray',
+    moduleData: {
+      header: {
+        show: false,
+        readFrom: '',
+        selector: {
+          show: false,
+          value: '',
+        },
+        slot: {
+          show: false,
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: {
+        direction: 'row',
+        items: [
+          {
+            name: 'board',
+            basis: '100%',
+          },
+        ],
+      },
+      board: [
+        {
+          type: 'P',
+          layout: 'label-top',
+          items: [
+            {
+              label: '在线数量',
+              value: '1',
+            },
+            {
+              label: '异常数量',
+              value: '0',
+            },
+          ],
+          readFrom: '',
+        },
+      ],
+    },
+    showStyle: {
+      size: 'width:440px;height:250px;',
+      version: '保德',
+      position: 'top:80px;left:10px;',
+    },
+  },
+  {
+    deviceType: '',
+    moduleName: '喷洒实况',
+    pageType: 'spray',
+    moduleData: {
+      header: {
+        show: false,
+        readFrom: '',
+        selector: {
+          show: false,
+          value: '',
+        },
+        slot: {
+          show: false,
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: {
+        direction: 'row',
+        items: [
+          {
+            name: 'table',
+            basis: '100%',
+          },
+        ],
+      },
+      table: [
+        {
+          type: 'A',
+          columns: [
+            {
+              name: '支架',
+              prop: 'strinstallpos',
+            },
+            {
+              name: '工作状态',
+              prop: 'readData.online_str',
+            },
+          ],
+          readFrom: 'spray_auto',
+        },
+      ],
+      preset: [],
+    },
+    showStyle: {
+      size: 'width:440px;height:430px;',
+      version: '保德',
+      position: 'top:350px;left:10px;',
+    },
+  },
+  {
+    deviceType: '',
+    moduleName: '场景信息总览',
+    pageType: 'spray',
+    moduleData: {
+      header: { show: false, readFrom: '', selector: { show: false, value: '' }, slot: { show: false, value: '' } },
+      background: { show: false, type: 'video', link: '' },
+      layout: {
+        direction: 'column',
+        items: [
+          {
+            name: 'list',
+            basis: '50%',
+            overflow: false,
+          },
+          {
+            name: 'partition',
+            basis: 'auto',
+            overflow: false,
+          },
+          {
+            name: 'list',
+            basis: 'auto',
+            overflow: false,
+          },
+          {
+            name: 'partition',
+            basis: 'auto',
+            overflow: false,
+          },
+          {
+            name: 'list',
+            basis: 'auto',
+            overflow: false,
+          },
+        ],
+      },
+      list: [
+        {
+          type: 'L',
+          readFrom: '',
+          items: [
+            {
+              label: '绑定控制箱名称',
+              value: '${spray_auto[0].strinstallpos}',
+            },
+            {
+              label: '控制箱地址',
+              value: '${spray_auto[0].readData.snumber}',
+            },
+            {
+              label: '故障从机',
+              value: '${spray_auto[0].readData.Cjgz}',
+            },
+            {
+              label: '浮球液位报警',
+              value: '${spray_auto[0].readData.minimumgrouting}',
+            },
+            {
+              label: '输送管道压力',
+              value: '${spray_auto[0].readData.zjbhglpaV}',
+            },
+          ],
+        },
+        {
+          type: 'N',
+          readFrom: '',
+          items: [
+            {
+              label: '启动状态',
+              value: '${spray_auto[0].readData.online_str}',
+              color: 'blue',
+            },
+            {
+              label: '报警状态',
+              value: '${spray_auto[0].warnLevel_str}',
+            },
+          ],
+        },
+        {
+          type: 'N',
+          readFrom: '',
+          items: [
+            {
+              label: '启动状态',
+              value: '${spray_auto[0].readData.online_str}',
+              color: 'blue',
+            },
+            {
+              label: '故障状态',
+              value: '${spray_auto[0].readData.warnLevel_str}',
+            },
+          ],
+        },
+      ],
+      partition: [
+        {
+          type: 'A',
+          readFrom: '',
+          layout: 'icon-pre',
+          label: '送料电机',
+          icon: '/src/assets/images/home-container/configurable/tashanhome/partition-icon-1.png',
+        },
+        {
+          type: 'A',
+          readFrom: '',
+          layout: 'icon-pre',
+          label: '输送电机',
+          icon: '/src/assets/images/home-container/configurable/tashanhome/partition-icon-2.png',
+        },
+      ],
+    },
+    showStyle: {
+      size: 'width:440px;height:700px;',
+      version: '原版',
+      position: 'top:80px;right:10px;',
+    },
+  },
+];
+
+/** 阻化泵 */
+export const zuhuabengConfigs: Config[] = [
+  {
+    deviceType: '',
+    moduleName: '实时数据',
+    pageType: 'spray',
+    moduleData: {
+      header: {
+        show: false,
+        readFrom: '',
+        selector: {
+          show: false,
+          value: '',
+        },
+        slot: {
+          show: false,
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: {
+        direction: 'column',
+        items: [
+          {
+            name: 'list',
+            basis: '100%',
+            overflow: false,
+          },
+        ],
+      },
+      list: [
+        {
+          type: 'F',
+          readFrom: '',
+          items: [
+            {
+              label: '溶液液位',
+              value: '-',
+            },
+            {
+              label: '出口压力',
+              value: '-',
+            },
+            {
+              label: '溶液浓度',
+              value: '-',
+            },
+            {
+              label: '出液瞬时流量',
+              value: '-',
+            },
+            {
+              label: '出液累计流量',
+              value: '-',
+            },
+            {
+              label: '补水瞬时流量',
+              value: '-',
+            },
+            {
+              label: '单次下料量',
+              value: '-',
+            },
+            {
+              label: '单次补水量',
+              value: '-',
+            },
+            {
+              label: '累计补水量',
+              value: '-',
+            },
+            {
+              label: '阻化剂重量',
+              value: '-',
+            },
+            {
+              label: '需下料量',
+              value: '-',
+            },
+            {
+              label: '当天出液量',
+              value: '-',
+            },
+            {
+              label: '采煤机位置',
+              value: '-',
+            },
+            {
+              label: '下料时间',
+              value: '-',
+            },
+            {
+              label: '补水流量计状态',
+              value: '-',
+            },
+            {
+              label: '出液流量计状态',
+              value: '-',
+            },
+          ],
+        },
+      ],
+    },
+    showStyle: {
+      size: 'width:440px;height:450px;',
+      version: '保德',
+      position: 'top:60px;left:10px;',
+    },
+  },
+  {
+    deviceType: '',
+    moduleName: '阻化泵',
+    pageType: 'spray',
+    moduleData: {
+      header: {
+        show: false,
+        readFrom: '',
+        selector: {
+          show: false,
+          value: '',
+        },
+        slot: {
+          show: false,
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: {
+        direction: 'column',
+        items: [
+          {
+            name: 'list',
+            basis: '100%',
+            overflow: false,
+          },
+        ],
+      },
+      list: [
+        {
+          type: 'L',
+          readFrom: '',
+          items: [
+            {
+              label: '工作电压',
+              value: '-',
+            },
+            {
+              label: 'A相电流',
+              value: '-',
+            },
+            {
+              label: 'B相电流',
+              value: '-',
+            },
+            {
+              label: 'C相电流',
+              value: '-',
+            },
+            {
+              label: '运行状态',
+              value: '-',
+            },
+            {
+              label: '通讯状态',
+              value: '-',
+            },
+          ],
+        },
+      ],
+      preset: [],
+    },
+    showStyle: {
+      size: 'width:440px;height:320px;',
+      version: '保德',
+      position: 'top:520px;left:10px;',
+    },
+  },
+  {
+    deviceType: '',
+    moduleName: '搅拌装置',
+    pageType: 'spray',
+    moduleData: {
+      header: {
+        show: false,
+        readFrom: '',
+        selector: {
+          show: false,
+          value: '',
+        },
+        slot: {
+          show: false,
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: {
+        direction: 'column',
+        items: [
+          {
+            name: 'list',
+            basis: '100%',
+            overflow: false,
+          },
+        ],
+      },
+      list: [
+        {
+          type: 'L',
+          readFrom: '',
+          items: [
+            {
+              label: '工作电压',
+              value: '-',
+            },
+            {
+              label: 'A相电流',
+              value: '-',
+            },
+            {
+              label: 'B相电流',
+              value: '-',
+            },
+            {
+              label: 'C相电流',
+              value: '-',
+            },
+            {
+              label: '运行状态',
+              value: '-',
+            },
+            {
+              label: '通讯状态',
+              value: '-',
+            },
+          ],
+        },
+      ],
+      preset: [],
+    },
+    showStyle: {
+      size: 'width:440px;height:320px;',
+      version: '保德',
+      position: 'top:50px;right:10px;',
+    },
+  },
+  {
+    deviceType: '',
+    moduleName: '上料机',
+    pageType: 'spray',
+    moduleData: {
+      header: {
+        show: false,
+        readFrom: '',
+        selector: {
+          show: false,
+          value: '',
+        },
+        slot: {
+          show: false,
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: {
+        direction: 'column',
+        items: [
+          {
+            name: 'list',
+            basis: '100%',
+            overflow: false,
+          },
+        ],
+      },
+      list: [
+        {
+          type: 'L',
+          readFrom: '',
+          items: [
+            {
+              label: '工作电压',
+              value: '-',
+            },
+            {
+              label: 'A相电流',
+              value: '-',
+            },
+            {
+              label: 'B相电流',
+              value: '-',
+            },
+            {
+              label: 'C相电流',
+              value: '-',
+            },
+            {
+              label: '运行状态',
+              value: '-',
+            },
+            {
+              label: '通讯状态',
+              value: '-',
+            },
+          ],
+        },
+      ],
+      preset: [],
+    },
+    showStyle: {
+      size: 'width:440px;height:320px;',
+      version: '保德',
+      position: 'top:380px;right:10px;',
+    },
+  },
+  {
+    deviceType: '',
+    moduleName: '场景信息总览',
+    pageType: 'spray',
+    moduleData: {
+      header: { show: false, readFrom: '', selector: { show: false, value: '' }, slot: { show: false, value: '' } },
+      background: { show: false, type: 'video', link: '' },
+      layout: {
+        direction: 'row',
+        items: [
+          {
+            name: 'board',
+            basis: '100%',
+          },
+        ],
+      },
+      board: [
+        {
+          type: 'G',
+          layout: 'label-top',
+          items: [
+            {
+              label: '压力高限报警',
+              value: '1',
+            },
+            {
+              label: '流量下限报警',
+              value: '0',
+            },
+            {
+              label: '急停报警',
+              value: '1',
+            },
+            {
+              label: '液位低限报警',
+              value: '0',
+            },
+          ],
+          readFrom: '',
+        },
+      ],
+    },
+    showStyle: {
+      size: 'width:440px;height:180px;',
+      version: '原版',
+      position: 'top:710px;right:10px;',
+    },
+  },
+];

src/views/vent/monitorManager/sprayMonitor/spray.three.ts

@@ -28,7 +28,7 @@ function dispatchMouseEvent(event) {
 function initEventListender() {
   if (!model) return;
   model.canvasContainer?.addEventListener('mousedown', (e) => dispatchMouseEvent(e));
-  // model.orbitControls?.addEventListener('change', () => {});
+  // model.orbitControls?.addEventListener('change', () => console.log('debug camera', model.camera, model.orbitControls));
 }
 
 /** 渲染并更新总模型 */

src/views/vent/monitorManager/sprayMonitor/spray.threejs.base.ts

@@ -8,15 +8,16 @@ import { setModalCenter } from '/@/utils/threejs/util';
 
 class ModelContext {
   model;
-  modelName = 'spray-ts';
+  modelName = 'spray-upper';
+  // modelName = 'spray-ts';
   // modelName = 'dedust';
   group: THREE.Object3D | null = null;
   /** 本模型内支持的锚点位置数组 */
   anchors: [number, number, number][] = [
-    [-0.6, 0.3, -0.05],
+    [1.5, 0.5, 1.6],
     // [0, 0, 0],
     // 右侧传感器
-    [-0.3, 0.3, -0.05],
+    [1.3, 0.5, 1.6],
     // [-25.847, 8.783, 3.267],
     // [31.142, 8.783, 3.267],
   ];
@@ -24,15 +25,15 @@ class ModelContext {
   cssSprites: CSS3DSprite[] = [];
   /** 初始化时用到的摄像头位置参数，可以供外部访问或初始化时使用 */
   cameraPostion = {
-    x: 0.05342932338990988,
-    y: 0.08324360118266554,
-    z: 1.2186385420339856,
+    x: 2.0063999826191625,
+    y: 0.3963997081529602,
+    z: 3.275298992446514,
   };
   /** 初始化时用到的滑轨目标参数，可以供外部访问或初始化时使用，配合摄像头可以实现更精确的控制 */
   orbitTarget = {
-    x: 0,
-    y: 0,
-    z: 0,
+    x: 2.023679325280445,
+    y: -0.1461634482645532,
+    z: 0.04677126793423104,
   };
 
   constructor(model) {