1. 解决设备历史记录首次查询不到数据的bug

2. 给布尔台注氮、瓦斯泵增加动画

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

@@ -1,6 +1,6 @@
 <template>
   <div class="history-table" v-if="loading">
-    <BasicTable ref="historyTable" @register="registerTable" >
+    <BasicTable ref="historyTable" @register="registerTable">
       <template #bodyCell="{ column, record }">
         <slot name="filterCell" v-bind="{ column, record }"></slot>
       </template>
@@ -24,25 +24,25 @@
   import { onMounted } from 'vue';
 
   const globalConfig = inject('globalConfig');
-  
+
   const historyTable = ref();
-  const dataSource = ref([])
-  const loading = ref(false)
+  const loading = ref(false);
   const list = (params) => {
-    if(globalConfig.History_Type == 'vent') {
+    if (globalConfig.History_Type == 'vent') {
+      debugger;
       // return defHttp.get({ url: '/safety/ventanalyMonitorData/list', params })
-      return defHttp.get({ url: '/safety/ventanalyMonitorData/listdays', params })
+      return defHttp.get({ url: '/safety/ventanalyMonitorData/listdays', params });
     } else {
-      return defHttp.post({ url: '/ventanaly-device/history/getHistoryData', params })
+      return defHttp.post({ url: '/ventanaly-device/history/getHistoryData', params });
     }
   };
   const getExportXlsUrl = () => {
-    if(globalConfig.History_Type == 'vent') {
-      return '/safety/ventanalyMonitorData/exportXls'
+    if (globalConfig.History_Type == 'vent') {
+      return '/safety/ventanalyMonitorData/exportXls';
     } else {
-      return '/ventanaly-device/history/getHistoryData/exportXls'
+      return '/ventanaly-device/history/getHistoryData/exportXls';
     }
-  }
+  };
   const emit = defineEmits(['change']);
   const props = defineProps({
     columnsType: {
@@ -73,442 +73,458 @@
     },
     scroll: {
       type: Object,
-      default: { y: 0 }
+      default: { y: 0 },
     },
     formSchemas: {
       type: Array<FormSchema>,
-      default: () => []
-    }
+      default: () => [],
+    },
   });
-  const historyType = ref('')
-  const columns = ref([])
-  const tableScroll = props.scroll.y ? ref({ y: props.scroll.y - 100 }) : ref({})
-  let deviceOptions = ref([])
-  let deviceList = <any[]>[]
-  const deviceTypeStr = ref('')
+  const historyType = ref('');
+  const columns = ref([]);
+  const tableScroll = props.scroll.y ? ref({ y: props.scroll.y - 100 }) : ref({});
+  let deviceOptions = ref([]);
+  const deviceTypeStr = ref('');
 
   watch(
     () => {
       return props.columnsType;
     },
-    async(newVal) => {
-      if (!newVal) return
-      if(historyTable.value) getForm().resetFields()
-      await getDeviceList()
-      const column = getTableHeaderColumns(newVal.includes('_history') ? newVal : newVal + '_history')
+    async (newVal) => {
+      if (!newVal) return;
+      if (historyTable.value) getForm().resetFields();
+      await getDeviceList();
+      const column = getTableHeaderColumns(newVal.includes('_history') ? newVal : newVal + '_history');
       if (column && column.length < 1) {
-        const arr = newVal.split('_')
-        console.log('历史记录列表表头------------>', arr[0] + '_monitor')
+        const arr = newVal.split('_');
+        console.log('历史记录列表表头------------>', arr[0] + '_monitor');
         columns.value = getTableHeaderColumns(arr[0] + '_history');
       } else {
-        columns.value = column
+        columns.value = column;
       }
-      if(historyTable.value) reload()
+      if (historyTable.value) reload();
     },
     {
-      immediate: true
+      immediate: true,
     }
   );
 
   watch(historyType, (type) => {
-    if (!type) return
+    if (!type) return;
     // if (historyTable.value) getForm().resetFields()
-    const column = getTableHeaderColumns(type.includes('_history') ? type : type + '_history')
+    const column = getTableHeaderColumns(type.includes('_history') ? type : type + '_history');
     if (column && column.length < 1) {
-      const arr = type.split('_')
+      const arr = type.split('_');
       columns.value = getTableHeaderColumns(arr[0] + '_history');
     } else {
-      columns.value = column
+      columns.value = column;
     }
-    setColumns(columns.value)
-  })
+    setColumns(columns.value);
+  });
 
-  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 = {};
+      }
     }
-  })
+  );
 
   async function getDeviceList() {
-    if( props.deviceType.split('_')[1] && props.deviceType.split('_')[1] === 'history') return
+    if (props.deviceType.split('_')[1] && props.deviceType.split('_')[1] === 'history') return;
     let result;
-    if(globalConfig.History_Type == 'vent'){
-      if(props.deviceListApi && !props.sysId){
-        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, pageSize: 9999 } })
+    if (globalConfig.History_Type == 'vent') {
+      if (props.deviceListApi && !props.sysId) {
+        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, pageSize: 9999 },
+        });
       }
-    }else {
-      result = await defHttp.get({ url: '/safety/ventanalyManageSystem/linkdevicelist', params: { sysId: props.sysId, deviceType: props.deviceType.startsWith('vehicle') ? 'location_normal' : props.deviceType } })
+    } else {
+      result = await defHttp.get({
+        url: '/safety/ventanalyManageSystem/linkdevicelist',
+        params: { sysId: props.sysId, deviceType: props.deviceType.startsWith('vehicle') ? 'location_normal' : props.deviceType },
+      });
     }
-    if(result){
-      deviceOptions.value = []
+    if (result) {
+      deviceOptions.value = [];
       deviceOptions.value = result.map((item) => {
-        return {label: item['strinstallpos'], value: item['id'], strtype: item['strtype'], strinstallpos: item['strinstallpos'],  devicekind: item['devicekind'] }
+        return {
+          label: item['strinstallpos'],
+          value: item['id'],
+          strtype: item['strtype'],
+          strinstallpos: item['strinstallpos'],
+          devicekind: item['devicekind'],
+        };
         // return { label: item['strname'], value: item['id']}
-      })
+      });
     }
-    (globalConfig.History_Type == 'vent' && deviceOptions.value[0]) ? getForm().setFieldsValue({gdeviceid: deviceOptions.value[0] ? deviceOptions.value[0]['value'] : ''}):getForm().setFieldsValue({deviceId: deviceOptions.value[0] ? deviceOptions.value[0]['value'] : ''})
+    globalConfig.History_Type == 'vent' && deviceOptions.value[0]
+      ? getForm().setFieldsValue({ gdeviceid: deviceOptions.value[0] ? deviceOptions.value[0]['value'] : '' })
+      : getForm().setFieldsValue({ deviceId: deviceOptions.value[0] ? deviceOptions.value[0]['value'] : '' });
   }
-  
-  
-  loading.value = true
+
+  loading.value = true;
   // 列表页面公共参数、方法
   const { tableContext, onExportXls } = useListPage(
-    globalConfig.History_Type == 'vent' ? {
-      tableProps: {
-        api: list,
-        columns: props.columnsType ? columns : (props.columns as any[]),
-        canResize: true,
-        showTableSetting: false,
-        showActionColumn: false,
-        bordered: false,
-        size: 'small',
-        scroll: tableScroll,
-        showIndexColumn: true,
-        formConfig: {
-          labelAlign: 'left',
-          showAdvancedButton: false,
-          baseColProps: {
-            // offset: 0.5,
-            xs: 24,
-            sm: 24,
-            md: 24,
-            lg: 9,
-            xl: 7,
-            xxl: 4,
-          },
-          schemas: props.formSchemas.length > 0 ? props.formSchemas : [
-            // {
-            //   label: '查询日期',
-            //   field: 'tData',
-            //   component: 'DatePicker',
-            //   defaultValue: dayjs(),
-            //   colProps: {
-            //     span: 4,
-            //   },
-            //   componentProps: {
-            //     valueFormat: 'YYYY-MM-DD',
-            //   },
-            // },
-            {
-            field: 'ttime_begin',
-            label: '开始时间',
-            component: 'DatePicker',
-            defaultValue: dayjs().startOf('date'),
-            required: true,
-            componentProps: {
-              showTime: true,
-              valueFormat: 'YYYY-MM-DD HH:mm:ss',
-              getPopupContainer: getAutoScrollContainer,
-            },
-            colProps: {
-              span: 4,
-            },
-          },
-          {
-            field: 'ttime_end',
-            label: '结束时间',
-            component: 'DatePicker',
-            defaultValue: dayjs(),
-            required: true,
-            componentProps: {
-              showTime: true,
-              valueFormat: 'YYYY-MM-DD HH:mm:ss',
-              getPopupContainer: getAutoScrollContainer,
-            },
-            colProps: {
-              span: 4,
-            },
-          },
-            // {
-            //   label: '时间区间',
-            //   field: 'tickectDate',
-            //   component: 'TimeRangePicker',
-            //   defaultValue: [dayjs().startOf('date').format('HH:mm:ss'), dayjs().format('HH:mm:ss')],
-            //   componentProps: {
-            //     placement: 'topLeft',
-            //     placeholder: ['开始时间', '结束时间'],
-            //     valueFormat: 'HH:mm:ss',
-            //   },
-            //   colProps: {
-            //     span: 4,
-            //   },
-            // },
-            {
-              label: '查询设备',
-              field: 'gdeviceid',
-              component: 'Select',
-              defaultValue: deviceOptions.value[0] ?  deviceOptions.value[0]['value'] : '',
-              required: true,
-              componentProps: {
-                options: deviceOptions,
-                onChange: (e, option) => {
-                  if (option && (option['strinstallpos'] || option['strtype'] || option['devicekind'])) historyType.value = option['strtype'] || option['devicekind']
-                  if(option['strtype']) deviceTypeStr.value = option['strtype']
-                },
-              },
-              colProps: {
-                span: 4,
-              },
-            },
-            {
-              label: '间隔时间',
-              field: 'skip',
-              component: 'Select',
-              defaultValue: 5,
-              componentProps: {
-                options: [
-                  {
-                    label: '5秒',
-                    value: '1',
-                  },
-                  {
-                    label: '10秒',
-                    value: '2',
-                  },
-                  {
-                    label: '30秒',
-                    value: '3',
-                  },
-                  {
-                    label: '1分钟',
-                    value: '4',
-                  },
-                  {
-                    label: '5分钟',
-                    value: '5',
-                  },
-                  {
-                    label: '10分钟',
-                    value: '6',
-                  },
-                  {
-                    label: '30分钟',
-                    value: '7',
-                  },
-                  {
-                    label: '1小时',
-                    value: '8',
-                  },
-                ],
-              },
-              colProps: {
-                span: 4,
+    globalConfig.History_Type == 'vent'
+      ? {
+          tableProps: {
+            api: list,
+            columns: props.columnsType ? columns : (props.columns as any[]),
+            canResize: true,
+            showTableSetting: false,
+            showActionColumn: false,
+            bordered: false,
+            size: 'small',
+            scroll: tableScroll,
+            showIndexColumn: true,
+            formConfig: {
+              labelAlign: 'left',
+              showAdvancedButton: false,
+              baseColProps: {
+                // offset: 0.5,
+                xs: 24,
+                sm: 24,
+                md: 24,
+                lg: 9,
+                xl: 7,
+                xxl: 4,
               },
+              schemas:
+                props.formSchemas.length > 0
+                  ? props.formSchemas
+                  : [
+                      {
+                        field: 'ttime_begin',
+                        label: '开始时间',
+                        component: 'DatePicker',
+                        defaultValue: dayjs().startOf('date'),
+                        required: true,
+                        componentProps: {
+                          showTime: true,
+                          valueFormat: 'YYYY-MM-DD HH:mm:ss',
+                          getPopupContainer: getAutoScrollContainer,
+                        },
+                        colProps: {
+                          span: 4,
+                        },
+                      },
+                      {
+                        field: 'ttime_end',
+                        label: '结束时间',
+                        component: 'DatePicker',
+                        defaultValue: dayjs(),
+                        required: true,
+                        componentProps: {
+                          showTime: true,
+                          valueFormat: 'YYYY-MM-DD HH:mm:ss',
+                          getPopupContainer: getAutoScrollContainer,
+                        },
+                        colProps: {
+                          span: 4,
+                        },
+                      },
+                      // {
+                      //   label: '时间区间',
+                      //   field: 'tickectDate',
+                      //   component: 'TimeRangePicker',
+                      //   defaultValue: [dayjs().startOf('date').format('HH:mm:ss'), dayjs().format('HH:mm:ss')],
+                      //   componentProps: {
+                      //     placement: 'topLeft',
+                      //     placeholder: ['开始时间', '结束时间'],
+                      //     valueFormat: 'HH:mm:ss',
+                      //   },
+                      //   colProps: {
+                      //     span: 4,
+                      //   },
+                      // },
+                      {
+                        label: '查询设备',
+                        field: 'gdeviceid',
+                        component: 'Select',
+                        defaultValue: deviceOptions.value[0] ? deviceOptions.value[0]['value'] : '',
+                        required: true,
+                        componentProps: {
+                          options: deviceOptions,
+                          onChange: (e, option) => {
+                            if (option && (option['strinstallpos'] || option['strtype'] || option['devicekind']))
+                              historyType.value = option['strtype'] || option['devicekind'];
+                            if (option['strtype']) deviceTypeStr.value = option['strtype'];
+                          },
+                        },
+                        colProps: {
+                          span: 4,
+                        },
+                      },
+                      {
+                        label: '间隔时间',
+                        field: 'skip',
+                        component: 'Select',
+                        defaultValue: 5,
+                        componentProps: {
+                          options: [
+                            {
+                              label: '5秒',
+                              value: '1',
+                            },
+                            {
+                              label: '10秒',
+                              value: '2',
+                            },
+                            {
+                              label: '30秒',
+                              value: '3',
+                            },
+                            {
+                              label: '1分钟',
+                              value: '4',
+                            },
+                            {
+                              label: '5分钟',
+                              value: '5',
+                            },
+                            {
+                              label: '10分钟',
+                              value: '6',
+                            },
+                            {
+                              label: '30分钟',
+                              value: '7',
+                            },
+                            {
+                              label: '1小时',
+                              value: '8',
+                            },
+                          ],
+                        },
+                        colProps: {
+                          span: 4,
+                        },
+                      },
+                    ],
+              // fieldMapToTime: [['tickectDate', ['ttime_begin', 'ttime_end'], '']],
             },
-          ],
-          // fieldMapToTime: [['tickectDate', ['ttime_begin', 'ttime_end'], '']],
-        },
-        fetchSetting: {
-          listField:  'datalist',
-          totalField: 'datalist.total',
-        },
-        pagination: {
-          current: 1,
-          pageSize: 10,
-          pageSizeOptions: ['10', '30', '50', '100'],
-          showQuickJumper: false
-        },
-        beforeFetch(params) {
-          params.strtype = deviceTypeStr.value ? deviceTypeStr.value : props.deviceType + '*';
-          if(props.sysId){
-            params.sysId = props.sysId;
-          }
-        },
-        afterFetch(result) {
-          const resultItems = result['records']
-          resultItems.map((item) => {
-            Object.assign(item, item['readData']);
-          });
-          console.log('result---------------->', result)
-          return resultItems;
-        },
-      },
-      exportConfig: {
-        name: '历史列表',
-        url: getExportXlsUrl(),
-      },
-    }: {
-      tableProps: {
-      api: list,
-      columns: props.columnsType ? columns : (props.columns as any[]),
-      canResize: true,
-      showTableSetting: false,
-      showActionColumn: false,
-      bordered: false,
-      size: 'small',
-      scroll: tableScroll,
-      showIndexColumn: true,
-      formConfig: {
-        labelAlign: 'left',
-        showAdvancedButton: false,
-        // autoAdvancedCol: 2,
-
-        baseColProps: {
-          // offset: 0.5,
-          xs: 24,
-          sm: 24,
-          md: 24,
-          lg: 9,
-          xl: 7,
-          xxl: 4,
-        },
-        schemas: props.formSchemas.length > 0 ? props.formSchemas : [
-          {
-            field: 'startTime',
-            label: '开始时间',
-            component: 'DatePicker',
-            defaultValue: dayjs().startOf('date'),
-            required: true,
-            componentProps: {
-              showTime: true,
-              valueFormat: 'YYYY-MM-DD HH:mm:ss',
-              getPopupContainer: getAutoScrollContainer,
+            fetchSetting: {
+              listField: 'datalist',
+              totalField: 'datalist.total',
             },
-            colProps: {
-              span: 4,
+            pagination: {
+              current: 1,
+              pageSize: 10,
+              pageSizeOptions: ['10', '30', '50', '100'],
+              showQuickJumper: false,
             },
-          },
-          {
-            field: 'endTime',
-            label: '结束时间',
-            component: 'DatePicker',
-            defaultValue: dayjs(),
-            required: true,
-            componentProps: {
-              showTime: true,
-              valueFormat: 'YYYY-MM-DD HH:mm:ss',
-              getPopupContainer: getAutoScrollContainer,
+            beforeFetch(params) {
+              params.strtype = deviceTypeStr.value
+                ? deviceTypeStr.value
+                : deviceOptions.value[0]['strtype']
+                ? deviceOptions.value[0]['strtype']
+                : props.deviceType + '*';
+              if (props.sysId) {
+                params.sysId = props.sysId;
+              }
+              return params;
             },
-            colProps: {
-              span: 4,
+            afterFetch(result) {
+              const resultItems = result['records'];
+              resultItems.map((item) => {
+                Object.assign(item, item['readData']);
+              });
+              console.log('result---------------->', result);
+              return resultItems;
             },
           },
-          {
-            label: '查询设备',
-            field: 'deviceId',
-            component: 'Select',
-            defaultValue: deviceOptions.value[0] ? deviceOptions.value[0]['value'] : '',
-            required: true,
-            componentProps: {
-              options: deviceOptions,
-              // api: () => defHttp.get({ url: '/safety/ventanalyManageSystem/linkdevicelist', params: { sysId: props.sysId, deviceType: props.deviceType.startsWith('vehicle') ? 'location_normal' : props.deviceType } }),
-              // // resultField: 'result',
-              // labelField: 'strinstallpos',
-              // valueField: 'id',
-              // numberToString: true,
-              onChange: (e, option) => {
-                if (option && (option['strinstallpos'] || option['strtype'] || option['devicekind'])) historyType.value = option['strtype'] || option['devicekind']
+          exportConfig: {
+            name: '历史列表',
+            url: getExportXlsUrl(),
+          },
+        }
+      : {
+          tableProps: {
+            api: list,
+            columns: props.columnsType ? columns : (props.columns as any[]),
+            canResize: true,
+            showTableSetting: false,
+            showActionColumn: false,
+            bordered: false,
+            size: 'small',
+            scroll: tableScroll,
+            showIndexColumn: true,
+            formConfig: {
+              labelAlign: 'left',
+              showAdvancedButton: false,
+              // autoAdvancedCol: 2,
+
+              baseColProps: {
+                // offset: 0.5,
+                xs: 24,
+                sm: 24,
+                md: 24,
+                lg: 9,
+                xl: 7,
+                xxl: 4,
               },
+              schemas:
+                props.formSchemas.length > 0
+                  ? props.formSchemas
+                  : [
+                      {
+                        field: 'startTime',
+                        label: '开始时间',
+                        component: 'DatePicker',
+                        defaultValue: dayjs().startOf('date'),
+                        required: true,
+                        componentProps: {
+                          showTime: true,
+                          valueFormat: 'YYYY-MM-DD HH:mm:ss',
+                          getPopupContainer: getAutoScrollContainer,
+                        },
+                        colProps: {
+                          span: 4,
+                        },
+                      },
+                      {
+                        field: 'endTime',
+                        label: '结束时间',
+                        component: 'DatePicker',
+                        defaultValue: dayjs(),
+                        required: true,
+                        componentProps: {
+                          showTime: true,
+                          valueFormat: 'YYYY-MM-DD HH:mm:ss',
+                          getPopupContainer: getAutoScrollContainer,
+                        },
+                        colProps: {
+                          span: 4,
+                        },
+                      },
+                      {
+                        label: '查询设备',
+                        field: 'deviceId',
+                        component: 'Select',
+                        defaultValue: deviceOptions.value[0] ? deviceOptions.value[0]['value'] : '',
+                        required: true,
+                        componentProps: {
+                          options: deviceOptions,
+                          // api: () => defHttp.get({ url: '/safety/ventanalyManageSystem/linkdevicelist', params: { sysId: props.sysId, deviceType: props.deviceType.startsWith('vehicle') ? 'location_normal' : props.deviceType } }),
+                          // // resultField: 'result',
+                          // labelField: 'strinstallpos',
+                          // valueField: 'id',
+                          // numberToString: true,
+                          onChange: (e, option) => {
+                            if (option && (option['strinstallpos'] || option['strtype'] || option['devicekind']))
+                              historyType.value = option['strtype'] || option['devicekind'];
+                          },
+                        },
+                        colProps: {
+                          span: 4,
+                        },
+                        // componentProps: ({ formModel }) => {
+                        //   return {
+                        //     options: deviceOptions.value,
+                        //     // api: () => defHttp.get({ url: '/safety/ventanalyManageSystem/linkdevicelist', params: { sysId: props.sysId, deviceType: props.deviceType.startsWith('vehicle') ? 'location_normal' : props.deviceType } }),
+                        //     // resultField: 'result',
+                        //     // labelField: 'strinstallpos',
+                        //     // valueField: 'id',
+                        //     // onChange: (e, option) => {
+                        //     //   if(option && (option['strtype'] || option['devicekind'])) historyType.value = option['strtype'] || option['devicekind']
+                        //     // },
+                        //   }
+                        // },
+                      },
+                      {
+                        label: '间隔时间',
+                        field: 'interval',
+                        component: 'Select',
+                        defaultValue: '30s',
+                        componentProps: {
+                          options: [
+                            {
+                              label: '1秒',
+                              value: '1s',
+                            },
+                            {
+                              label: '5秒',
+                              value: '5s',
+                            },
+                            {
+                              label: '10秒',
+                              value: '10s',
+                            },
+                            {
+                              label: '30秒',
+                              value: '30s',
+                            },
+                            {
+                              label: '1分钟',
+                              value: '1m',
+                            },
+                            {
+                              label: '10分钟',
+                              value: '10m',
+                            },
+                            {
+                              label: '30分钟',
+                              value: '30m',
+                            },
+                            {
+                              label: '1小时',
+                              value: '1h',
+                            },
+                          ],
+                        },
+                        colProps: {
+                          span: 4,
+                        },
+                      },
+                    ],
             },
-            colProps: {
-              span: 4,
+            pagination: {
+              current: 1,
+              pageSize: 10,
+              pageSizeOptions: ['10', '30', '50', '100'],
+              showQuickJumper: false,
             },
-            // componentProps: ({ formModel }) => {
-            //   return {
-            //     options: deviceOptions.value,
-            //     // api: () => defHttp.get({ url: '/safety/ventanalyManageSystem/linkdevicelist', params: { sysId: props.sysId, deviceType: props.deviceType.startsWith('vehicle') ? 'location_normal' : props.deviceType } }),
-            //     // resultField: 'result',
-            //     // labelField: 'strinstallpos',
-            //     // valueField: 'id',
-            //     // onChange: (e, option) => {
-            //     //   if(option && (option['strtype'] || option['devicekind'])) historyType.value = option['strtype'] || option['devicekind']
-            //     // },
-            //   }
-            // },
-          },
-          {
-            label: '间隔时间',
-            field: 'interval',
-            component: 'Select',
-            defaultValue: '30s',
-            componentProps: {
-              options: [
-                {
-                  label: '1秒',
-                  value: '1s',
-                },
-                {
-                  label: '5秒',
-                  value: '5s',
-                },
-                {
-                  label: '10秒',
-                  value: '10s',
-                },
-                {
-                  label: '30秒',
-                  value: '30s',
-                },
-                {
-                  label: '1分钟',
-                  value: '1m',
-                },
-                {
-                  label: '10分钟',
-                  value: '10m',
-                },
-                {
-                  label: '30分钟',
-                  value: '30m',
-                },
-                {
-                  label: '1小时',
-                  value: '1h',
-                },
-              ],
+            // pagination: false,
+            fetchSetting: {
+              totalField: 'total',
+              // 每页显示多少条
+              sizeField: 'pageSize',
+              // 请求结果列表字段  支持 a.b.c
+              pageField: 'pageNo',
+            },
+            beforeFetch(params) {
+              params.strtype = props.deviceType + '*';
+              if (props.sysId) {
+                params.sysId = props.sysId;
+              }
+              if (params.interval) {
+                params.interval = params.interval;
+              } else {
+                params.interval = '1m';
+              }
+              if (props.deviceType.startsWith('vehicle')) {
+                params['isEmployee'] = false;
+              } else if (props.deviceType.startsWith('location')) {
+                params['isEmployee'] = true;
+              }
             },
-            colProps: {
-              span: 4,
+            afterFetch(result) {
+              return result;
             },
           },
-        ],
-      },
-      pagination: {
-        current: 1,
-        pageSize: 10,
-        pageSizeOptions: ['10', '30', '50', '100'],
-        showQuickJumper: false
-      },
-      // pagination: false,
-      fetchSetting: {
-        totalField: 'total',
-         // 每页显示多少条
-        sizeField: 'pageSize',
-        // 请求结果列表字段  支持 a.b.c
-        pageField: 'pageNo'
-      },
-      beforeFetch(params) {
-        params.strtype = props.deviceType + '*';
-        if (props.sysId) {
-          params.sysId = props.sysId;
-        }
-        if(params.interval){
-          params.interval = params.interval
-        }else{
-          params.interval = '1m'
-        }
-        if (props.deviceType.startsWith('vehicle')) {
-          params['isEmployee'] = false
-        } else if (props.deviceType.startsWith('location')) {
-          params['isEmployee'] = true
+          exportConfig: {
+            name: '历史列表',
+            url: getExportXlsUrl(),
+          },
         }
-      },
-      afterFetch(result) {
-        return result;
-      },
-      
-      },
-      exportConfig: {
-        name: '历史列表',
-        url: getExportXlsUrl(),
-      },
-    },
-    
   );
 
   //注册table数据
@@ -521,23 +537,24 @@
       console.log('[ data ] >', data);
     }
   });
-  onMounted(async() => {
-    if (!props.columnsType) {
-      await getDeviceList()
-      if(deviceOptions.value[0]) historyType.value = deviceOptions.value[0]['strtype'] || deviceOptions.value[0]['devicekind']
+  onMounted(async () => {
+    await getDeviceList();
+    debugger;
+    if (deviceOptions.value[0]) {
+      historyType.value = deviceOptions.value[0]['strtype'] || deviceOptions.value[0]['devicekind'];
     }
-  })
-  defineExpose({ setLoading })
+  });
+  defineExpose({ setLoading });
 </script>
 
 <style scoped lang="less">
   @import '/@/design/vent/color.less';
-  
+
   :deep(.@{ventSpace}-table-body) {
     height: auto !important;
   }
-  :deep(.zxm-picker){
-      height: 30px !important;
+  :deep(.zxm-picker) {
+    height: 30px !important;
   }
   .history-table {
     width: 100%;
@@ -566,17 +583,17 @@
         min-height: 0 !important;
       }
     }
-    .pagination-box{
+    .pagination-box {
       display: flex;
       justify-content: flex-end;
       align-items: center;
-      .page-num{
-        border: 1px solid #0090D8;
+      .page-num {
+        border: 1px solid #0090d8;
         padding: 4px 8px;
         margin-right: 5px;
-        color: #0090D8;
+        color: #0090d8;
       }
-      .btn{
+      .btn {
         margin-right: 10px;
       }
     }

src/views/vent/monitorManager/compressor/components/nitrogenHome_bet.vue

@@ -177,6 +177,7 @@
             </template>
           </ventBox1>
         </div>
+        <div ref="playerRef" class="player-box"></div>
       </div>
     </div>
   </div>
@@ -196,6 +197,8 @@ import { deviceControlApi } from '/@/api/vent/index';
 import { groupParameterData, deviceParameterData, downWindData } from '../nitrogen.data'
 import { message } from 'ant-design-vue';
 import lodash from 'lodash';
+import { useCamera } from '/@/hooks/system/useCamera';
+
 const globalConfig = inject('globalConfig');
 
 const props = defineProps({
@@ -208,6 +211,7 @@ const props = defineProps({
     require: true,
   },
 });
+const playerRef = ref();
 const refresh = ref(false)
 const modalTitle = ref(''); // 模态框标题显示内容，根据设备操作类型决定
 const modalType = ref(''); // 模态框内容显示类型，设备操作类型
@@ -243,6 +247,7 @@ let airCompressorState = reactive<any[]>([]);
 
 const propTypeArr = ref([])
 const chartsColumns = ref([])
+
 watch(monitorDataGroupNum, () => {
 
   const arr = <any[]>[]
@@ -270,33 +275,20 @@ watch(monitorDataGroupNum, () => {
 
 })
 
-
-
 const monitorData = ref(
   new Array(3).fill({
     // strName: '空压机',
     // cumulativeFlow: '-',
     // centerTemperature: '-',
     // outletTemperature: '-',
-    // Ia: '-',
-    // Ib: '-',
-    // Ic: '-',
-    // Vab: '-',
-    // Vac: '-',
-    // Vbc: '-',
-    // compressGroupName: '',
-    // compressExhaustPressF1: '-',
-    // compressSeparatePressF1: '-',
-    // compressHostTempF1: '-',
-    // compressCrewTempF1: '-',
-    // compressRunTimeF1: '-',
-    // controlModel: 'LOC'
   })
 );
 
 //图表数据
 let echartData = ref<any>([]);
 
+const { getCamera, removeCamera } = useCamera();
+
 // https获取监测数据
 let timer: null | NodeJS.Timeout = null;
 async function getMonitor(flag?) {
@@ -417,6 +409,7 @@ function handleOK(passWord, handlerState) {
     }
   });
 }
+
 function handleCancel() {
   modalIsShow.value = false;
   modalTitle.value = '';
@@ -437,10 +430,12 @@ onMounted(async () => {
   await mountedThree().then(() => {
     loading.value = false;
   });
+  await getCamera(props.deviceId, playerRef.value);
 });
 
 onUnmounted(() => {
   destroy();
+  removeCamera()
   if (timer) {
     clearTimeout(timer);
     timer = undefined;
@@ -505,6 +500,7 @@ onUnmounted(() => {
       overflow: hidden;
       display: flex;
       justify-content: space-between;
+      position: relative;
       // margin-top: 40px;
       .lr-box {
         height: 100%;
@@ -691,7 +687,7 @@ onUnmounted(() => {
       }
 
       .right-box {
-        width: 330px;
+        width: 310px;
         margin-top: 50px;
 
         .control-group {
@@ -752,7 +748,19 @@ onUnmounted(() => {
         margin-top: 80px;
       }
     }
-
+    .player-box {
+      position: absolute;
+      height: 100%;
+      width: 100%;
+      padding: 0 20px 0 20px;
+      z-index: 9999;
+      display: flex;
+      align-items: end;
+      :deep(#LivePlayerBox) {
+        display: flex;
+        justify-content: end;
+      }
+    }
     &:deep(.win) {
       width: 100%;
       margin: 0 !important;

src/views/vent/monitorManager/compressor/components/nitrogenHome_dltj.vue

@@ -845,7 +845,6 @@
           }
         }
       }
-
       &:deep(.win) {
         width: 100%;
         margin: 0 !important;

src/views/vent/monitorManager/compressor/components/nitrogenHome_new.vue

@@ -1,867 +0,0 @@
-<template>
-  <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>
-          <!-- <div v-else class="signal-item">
-                        <div class="signal" v-for="(signal, childIndex) in preMonitor.child" :key="childIndex">
-                            <span class="monitor-title">{{ signal.title }}</span>
-                            <span style="display: inline-block; width: 30px; text-align: center"
-                                v-if="signal.isFault == -2">{{
-            monitorData[signal.code + groupNum] == '0' ? '就地' : monitorData[signal.code + groupNum]
-                == '1' ? '远程' : '-'
-        }}</span>
-                            <span style="display: inline-block; width: 30px; text-align: center"
-                                v-else-if="signal.isFault == -1">{{
-            monitorData[signal.code + groupNum] == '1' ? '加载' : monitorData[signal.code + groupNum]
-                == '0' ? '卸载' : '-'
-        }}</span>
-                            <span v-else :class="{
-                'signal-round': true,
-                'signal-round-run': !signal.isFault && monitorData[signal.code + groupNum] == '1',
-                'signal-round-warning': signal.isFault && monitorData[signal.code + groupNum] == '1',
-                'signal-round-gry': monitorData[signal.code + groupNum] != '1',
-            }"></span>
-                        </div>
-                    </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>
-            <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.new';
-  import { formatNum } from '/@/utils/ventutil';
-  import { useCamera } from '/@/hooks/system/useCamera';
-  import { message } from 'ant-design-vue';
-  import lodash from 'lodash';
-  // import ceshi from '../ceshi.json'
-  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.value = Object.assign(item['datalist'][0], item['datalist'][0]['readData']);
-          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]['operation_shutdown'];
-          statusZdj.value = monitorData[0]['remote_local'];
-          monitorDataGroupNum.value = monitorData.length - 1;
-          console.log(monitorData, ' monitorData--------');
-          // if (monitorData['netStatus'] == 1) {
-          //     netStatus = 1;
-          // }
-          airCompressorState.push({
-            id: monitorData[1]['deviceID'],
-            deviceType: 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) {
-    console.log(kzParam, 'kz----------');
-    // if (passWord !== '123456') {
-    //   message.warning('密码不正确，请重新输入');
-    //   return;
-    // }
-
-    let data = {};
-    if (kzParam.isFw == '制氮机启动' || kzParam.isFw == '空压机启动') {
-      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 {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: center;
-  }
-
-  #nitrogenCss3D {
-    .modal-monitor {
-      width: 200px;
-      position: absolute;
-      left: 0px;
-      top: 0px;
-    }
-
-    &:deep(.win) {
-      margin: 0 !important;
-      background: #00000044;
-    }
-  }
-
-  .nitrogen-home {
-    width: 100%;
-    height: 100%;
-    position: fixed;
-    z-index: 9999;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    pointer-events: none;
-    top: 20px;
-
-    .nitrogen-container {
-      width: 100%;
-      height: calc(100% - 100px);
-      display: flex;
-      justify-content: space-between;
-      margin-bottom: 100px;
-
-      .device-state {
-        width: 100%;
-        position: absolute;
-        top: 20px;
-        color: #e90000;
-        display: flex;
-        justify-content: center;
-        font-size: 20px;
-      }
-
-      .top-box {
-        width: 100%;
-        padding: 10px;
-        overflow: hidden;
-        display: flex;
-        justify-content: space-between;
-        // margin-top: 40px;
-
-        .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>

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

@@ -22,7 +22,6 @@ import { navList, getMonitorComponent } from './nitrogen.data'
 import { getTableList, systemList,  } from "./nitrogen.api";
 
 const nitrogenHome = getMonitorComponent()
-debugger;
 type DeviceType = { deviceType: string, deviceName: string, datalist: any[] };
 
 const { currentRoute } = useRouter();

src/views/vent/monitorManager/compressor/nitrogen.data.new.ts

@@ -1,159 +0,0 @@
-
-  
-  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',
-      },
-  
-  ];
-  

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

@@ -217,6 +217,9 @@ export function getMonitorComponent() {
     case 'sdmtjtbltmk': // 补连塔
       nitrogenHome = defineAsyncComponent(() => import('./components/nitrogenHome_blt.vue'));
       return nitrogenHome;
+    case 'lahgjtlnmy': // 潞宁
+      nitrogenHome = defineAsyncComponent(() => import('./components/nitrogenHome_ln.vue'));
+      return nitrogenHome;
     default:
       // nitrogenHome = defineAsyncComponent(() => import('./components/nitrogenHome_dltj.vue'));
       // nitrogenHome = defineAsyncComponent(() => import('./components/nitrogenHome_new.vue'));

src/views/vent/monitorManager/gasPumpMonitor/components/DetailModal.vue

@@ -12,13 +12,20 @@
         </div>
       </div>
       <div class="">
-         <a-divider class="divider">公共设备控制</a-divider>
+        <a-divider class="divider">公共设备控制</a-divider>
         <div>
           <div v-for="(pumpType, index) in publicPumpCtrlType" :key="index">
-            <div class="device-group"  v-for="key in 2" :key="key">
+            <div class="device-group" v-for="key in 2" :key="key">
               <div class="title">#{{ key }}{{ pumpType.title }}：</div>
               <div class="btn-group">
-                <a-button class="btn" v-for="(pump, i) in PumpCtrlItems" :key="i" type="primary" @click="handlerFn(`${pumpType.code}${key}${pump.code}`)">#{{ key }}{{ pumpType.title }}{{ pump.title }}</a-button>
+                <a-button
+                  class="btn"
+                  v-for="(pump, i) in PumpCtrlItems"
+                  :key="i"
+                  type="primary"
+                  @click="handlerFn(`${pumpType.code}${key}${pump.code}`)"
+                  >#{{ key }}{{ pumpType.title }}{{ pump.title }}</a-button
+                >
               </div>
             </div>
           </div>
@@ -26,23 +33,37 @@
       </div>
       <div class="">
         <a-divider class="divider">单动控制</a-divider>
-        <div class="parameter-title group-parameter-title"><SvgIcon class="icon" size="14" name="pulp-title"/><span>泵站控制</span></div>
+        <div class="parameter-title group-parameter-title"><SvgIcon class="icon" size="14" name="pulp-title" /><span>泵站控制</span></div>
         <div class="vent-margin-b-10">
           <div v-for="(pumpType, index) in pumpCtrlType" :key="index">
-            <div class="device-group"  v-for="key in 2" :key="key">
+            <div class="device-group" v-for="key in 2" :key="key">
               <div class="title">#{{ key }}{{ pumpType.title }}：</div>
               <div class="btn-group">
-                <a-button class="btn" v-for="(pump, i) in PumpCtrlItems" :key="i" type="primary" @click="handlerFn(`${pumpType.code}${key}${pump.code}`)">#{{ key }}{{ pumpType.title }}{{ pump.title }}</a-button>
+                <a-button
+                  class="btn"
+                  v-for="(pump, i) in PumpCtrlItems"
+                  :key="i"
+                  type="primary"
+                  @click="handlerFn(`${pumpType.code}${key}${pump.code}`)"
+                  >#{{ key }}{{ pumpType.title }}{{ pump.title }}</a-button
+                >
               </div>
             </div>
           </div>
         </div>
-        <div class="parameter-title group-parameter-title"><SvgIcon class="icon" size="14" name="pulp-title"/><span>阀门控制</span></div>
-        <div  v-for="key in 2" :key="key">
+        <div class="parameter-title group-parameter-title"><SvgIcon class="icon" size="14" name="pulp-title" /><span>阀门控制</span></div>
+        <div v-for="key in 2" :key="key">
           <div class="device-group" v-for="(valveType, index) in valveCtrlType" :key="index">
             <div class="title">#{{ key }}{{ valveType.title }}：</div>
             <div class="btn-group">
-              <a-button class="btn" v-for="(valve, i) in valveCtrl" :key="i" type="primary" @click="handlerFn(`CentrifugalPump${key}_${valveType.code}${valve.code}`)">#{{ key }}{{ valveType.title }}{{ valve.title }}</a-button>
+              <a-button
+                class="btn"
+                v-for="(valve, i) in valveCtrl"
+                :key="i"
+                type="primary"
+                @click="handlerFn(`CentrifugalPump${key}_${valveType.code}${valve.code}`)"
+                >#{{ key }}{{ valveType.title }}{{ valve.title }}</a-button
+              >
             </div>
           </div>
         </div>
@@ -51,86 +72,81 @@
   </BasicModal>
 </template>
 <script lang="ts" setup>
+  import { onMounted, ref, defineEmits, onUnmounted, inject } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { pumpCtrlType, valveCtrlType, valveCtrl, PumpCtrlItems, publicPumpCtrlType } from '../gasPump.data';
+  import { SvgIcon } from '/@/components/Icon';
+  import { message } from 'ant-design-vue';
+  import { ExclamationCircleFilled } from '@ant-design/icons-vue';
+  import { deviceControlApi } from '/@/api/vent/index';
+  const globalConfig = inject('globalConfig');
 
-import { onMounted, ref, defineEmits, onUnmounted, inject } from 'vue';
-import { BasicModal, useModalInner } from '/@/components/Modal';
-import { pumpCtrlType, valveCtrlType, valveCtrl, PumpCtrlItems, publicPumpCtrlType } from '../gasPump.data'
-import { SvgIcon } from '/@/components/Icon'
-import { message } from 'ant-design-vue';
-import { ExclamationCircleFilled } from '@ant-design/icons-vue';
-import { deviceControlApi } from '/@/api/vent/index';
-const globalConfig = inject('globalConfig');
-
-const emit = defineEmits(['close', 'register'])
-const props = defineProps({
-  deviceType: {
-    type: String,
-    required: true,
-  },
-  deviceId: {
-    type: String,
-    required: true,
-  }
-})
-
-const passWord = ref('')
-// 注册 modal
-const [register, { closeModal }] = useModalInner(() => {
-  passWord.value = ''
-});
-
-async function onSubmit() {
-  emit('close')
-  closeModal();
-}
+  const emit = defineEmits(['close', 'register']);
+  const props = defineProps({
+    deviceType: {
+      type: String,
+      required: true,
+    },
+    deviceId: {
+      type: String,
+      required: true,
+    },
+  });
 
-function handlerFn(paramcode) {
-  if (!passWord.value) {
-    message.warning('请先输入密码！！！');
-    return;
-  }
-  let value = null
-  const data = {
-    deviceid: props.deviceId,
-    devicetype: props.deviceType,
-    paramcode: paramcode,
-    password: passWord.value,
-    value: value,
-  };
-  deviceControlApi(data).then((res) => {
-    if (globalConfig.History_Type == 'remote') {
-      message.success('指令已下发至生产管控平台成功！')
-    } else {
-      message.success('指令已下发成功！')
-    }
-  }).catch((err) => {
-    // message.success('控制异常');
+  const passWord = ref('');
+  // 注册 modal
+  const [register, { closeModal }] = useModalInner(() => {
+    passWord.value = '';
   });
-}
 
-onMounted(async () => {
+  async function onSubmit() {
+    emit('close');
+    closeModal();
+  }
 
-});
-onUnmounted(() => {
+  function handlerFn(paramcode) {
+    if (!passWord.value) {
+      message.warning('请先输入密码！！！');
+      return;
+    }
+    let value = null;
+    const data = {
+      deviceid: props.deviceId,
+      devicetype: props.deviceType,
+      paramcode: paramcode,
+      password: passWord.value,
+      value: value,
+    };
+    deviceControlApi(data)
+      .then((res) => {
+        if (globalConfig.History_Type == 'remote') {
+          message.success('指令已下发至生产管控平台成功！');
+        } else {
+          message.success('指令已下发成功！');
+        }
+      })
+      .catch((err) => {
+        // message.success('控制异常');
+      });
+  }
 
-});
+  onMounted(async () => {});
+  onUnmounted(() => {});
 </script>
 <style scoped lang="less">
-
   @import '/@/design/vent/modal.less';
   @import '../../comment/less/workFace.less';
-   @ventSpace: zxm;
-  
-  
+  @ventSpace: zxm;
+
   .@{ventSpace}-input {
     width: 150px;
   }
-  .password-box{
-    .warning-text{
+  .password-box {
+    .warning-text {
       font-size: 24px;
       margin-left: 8px;
     }
-    .input-box{
+    .input-box {
       margin-top: 10px;
       margin-left: 40px;
       .label {
@@ -138,31 +154,30 @@ onUnmounted(() => {
         color: #73e8fe;
       }
     }
-    
   }
-  
-  .btn-group{
+
+  .btn-group {
     margin-bottom: 8px;
-    .btn-item{
+    .btn-item {
       width: calc(50% - 16px);
       margin: 0 4px;
     }
   }
-  .divider{
+  .divider {
     color: #fff;
     border-color: #73e8fe;
   }
-  .parameter-title{
+  .parameter-title {
     margin-bottom: 15px;
   }
-  .device-group{
+  .device-group {
     display: flex;
     align-items: center;
-    .title{
+    .title {
       width: 100px;
       color: #73e8fe;
     }
-    .btn{
+    .btn {
       margin: 0 5px;
     }
   }

src/views/vent/monitorManager/gasPumpMonitor/components/gasPumpHome.vue

@@ -198,6 +198,7 @@
       <LivePlayer id="fm-player1" style="height: 250px;" ref="player1" :videoUrl="flvURL1()" muted live loading controls />
     </div> -->
     </div>
+    <div ref="playerRef" class="player-box"></div>
   </div>
   <DetailModal @register="register" :device-type="deviceType" :device-id="deviceId" />
   <PasswordModal
@@ -234,6 +235,7 @@
   import PasswordModal from '../../comment/components/PasswordModal.vue';
   import { message } from 'ant-design-vue';
   import fourBorderBg from '/@/components/vent/fourBorderBg.vue';
+  import { useCamera } from '/@/hooks/system/useCamera';
 
   const globalConfig = inject('globalConfig');
 
@@ -252,7 +254,7 @@
   const tabActiveKey = ref(1);
   const passwordModalIsShow = ref(false);
   const handlerType = ref('');
-  // 默认初始是第一行
+  const playerRef = ref();
 
   // 监测数据
   const selectData = reactive({
@@ -277,29 +279,29 @@
     FlowSensor_InputFlux: '-',
   });
 
-  const flvURL1 = () => {
-    return `https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv`;
-    // return ''
-  };
+  const { getCamera, removeCamera } = useCamera();
 
   // https获取监测数据
   let timer: null | NodeJS.Timeout = null;
   function getMonitor(flag?) {
     if (Object.prototype.toString.call(timer) === '[object Null]') {
-      timer = setTimeout(
-        async () => {
-          if (props.deviceId) {
-            const data = await getDataSource(props.deviceId);
-            Object.assign(selectData, data);
-          }
-          if (timer) {
-            timer = null;
-          }
-          await getMonitor();
-          loading.value = false;
-        },
-        flag ? 0 : 1000
-      );
+      return new Promise((resolve) => {
+        timer = setTimeout(
+          async () => {
+            if (props.deviceId) {
+              const data = await getDataSource(props.deviceId);
+              Object.assign(selectData, data);
+            }
+            if (timer) {
+              timer = null;
+            }
+            resolve(null);
+            await getMonitor();
+            loading.value = false;
+          },
+          flag ? 0 : 1000
+        );
+      });
     }
   }
 
@@ -311,7 +313,7 @@
   }
 
   function handler(passWord, paramcode) {
-    let value = null;
+    let value = '';
     if (paramcode == 'ykjdqh') {
       value = selectData['ykjdqh'] == '1' ? '2' : '1';
     }
@@ -319,8 +321,8 @@
       value = selectData['jxmsqh'] == '1' ? '2' : '1';
     }
     const data = {
-      deviceid: selectData.deviceID,
-      devicetype: selectData.deviceType,
+      deviceid: selectData['deviceID'],
+      devicetype: selectData['deviceType'],
       paramcode: paramcode,
       password: passWord,
       value: value,
@@ -382,7 +384,7 @@
   watch(
     () => props.deviceType,
     () => {
-      nextTick(() => {
+      nextTick(async () => {
         if (props.deviceType == 'pump_over') {
           setModelType('gasPump');
         } else if (props.deviceType == 'pump_under') {
@@ -391,15 +393,23 @@
       });
     }
   );
+  watch(
+    () => selectData['deviceID'],
+    async (deviceID) => {
+      if (deviceID) await getCamera(deviceID, playerRef.value);
+    }
+  );
 
   onBeforeMount(() => {});
 
   onMounted(async () => {
     timer = null;
     await getMonitor(true);
+    if (selectData && selectData['deviceID']) await getCamera(selectData['deviceID'], playerRef.value);
   });
 
   onUnmounted(() => {
+    removeCamera();
     if (timer) {
       clearTimeout(timer);
       timer = undefined;
@@ -416,9 +426,10 @@
       flex-wrap: wrap;
       width: 690px;
       padding: 10px 12px 10px 15px;
-      border: 1px solid #d3e1ff55;
+      border: 1px solid #d3e1ff33;
       background-color: #061c2a55;
-      box-shadow: 0 0 10px #c3c7cd;
+      box-shadow: 0 0 15px #3b567f55;
+      background-color: #38383833;
       .gas-monitor-row {
         display: flex;
         flex-direction: row;
@@ -499,6 +510,19 @@
       }
     }
   }
+  .player-box {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    padding: 0 20px 0 20px;
+    z-index: 9999;
+    display: flex;
+    align-items: end;
+    :deep(#LivePlayerBox) {
+      display: flex;
+      justify-content: end;
+    }
+  }
   .control-group {
     display: flex;
     // justify-content: space-around;

src/views/vent/monitorManager/gasPumpMonitor/gasPump.data.ts

@@ -231,6 +231,3 @@ export const modelMonitor = [
     code: 'pipeTemp',
   },
 ];
-
-
-

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

@@ -52,13 +52,7 @@
         </a-tab-pane>
         <a-tab-pane key="2" tab="历史数据">
           <div class="tab-item table-box box-bg padding-0">
-            <HistoryTable
-              :columns-type="deviceKind"
-              :device-type="deviceKind"
-              :device-list-api="baseList"
-              @change="historyDataSourceChange"
-              designScope="modelsensor-history"
-            />
+            <HistoryTable :columns-type="deviceKind" :device-type="deviceKind" @change="historyDataSourceChange" designScope="modelsensor-history" />
             <div class="charts-box" v-if="chartsColumns.length > 0">
               <BarAndLine
                 :chartsColumnsType="selectData.deviceType"

src/views/vent/monitorManager/workFaceMonitor/workFace.data.ts

@@ -1,6 +1,7 @@
 import { reactive, ref } from 'vue';
 import { BasicColumn } from '/@/components/Table';
 import echarts from '/@/utils/lib/echarts';
+import * as THREE from 'three';
 
 export const monitorNav = [
   {
@@ -736,3 +737,29 @@ export const gasUnitDetail = [
   //   code: 'unitTotalMass',
   // },
 ];
+
+export function getBezierControlPoint(A = { x: 1, y: 1 }, alpha_degrees = 45, d = 10) {
+  // 转换角度为弧度
+  const alpha_radians = (alpha_degrees * Math.PI) / 180;
+  // 计算 C 点的坐标
+  const C = {
+    x: A.x + d * Math.cos(alpha_radians),
+    y: A.y + d * Math.sin(alpha_radians),
+  };
+  return C;
+}
+
+function getBezierLine() {
+  const curve = new THREE.CubicBezierCurve(new THREE.Vector2(-10, 0), new THREE.Vector2(-5, 15), new THREE.Vector2(20, 15), new THREE.Vector2(10, 0));
+
+  const points = curve.getPoints(50);
+  const geometry = new THREE.BufferGeometry().setFromPoints(points);
+
+  const material = new THREE.LineBasicMaterial({ color: 0xff0000 });
+
+  // Create the final object to add to the scene
+  const curveObject = new THREE.Line(geometry, material);
+  return curveObject;
+}
+
+function getShape() {}