修改安全监控历史记录、风门动画

index.html

@@ -6,7 +6,7 @@
     <meta name="renderer" content="webkit" />
     <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0" />
     <title><%= title %></title>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
+    <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" /> -->
     <!-- <link rel="preload" as="script" href="/js/config.js"> -->
     <link rel="icon" id="faviconIcon" href="/logo.png" />
     <!-- 全局配置 -->

package.json

@@ -34,6 +34,7 @@
     "@vueuse/core": "^10.4.1",
     "@vueuse/shared": "^10.4.1",
     "@zxcvbn-ts/core": "^3.0.3",
+    "animate.css": "^4.1.1",
     "ant-design-vue": "^3.2.20",
     "axios": "^1.5.0",
     "china-area-data": "^5.0.1",
@@ -42,6 +43,7 @@
     "cron-parser": "^4.9.0",
     "cropperjs": "^1.5.13",
     "crypto-js": "^4.1.1",
+    "d3": "^7.8.5",
     "dayjs": "^1.11.9",
     "dexie": "^3.2.2",
     "dom-align": "^1.12.4",
@@ -70,7 +72,7 @@
     "resize-observer-polyfill": "^1.5.1",
     "showdown": "^2.1.0",
     "sortablejs": "^1.15.0",
-    "three": "^0.158.0",
+    "three": "^0.160.0",
     "tinymce": "^5.10.3",
     "vditor": "^3.9.5",
     "vue": "^3.3.4",

public/js/config.js

@@ -1,5 +1,6 @@
 const VUE_APP_URL = {
-  baseUrl: "http://182.92.126.35:9999", // 后台地址
+  // baseUrl: "http://182.92.126.35:9999", // 后台地址
+  baseUrl: "/jeecgsystem", // 后台地址
   // baseUrl: "http://192.168.159.158:9999", // 后台地址
   webRtcUrl: '//192.168.183.216:8000' // rtsp服务器IP地址
 }
@@ -11,5 +12,6 @@ const History_Type = {
 
 const VENT_PARAM = {
   // simulatedPassword: '123456' //(simulatedPassword 为空时有密码输入框弹出，不为空时不弹出密码输入框，无需输入密码)
-  simulatedPassword: ''
+  simulatedPassword: '',
+  showReport: false
 }

src/utils/threejs/modalParse.ts

@@ -1,105 +1,104 @@
-import { IBaseProps, IGroupParams, IPointLight } from "./type/types";
+import { IBaseProps, IGroupParams, IPointLight } from './type/types';
 
 /**
  * 生成基本参数 旋转 位移 缩放等属性
  */
 const genBaseStruct = (obj: THREE.Object3D): IBaseProps => {
-    const { type, name, quaternion: q, position: p, rotation: r, scale: s, up: u, userData, visible, matrix } = obj;
-    const quaternion: IBaseProps["quaternion"] = [q.x, q.y, q.z, q.w];
-    const position: IBaseProps["position"] = [p.x, p.y, p.z];
-    const rotation: IBaseProps["rotation"] = [r.x, r.y, r.z, r.order];
-    const scale: IBaseProps["scale"] = [s.x, s.y, s.z];
-    const up: IBaseProps["up"] = [u.x, u.y, u.z];
+  const { type, name, quaternion: q, position: p, rotation: r, scale: s, up: u, userData, visible, matrix } = obj;
+  const quaternion: IBaseProps['quaternion'] = [q.x, q.y, q.z, q.w];
+  const position: IBaseProps['position'] = [p.x, p.y, p.z];
+  const rotation: IBaseProps['rotation'] = [r.x, r.y, r.z, r.order];
+  const scale: IBaseProps['scale'] = [s.x, s.y, s.z];
+  const up: IBaseProps['up'] = [u.x, u.y, u.z];
 
-    return {
-        type,
-        name,
-        quaternion,
-        position,
-        rotation,
-        scale,
-        up,
-        matrix,
-        userData,
-        visible,
-        children: genObject3DChildren(obj.children),
-        animations: genAnimations(obj.animations),
-    };
+  return {
+    type,
+    name,
+    quaternion,
+    position,
+    rotation,
+    scale,
+    up,
+    matrix,
+    userData,
+    visible,
+    children: genObject3DChildren(obj.children),
+    animations: genAnimations(obj.animations),
+  };
 };
 
 /**
  * 生成动画结构
  */
-export const genAnimations = (animations: THREE.AnimationClip[]) =>{
-    return animations.map((animation) => {
-        animation["tracks"].forEach((t) => {
-            //删除这个方法就可以传递过去了
-            //@ts-ignore
-            delete t["createInterpolant"]
-            t['type'] = t['ValueTypeName'] //vector quaternion
-        });
-        return animation;
+export const genAnimations = (animations: THREE.AnimationClip[]) => {
+  return animations.map((animation) => {
+    animation['tracks'].forEach((t) => {
+      //删除这个方法就可以传递过去了
+      //@ts-ignore
+      delete t['createInterpolant'];
+      t['type'] = t['ValueTypeName']; //vector quaternion
     });
-}
-    
+    return animation;
+  });
+};
 
 /**
  * 生成物体参数
  */
 const genMeshStruct = (mesh: THREE.Mesh) => {
-    const { geometry, material } = mesh;
+  const { geometry, material } = mesh;
 
-    return {
-        geometry,
-        material,
-        ...genBaseStruct(mesh),
-    };
+  return {
+    geometry,
+    material,
+    ...genBaseStruct(mesh),
+  };
 };
 
 const genPointLightStruct = (pointLight: THREE.PointLight): IPointLight => {
-    return {
-        power: pointLight.power,
-        color: pointLight.color,
-        decay: pointLight.decay,
-        castShadow: pointLight.castShadow,
-        distance: pointLight.distance,
-        frustumCulled: pointLight.frustumCulled,
-        intensity: pointLight.intensity,
-        layers: pointLight.layers,
-        ...genBaseStruct(pointLight),
-    };
+  return {
+    power: pointLight.power,
+    color: pointLight.color,
+    decay: pointLight.decay,
+    castShadow: pointLight.castShadow,
+    distance: pointLight.distance,
+    frustumCulled: pointLight.frustumCulled,
+    intensity: pointLight.intensity,
+    layers: pointLight.layers,
+    ...genBaseStruct(pointLight),
+  };
 };
 
 const genObject3DStruct = (object: THREE.Object3D) => {
-    return {
-        ...genBaseStruct(object),
-    };
+  return {
+    ...genBaseStruct(object),
+  };
 };
 
 /**
  * 生成子元素结构
  */
 const genObject3DChildren = (children: THREE.Object3D[]) => {
-    const childStruct: IGroupParams["children"] = [];
-    for (const child of children) {
-        const { type } = child;
-        if (type === "Mesh") {
-            childStruct.push(genMeshStruct(child as THREE.Mesh));
-        } else if (type === "Group") {
-            childStruct.push(genGroupStruct(child as THREE.Group));
-        } else if (type === "PointLight") {
-            childStruct.push(genPointLightStruct(child as THREE.PointLight));
-        } else if (type === "Object3D") {
-            childStruct.push(genObject3DStruct(child));
-        }
+  const childStruct: IGroupParams['children'] = [];
+  for (const child of children) {
+    const { type } = child;
+    if (type === 'Mesh') {
+      childStruct.push(genMeshStruct(child as THREE.Mesh));
+    } else if (type === 'Group') {
+      childStruct.push(genGroupStruct(child as THREE.Group));
+    } else if (type === 'PointLight') {
+      childStruct.push(genPointLightStruct(child as THREE.PointLight));
+    } else if (type === 'Object3D') {
+      childStruct.push(genObject3DStruct(child));
     }
-    return childStruct;
+  }
+  return childStruct;
 };
 
 /**
  * 生成物体组结构
  */
 export const genGroupStruct = (group: THREE.Group) => {
-    const struct: IGroupParams = { ...genBaseStruct(group) };
-    return struct;
+  const struct: IGroupParams = { ...genBaseStruct(group) };
+  return struct;
 };

src/views/vent/monitorManager/comment/HandlerHistoryTable.vue

@@ -13,7 +13,6 @@
   import { defHttp } from '/@/utils/http/axios';
   import dayjs from 'dayjs';
 
-
   const list = (params) => defHttp.get({ url: '/safety/ventanalyDevicesetLog/list', params });
 
   const props = defineProps({
@@ -37,47 +36,50 @@
     },
     scroll: {
       type: Object,
-      default: { y: 0 }
-    }
+      default: { y: 0 },
+    },
   });
-  
-  const handlerHistory = ref()
-  const columns = ref([])
-  const tableScroll = props.scroll.y ? ref({ y: props.scroll.y - 100 }) : ref({})
-  
+
+  const handlerHistory = ref();
+  const columns = ref([]);
+  const tableScroll = props.scroll.y ? ref({ y: props.scroll.y - 100 }) : ref({});
+
   watch(
     () => {
       return props.columnsType;
     },
     (newVal) => {
-      const column = getTableHeaderColumns(newVal)
+      const column = getTableHeaderColumns(newVal);
       if (column && column.length < 1) {
-        const arr = newVal.split('_')
+        const arr = newVal.split('_');
         const columnKey = arr.reduce((prev, cur, index) => {
           if (index !== arr.length - 2) {
-            return prev + '_' + cur
+            return prev + '_' + cur;
           } else {
-            return prev
+            return prev;
           }
-        })
+        });
         columns.value = getTableHeaderColumns(arr[0] + '_history');
       } else {
-        columns.value = column
+        columns.value = column;
       }
-      if (handlerHistory.value) reload()
+      if (handlerHistory.value) reload();
     },
     {
-      immediate: true
+      immediate: true,
     }
   );
 
-  watch(() => props.scroll.y, (newVal) => {
-  if (newVal) {
-    tableScroll.value = { y: newVal - 100 }
-  } else {
-    tableScroll.value = {}
-  }
-})
+  watch(
+    () => props.scroll.y,
+    (newVal) => {
+      if (newVal) {
+        tableScroll.value = { y: newVal - 100 };
+      } else {
+        tableScroll.value = {};
+      }
+    }
+  );
 
   // 列表页面公共参数、方法
   const { tableContext } = useListPage({
@@ -107,10 +109,7 @@
             label: '时间范围',
             field: 'createTime',
             component: 'RangePicker',
-            defaultValue: [
-              dayjs().subtract(1, 'day'),
-              dayjs(),
-            ],
+            defaultValue: [dayjs().subtract(1, 'day'), dayjs()],
             componentProps: {
               valueFormat: 'YYYY-MM-DD HH:mm:ss',
             },
@@ -147,7 +146,7 @@
   });
   //注册table数据
   const [registerTable, { reload, setLoading }] = tableContext;
-  defineExpose({ setLoading })
+  defineExpose({ setLoading });
 </script>
 
 <style scoped lang="less">
@@ -156,8 +155,8 @@
   // :deep(.@{ventSpace}-table-body) {
   //   height: auto !important;
   // }
-  :deep(.zxm-picker){
-      height: 30px !important;
+  :deep(.zxm-picker) {
+    height: 30px !important;
   }
   .handler-history-table {
     width: 100%;

src/views/vent/monitorManager/comment/HistoryTable.vue

@@ -116,7 +116,12 @@ import { onMounted } from 'vue';
   async function getDeviceList() {
     let result;
     if(globalConfig.History_Type == 'vent'){
-      result = await defHttp.get({ url: '/safety/ventanalyManageSystem/linkdevicelist', params: { sysId: props.sysId, deviceType: props.deviceType } })
+      if(props.deviceListApi){
+        const res = await props.deviceListApi()
+        if (res['records'] && res['records'].length > 0) result = res['records']
+      }else{
+        result = await defHttp.get({ url: '/safety/ventanalyManageSystem/linkdevicelist', params: { sysId: props.sysId, deviceType: props.deviceType } })
+      }
     }else {
       result = await defHttp.get({ url: '/safety/ventanalyManageSystem/linkdevicelist', params: { sysId: props.sysId, deviceType: props.deviceType.startsWith('vehicle') ? 'location_normal' : props.deviceType } })
     }

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

@@ -68,40 +68,21 @@
               :isShowPagination="true"
             >
               <template #filterCell="{ column, record }">
-                <template v-if="record.frontGateOpenCtrl == 1 || record.frontGateOpenCtrl === true">
-                  <a-tag v-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == 0 && record.frontGateClose == 0" color="red"
-                    >正在打开</a-tag
-                  >
-                  <a-tag v-else-if="column.dataIndex === 'frontGateOpen'" color="processing">打开</a-tag>
-                </template>
-                <template v-else-if="record.frontGateOpenCtrl == 0 || record.frontGateOpenCtrl === false">
-                  <a-tag v-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == 0 && record.frontGateClose == 0" color="red"
-                    >正在关闭</a-tag
-                  >
-                  <a-tag v-else-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == 0 && record.frontGateClose == 1" color="default"
-                    >关闭</a-tag
-                  >
-                  <a-tag v-else-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == 1 && record.frontGateClose == 0" color="default"
-                    >打开</a-tag
-                  >
-                </template>
-                <template v-if="record.rearGateOpenCtrl == 1 || record.rearGateOpenCtrl === true">
-                  <a-tag v-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == 0 && record.rearGateClose == 0" color="red"
-                    >正在打开</a-tag
-                  >
-                  <a-tag v-else-if="column.dataIndex === 'rearGateOpen'" color="processing">打开</a-tag>
-                </template>
-                <template v-else-if="record.rearGateOpenCtrl == 0 || record.rearGateOpenCtrl === false">
-                  <a-tag v-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == 0 && record.rearGateClose == 0" color="red"
-                    >正在关闭</a-tag
-                  >
-                  <a-tag v-else-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == 0 && record.rearGateClose == 1" color="default"
-                    >关闭</a-tag
-                  >
-                  <a-tag v-else-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == 1 && record.rearGateClose == 0" color="default"
-                    >打开</a-tag
-                  >
-                </template>
+                <a-tag v-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == 0 && record.frontGateClose == 0" color="red"
+                  >正在运行</a-tag
+                >
+                <a-tag v-else-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == 0 && record.frontGateClose == 1" color="default"
+                  >关闭</a-tag
+                >
+                <a-tag v-else-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == 1 && record.frontGateClose == 0" color="#46C66F"
+                  >打开</a-tag
+                >
+                <a-tag v-else-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == 0 && record.rearGateClose == 1" color="default"
+                  >关闭</a-tag
+                >
+                <a-tag v-else-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == 1 && record.rearGateClose == 0" color="default"
+                  >打开</a-tag
+                >
                 <template v-if="column.dataIndex === 'ndoortype'">
                   <span v-if="record.ndoortype == 0">气动风门</span>
                   <span v-else color="default">液压风门</span>
@@ -560,96 +541,59 @@
   let rearDeviceState = 0; //记录设备状态，为了与下一次监测数据做比较
   function monitorAnimation(selectData) {
     const timeScale = 0.003;
-    if (selectData.frontGateOpenCtrl == 1 || selectData.frontGateOpenCtrl === true) {
-      isFrontCloseRunning = false;
-      if (selectData.frontGateOpen == 0 && selectData.frontGateClose == 0) {
-        //打开前门1
-
-        if (!isFrontOpenRunning) {
-          frontDoorIsOpen.value = true;
-          backDoorIsOpen.value = true;
-          isFrontOpenRunning = true;
-          play(1, timeScale);
-          frontDeviceState = 1;
-        }
-      }
-      if (selectData.frontGateOpen == 1 && selectData.frontGateClose == 0) {
-        isFrontOpenRunning = false;
-        if (frontDeviceState != 1) {
-          import.meta.env.VITE_GLOB_IS_SIMULATE ? play(1, timeScale) : play(1);
-          frontDeviceState = 1;
-          frontDoorIsOpen.value = false;
-          backDoorIsOpen.value = true;
-        }
+
+    // if (selectData.frontGateOpen == 0 && selectData.frontGateClose == 0) {
+    //   //正在运行
+    //   // if (!isFrontOpenRunning) {
+    //   //   frontDoorIsOpen.value = true;
+    //   //   backDoorIsOpen.value = true;
+    //   //   isFrontOpenRunning = true;
+    //   //   play(1, timeScale);
+    //   //   frontDeviceState = 1;
+    //   // }
+    // }
+
+    if (selectData.frontGateOpen == 1 && selectData.frontGateClose == 0) {
+      isFrontOpenRunning = false;
+      if (frontDeviceState != 1) {
+        // import.meta.env.VITE_GLOB_IS_SIMULATE ? play(1, timeScale) : play(1);
+        play(1, timeScale);
+        frontDeviceState = 1;
+        frontDoorIsOpen.value = false;
+        backDoorIsOpen.value = true;
       }
-    } else {
-      if (selectData.frontGateOpen == 0 && selectData.frontGateClose == 0) {
-        //关闭前门
-        isFrontOpenRunning = false;
-        if (!isFrontCloseRunning) {
-          isFrontCloseRunning = true;
-          play(2, timeScale);
-          frontDeviceState = 2;
-          frontDoorIsOpen.value = true;
-          backDoorIsOpen.value = true;
-        }
+    }
+    if (selectData.frontGateClose == 1 && selectData.frontGateOpen == 0) {
+      isFrontCloseRunning = false;
+      if (frontDeviceState == 1) {
+        // import.meta.env.VITE_GLOB_IS_SIMULATE ? play(2, timeScale) : play(2);
+        play(2, timeScale);
+        frontDeviceState = 2;
+        frontDoorIsOpen.value = false;
+        // backDoorIsOpen.value = false
       }
-      if (selectData.frontGateClose == 1 && selectData.frontGateOpen == 0) {
-        isFrontCloseRunning = false;
-        if (frontDeviceState == 1) {
-          import.meta.env.VITE_GLOB_IS_SIMULATE ? play(2, timeScale) : play(2);
-          frontDeviceState = 2;
-          frontDoorIsOpen.value = false;
-          // backDoorIsOpen.value = false
-        }
+    }
+    if (selectData.rearGateOpen == 1 && selectData.rearGateClose == 0) {
+      isRearOpenRunning = false;
+
+      if (rearDeviceState != 3) {
+        rearDeviceState = 3;
+        // import.meta.env.VITE_GLOB_IS_SIMULATE ? play(3, timeScale) : play(3);
+        play(3, timeScale);
+        backDoorIsOpen.value = false;
+        frontDoorIsOpen.value = true;
       }
     }
 
-    if (selectData.rearGateOpenCtrl == 1 || selectData.rearGateOpenCtrl === true) {
+    if (selectData.rearGateClose == 1 && selectData.rearGateOpen == 0) {
       isRearCloseRunning = false;
-      if (selectData.rearGateOpen == 0 && selectData.rearGateClose == 0) {
-        //打开后门
-        if (!isRearOpenRunning) {
-          isRearOpenRunning = true;
-          play(3, timeScale);
-          rearDeviceState = 3;
-          frontDoorIsOpen.value = true;
-          backDoorIsOpen.value = true;
-        }
-      }
-      if (selectData.rearGateOpen == 1 && selectData.rearGateClose == 0) {
-        isRearOpenRunning = false;
-
-        if (rearDeviceState != 3) {
-          rearDeviceState = 3;
-          import.meta.env.VITE_GLOB_IS_SIMULATE ? play(3, timeScale) : play(3);
-          backDoorIsOpen.value = false;
-          frontDoorIsOpen.value = true;
-        }
-      }
-    } else {
-      if (selectData.rearGateOpen == 0 && selectData.rearGateClose == 0) {
-        //关闭后门
-        isRearOpenRunning = false;
-        if (!isRearCloseRunning) {
-          isRearCloseRunning = true;
-          play(4, timeScale);
-          rearDeviceState = 4;
-          frontDoorIsOpen.value = true;
-          backDoorIsOpen.value = true;
-        }
-      }
-      if (selectData.rearGateClose == 1 && selectData.rearGateOpen == 0) {
-        isRearCloseRunning = false;
-        if (rearDeviceState == 3) {
-          rearDeviceState = 4;
-          import.meta.env.VITE_GLOB_IS_SIMULATE ? play(4, timeScale) : play(4);
-          backDoorIsOpen.value = false;
-        }
+      if (rearDeviceState == 3) {
+        rearDeviceState = 4;
+        // import.meta.env.VITE_GLOB_IS_SIMULATE ? play(4, timeScale) : play(4);
+        play(4, timeScale);
+        backDoorIsOpen.value = false;
       }
     }
-
-    // console.log('frontGateOpen:', selectData.frontGateOpen, '  frontGateClose:', selectData.frontGateClose, ' rearGateOpen:', selectData.rearGateOpen, '  rearGateClose:', selectData.rearGateClose, '  frontGateOpenCtrl:', selectData.frontGateOpenCtrl, '  rearGateOpenCtrl:', selectData.rearGateOpenCtrl)
   }
 
   function handleCancel() {