[Wip 0000] 瓦斯管网页面开发

src/views/vent/gas/gasPipeNet/gasPipeNet.api.ts

@@ -4,6 +4,7 @@ enum Api {
   list = '/monitor/system',
   baseList = '/safety/ventanalyManageSystem/list',
   deviceList = '/safety/ventanalyManageSystem/linkdevicelist',
+  device = '/monitor/device',
 }
 /**
  * 列表接口
@@ -11,14 +12,8 @@ enum Api {
  */
 export const list = (params) => defHttp.post({ url: Api.list, params });
 
-/**
- * 保存或者更新用户
- * @param params
- */
 export const getTableList = (params) => defHttp.get({ url: Api.baseList, params });
 
-/**
- * 关联设备列表接口
- * @param params
- */
 export const deviceList = (params) => defHttp.get({ url: Api.deviceList, params });
+
+export const device = (params) => defHttp.get({ url: Api.device, params });

src/views/vent/gas/gasPipeNet/gasPipeNet.data.ts

@@ -3,16 +3,16 @@ import { Config } from '../../deviceManager/configurationTable/types';
 /** 模块配置项，为了快速开发使用了可配置首页的组件 */
 export const moduleConfigs: Config[] = [
   {
-    deviceType: '',
+    deviceType: 'datalist',
     moduleName: '抽采泵',
     pageType: '',
     moduleData: {
       header: {
-        show: false,
+        show: true,
         readFrom: '',
         selector: {
-          show: false,
-          value: '',
+          show: true,
+          value: '${strinstallpos}',
         },
         slot: {
           show: false,
@@ -56,8 +56,8 @@ export const moduleConfigs: Config[] = [
               value: '${leakage}',
             },
             {
-              label: '频率(Hz)',
-              value: '${leakage}',
+              label: '一氧化碳(%)',
+              value: '${coVal}',
             },
           ],
         },
@@ -69,17 +69,17 @@ export const moduleConfigs: Config[] = [
           items: [
             {
               label: '阀门1开度',
-              value: '${flow_merge}',
+              value: '${readData.gas1}',
               color: 'blue',
             },
             {
               label: '阀门2开度',
-              value: '${flow_merge}',
+              value: '${readData.gas2}',
               color: 'blue',
             },
             {
               label: '阀门3开度',
-              value: '${flow_merge}',
+              value: '${readData.gas3}',
               color: 'blue',
             },
           ],

src/views/vent/gas/gasPipeNet/index.vue

@@ -6,23 +6,18 @@
       <VentModal />
     </div>
 
+    <ModuleCommon
+      v-for="cfg in moduleConfigs"
+      :key="cfg.deviceType"
+      :show-style="cfg.showStyle"
+      :module-data="cfg.moduleData"
+      :module-name="cfg.moduleName"
+      :device-type="cfg.deviceType"
+      :data="pumpDataSource"
+      :visible="true"
+      :style="{ zIndex: 3 }"
+    />
     <div class="scene-box">
-      <div class="top-box">
-        <!-- <VentBox1 class="flex-3"> 123123123 </VentBox1>
-        <VentBox1 class="flex-1"> 123123123 </VentBox1> -->
-      </div>
-
-      <ModuleCommon
-        v-for="cfg in moduleConfigs"
-        :key="cfg.deviceType"
-        :show-style="cfg.showStyle"
-        :module-data="cfg.moduleData"
-        :module-name="cfg.moduleName"
-        :device-type="cfg.deviceType"
-        :data="{}"
-        :visible="true"
-      />
-
       <div class="bottom-tabs-box" @mousedown="setDivHeight($event, 175, scroll, 0)">
         <DvBorderBox8 class="dv_border_8 p-5px" :dur="5" :style="{ height: `${scroll.y + 128}px` }">
           <a-tabs class="tabs-box" v-model:activeKey="activeKey">
@@ -30,11 +25,10 @@
               <GasPipeTable :scroll="scroll" @locate="goLocation($event)" />
             </a-tab-pane>
             <!-- <a-tab-pane key="2" tab="瓦斯网络解算" disabled> 1212312312313321 </a-tab-pane> -->
-            <a-tab-pane key="3" tab="管道阀门监控">
+            <a-tab-pane key="2" tab="管道阀门监控">
               <MonitorTable
-                ref="monitorTable"
                 columnsType="gasvalve_monitor"
-                :dataSource="dataSource"
+                :dataSource="gasValveDataSource"
                 design-scope="device_monitor"
                 :isShowActionColumn="true"
                 :isShowSelect="false"
@@ -43,10 +37,12 @@
               >
                 <template #action="{ record }">
                   <TableAction
-                    :actions="{
-                      label: '定位',
-                      onClick: goLocation.bind(null, record),
-                    }"
+                    :actions="[
+                      {
+                        label: '定位',
+                        onClick: goLocation.bind(null, record),
+                      },
+                    ]"
                   />
                 </template>
                 <template #filterCell="{ column, record }">
@@ -91,49 +87,21 @@
   import { getActions } from '/@/qiankun/state';
   import { TableAction } from '/@/components/Table';
 
-  type DeviceType = { deviceType: string; deviceName: string; datalist: any[] };
-
   const scroll = ref<{ x: true; y: number }>({ x: true, y: 202 });
   const activeKey = ref('1');
 
-  const dataSource = ref<any[]>([]);
-
-  // 查询关联设备列表
-  async function getDataSource() {
-    const data = await list({ devicetype: 'gasvalve', pagetype: 'normal' });
-    dataSource.value = get(data, 'msgTxt[0].datalist', []).map((e) => {
-      return {
-        ...e,
-        ...e.readData,
-      };
-    });
-  }
-
-  async function getDeviceList(systemID) {
-    const res = await list({ devicetype: 'sys', systemID, type: 'all' });
-
-    const result = res.msgTxt;
-    const deviceArr: DeviceType[] = [];
-    result.forEach((item) => {
-      const data = item['datalist'].forEach((data: any) => {
-        const readData = data.readData;
-        Object.assign(data, readData);
-      });
-      if (item.type != 'sys') {
-        deviceArr.unshift({
-          deviceType: item.type,
-          deviceName: item['typeName'] ? item['typeName'] : item['datalist'][0]['typeName'],
-          datalist: data,
-        });
-      }
-    });
-    dataSource.value = deviceArr;
-  }
+  const pumpDataSource = ref<any[]>([]);
+  const gasValveDataSource = ref<any[]>([]);
 
   async function getSysDataSource() {
     const res = await getTableList({ strtype: 'sys_gaspipenet', pagetype: 'normal' });
 
-    getDeviceList(get(res, 'records[0].id', ''));
+    const { deviceInfo } = await list({ devicetype: 'sys', systemID: get(res, 'records[0].id', ''), type: 'all' });
+
+    pumpDataSource.value = get(deviceInfo, 'pump', { datalist: [] });
+    gasValveDataSource.value = get(deviceInfo, 'gasvalve.datalist', []).map((e) => {
+      return Object.assign(e, e.readData);
+    });
   }
 
   const actions = getActions();
@@ -144,7 +112,6 @@
 
   onMounted(() => {
     getSysDataSource();
-    getDataSource();
   });
 </script>
 
@@ -152,11 +119,13 @@
   @import '/@/design/theme.less';
   @import '/@/design/vent/modal.less';
 
-  @{theme-deepblue} {
-    .gas-pipe-net {
-    }
-  }
+  // @{theme-deepblue} {
+  //   .gas-pipe-net {
+  //   }
+  // }
 
   .gas-pipe-net {
+    width: 100%;
+    height: 100%;
   }
 </style>

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

@@ -1,7 +1,7 @@
 <template>
   <MonitorTable
     ref="monitorTable"
-    columnsType="gaspipe_monitor"
+    :columns="gasPipeColumns"
     :dataSource="dataSource"
     design-scope="device_monitor"
     :isShowActionColumn="true"
@@ -52,8 +52,9 @@
   import { useModal } from '/@/components/Modal';
   import { onMounted } from 'vue';
   import { getGasDeviceInfo } from './comment.api';
+  import { gasPipeColumns } from './comment.data';
   import { ref } from 'vue';
-  import { get } from 'lodash-es';
+  import { forEach, get } from 'lodash-es';
 
   defineProps<{
     scroll: { y: number };
@@ -75,7 +76,27 @@
 
   function getDataSource() {
     getGasDeviceInfo({ devicetype: 'gasmonitor', pagetype: 'normal' }).then((res) => {
-      dataSource.value = get(res, 'msgTxt[0].datalist');
+      dataSource.value = get(res, 'msgTxt[0].datalist', []).map((e) => {
+        const item = {};
+        const start = {
+          ...e.start.readData,
+          strinstallpos: e.start.strinstallpos,
+          readData: null,
+        };
+        const end = {
+          ...e.end.readData,
+          strinstallpos: e.end.strinstallpos,
+          readData: null,
+        };
+        forEach(start, (val, key) => {
+          item[`${key}_start`] = val;
+        });
+        forEach(end, (val, key) => {
+          item[`${key}_end`] = val;
+        });
+
+        return item;
+      });
     });
   }
 

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

@@ -1,6 +1,6 @@
 <template>
   <div class="vent-table">
-    <BasicTable ref="ventTableRef" @register="registerTable" :rowSelection="props.isShowSelect ? rowSelection: undefined">
+    <BasicTable ref="ventTableRef" @register="registerTable" :rowSelection="props.isShowSelect ? rowSelection : undefined">
       <template #tableTitle>
         <div></div>
       </template>
@@ -28,7 +28,7 @@
 
 <script lang="ts" setup>
   //ts语法
-  import { defineExpose, toRaw, watch, ref, onMounted, onUnmounted } from 'vue';
+  import { defineExpose, toRaw, watch, ref, onMounted, onUnmounted, nextTick } from 'vue';
   import { BasicTable } from '/@/components/Table';
   import { useListPage } from '/@/hooks/system/useListPage';
   import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
@@ -58,7 +58,7 @@
     },
     isShowSelect: {
       type: Boolean,
-      default:true,
+      default: true,
     },
     isShowPagination: {
       type: Boolean,
@@ -70,7 +70,7 @@
     },
     scroll: {
       type: Object,
-      default: {y: 0}
+      default: { y: 0 },
     },
     title: {
       type: String,
@@ -81,8 +81,8 @@
     },
     formConfig: {
       type: Object as PropType<FormProps> | undefined,
-      default: undefined
-    }
+      default: undefined,
+    },
   });
   const emits = defineEmits(['selectRow']);
   const dataTableSource = ref<any[]>([]);
@@ -91,17 +91,17 @@
   const ventTableRef = ref();
 
   const tableMaxHeight = props.scroll.y ? props.scroll.y : 350;
-  const columns = ref([])
-  const tableScroll = props.scroll.y ?  ref({y: props.scroll.y}) : ref({})
-   //注册table数据
-     // 列表页面公共参数、方法
+  const columns = ref([]);
+  const tableScroll = props.scroll.y ? ref({ y: props.scroll.y }) : ref({});
+  //注册table数据
+  // 列表页面公共参数、方法
   const { prefixCls, tableContext, doRequest } = useListPage({
     designScope: props.designScope,
     tableProps: {
       title: props.title,
       dataSource: dataTableSource,
-      columns: props.columnsType  ? columns : (props.columns as any[]),
-      rowSelection: { type: props.isShowSelect? 'radio': undefined, columnWidth: 100 },
+      columns: props.columnsType ? columns : (props.columns as any[]),
+      rowSelection: { type: props.isShowSelect ? 'radio' : undefined, columnWidth: 100 },
       size: props.size,
       useSearchForm: props.formConfig ? true : false,
       showTableSetting: false,
@@ -117,27 +117,36 @@
       actionColumn: {
         width: 180,
       },
-      pagination: props.isShowPagination ? {
-        current: 1,
-        pageSize: 50,
-        pageSizeOptions: ['10', '30', '50', '100', '500'],
-        showQuickJumper: false
-      } : false,
+      pagination: props.isShowPagination
+        ? {
+            current: 1,
+            pageSize: 50,
+            pageSizeOptions: ['10', '30', '50', '100', '500'],
+            showQuickJumper: false,
+          }
+        : false,
       beforeFetch: (params) => {
-        if(props.deviceType?.startsWith('safetymonitor')){ 
-          return Object.assign(params, { filterParams: {'dataTypeName': params['dataTypeName'], strinstallpos: '*'+params['strinstallpos']+'*'} });
-        }else if(props.deviceType?.startsWith('location')) {
-          return Object.assign(params, { filterParams: { strinstallpos: '*' + params['strinstallpos'] + '*', userName: '*' + params['strname'] + '*', userJson: '' } });
-        }else if(props.deviceType?.startsWith('vehicle')) {
-          return Object.assign(params, { filterParams: {strinstallpos: '*'+params['strinstallpos']+'*', vehicleName: '*'+params['strname']+'*' } });
-        }else{
+        if (props.deviceType?.startsWith('safetymonitor')) {
+          return Object.assign(params, {
+            filterParams: { dataTypeName: params['dataTypeName'], strinstallpos: '*' + params['strinstallpos'] + '*' },
+          });
+        } else if (props.deviceType?.startsWith('location')) {
+          return Object.assign(params, {
+            filterParams: { strinstallpos: '*' + params['strinstallpos'] + '*', userName: '*' + params['strname'] + '*', userJson: '' },
+          });
+        } else if (props.deviceType?.startsWith('vehicle')) {
+          return Object.assign(params, {
+            filterParams: { strinstallpos: '*' + params['strinstallpos'] + '*', vehicleName: '*' + params['strname'] + '*' },
+          });
+        } else {
           return Object.assign(params, { column: 'createTime' });
         }
       },
     },
   });
-  const [registerTable, { reload, setLoading, setSelectedRowKeys, getSelectRowKeys, getForm, setPagination }, { rowSelection, selectedRowKeys,  }] = tableContext;
-  
+  const [registerTable, { reload, setLoading, setSelectedRowKeys, getSelectRowKeys, getForm, setPagination }, { rowSelection, selectedRowKeys }] =
+    tableContext;
+
   watch(
     () => {
       return props.dataSource;
@@ -145,62 +154,64 @@
     (newVal, oldVal) => {
       if (oldVal && newVal && oldVal.length < 1 && newVal.length > 0) {
         // 第一次
-        if(getSelectRowKeys().length < 1) setSelectedRowKeys([newVal[0].deviceID]);
+        if (getSelectRowKeys().length < 1) setSelectedRowKeys([newVal[0].deviceID]);
       }
       const list = <any[]>[];
       newVal.forEach((item) => {
         list.push(toRaw(item));
       });
       dataTableSource.value = list;
-      if(ventTableRef.value) {
-        setLoading(false)
-      }
+      nextTick(() => {
+        setLoading(false);
+      });
     },
     {
-      immediate: true
+      immediate: true,
     }
   );
   watch(
-  () => {
-    return props.columnsType;
-  },
-  (newVal) => {
-    console.log(newVal,'val-----')
-    if(!newVal) return
-    const column =  getTableHeaderColumns(newVal.endsWith('_monitor') ? newVal : newVal+'_monitor')
-    console.log('监测列表表头000------------>', newVal)
-    if(column && column.length < 1){
-      const arr = newVal.split('_')
-      const columnKey =  arr.reduce((prev, cur, index) => {
-        if(index !== arr.length - 2){
-          return prev + '_' + cur
-        }else {
-          return prev
-        }
-      })
-      columns.value = getTableHeaderColumns(arr[0]+'_monitor');
-    }else{
-      columns.value = column
+    () => {
+      return props.columnsType;
+    },
+    (newVal) => {
+      console.log(newVal, 'val-----');
+      if (!newVal) return;
+      const column = getTableHeaderColumns(newVal.endsWith('_monitor') ? newVal : newVal + '_monitor');
+      console.log('监测列表表头000------------>', newVal);
+      if (column && column.length < 1) {
+        const arr = newVal.split('_');
+        const columnKey = arr.reduce((prev, cur, index) => {
+          if (index !== arr.length - 2) {
+            return prev + '_' + cur;
+          } else {
+            return prev;
+          }
+        });
+        columns.value = getTableHeaderColumns(arr[0] + '_monitor');
+      } else {
+        columns.value = column;
+      }
+    },
+    {
+      immediate: true,
     }
-  },
-  {
-    immediate: true
-  }
   );
 
-  watch(() => props.scroll.y, (newVal) => {
-    if (newVal) {
-      tableScroll.value = { y: newVal }
-    } else {
-      tableScroll.value = {}
-    }
+  watch(
+    () => props.scroll.y,
+    (newVal) => {
+      if (newVal) {
+        tableScroll.value = { y: newVal };
+      } else {
+        tableScroll.value = {};
+      }
     }
-  )
-  
+  );
+
   watch(
     selectedRowKeys,
     (newKeys) => {
-      console.log('设置的选中id---------->', newKeys, dataTableSource.value)
+      console.log('设置的选中id---------->', newKeys, dataTableSource.value);
       const index = findIndex(dataTableSource.value, (data: any) => {
         return data.deviceID == selectedRowKeys.value[0];
       });
@@ -210,7 +221,7 @@
   );
 
   function resetPagination() {
-     if(ventTableRef.value) setPagination({current: 1, pageSize: 50, total:0})
+    if (ventTableRef.value) setPagination({ current: 1, pageSize: 50, total: 0 });
   }
 
   defineExpose({
@@ -220,7 +231,7 @@
     setLoading,
     reload,
     getForm,
-    resetPagination
+    resetPagination,
   });
 
   onMounted(() => {
@@ -251,5 +262,4 @@
   :deep(.@{ventSpace}-pagination) {
     margin-right: 20px !important;
   }
- 
 </style>

src/views/vent/monitorManager/comment/comment.data.ts

@@ -173,7 +173,7 @@ export const gaspatrolColumnsOne: BasicColumn[] = [
   },
 ];
 //设备分站
-export const stationColumns:BasicColumn[]=[
+export const stationColumns: BasicColumn[] = [
   {
     title: '序号',
     width: 60,
@@ -223,7 +223,7 @@ export const stationColumns:BasicColumn[]=[
     align: 'center',
     slots: { customRender: 'action' },
   },
-]
+];
 export const dsutColumns: BasicColumn[] = [
   {
     title: '序号',
@@ -1064,3 +1064,126 @@ export const columnsGas2: BasicColumn[] = [
     slots: { customRender: 'action' },
   },
 ];
+
+export const gasPipeColumns: BasicColumn[] = [
+  {
+    title: '起点',
+    children: [
+      {
+        title: '管道位置',
+        dataIndex: 'strinstallpos_start',
+        key: 'strinstallpos_start',
+      },
+      {
+        title: '二氧化碳(%)',
+        dataIndex: 'co2val_start',
+        key: 'co2val_start',
+      },
+      {
+        title: '一氧化碳(%)',
+        dataIndex: 'coval_start',
+        key: 'coval_start',
+      },
+      // {
+      //   title: '负压(Pa)',
+      //   dataIndex: 'fyVal_start',
+      //   key: 'fyVal_start',
+      // },
+      // {
+      //   title: '瓦斯抽采浓度(%)',
+      //   dataIndex: 'gasC_start',
+      //   key: 'gasC_start',
+      // },
+      // {
+      //   title: '瓦斯抽采混量',
+      //   dataIndex: 'gasMixMass_start',
+      //   key: 'gasMixMass_start',
+      // },
+      // {
+      //   title: '瓦斯抽采纯量',
+      //   dataIndex: 'gasMass_start',
+      //   key: 'gasMass_start',
+      // },
+      {
+        title: '累计抽采量',
+        dataIndex: 'gasTotalMass_start',
+        key: 'gasTotalMass_start',
+      },
+      {
+        title: '管道流量',
+        dataIndex: 'gdlyVal_start',
+        key: 'gdlyVal_start',
+      },
+      {
+        title: '管道绝对温度',
+        dataIndex: 'gdjdwdVal_start',
+        key: 'gdjdwdVal_start',
+      },
+      // {
+      //   title: '是否泄露',
+      //   dataIndex: 'isLeakage_start',
+      //   key: 'isLeakage_start',
+      // },
+    ],
+  },
+  {
+    title: '终点',
+    children: [
+      {
+        title: '管道位置',
+        dataIndex: 'strinstallpos_end',
+        key: 'strinstallpos_end',
+      },
+      {
+        title: '二氧化碳(%)',
+        dataIndex: 'co2val_end',
+        key: 'co2val_end',
+      },
+      {
+        title: '一氧化碳(%)',
+        dataIndex: 'coval_end',
+        key: 'coval_end',
+      },
+      // {
+      //   title: '负压(Pa)',
+      //   dataIndex: 'fyVal_end',
+      //   key: 'fyVal_end',
+      // },
+      // {
+      //   title: '瓦斯抽采浓度(%)',
+      //   dataIndex: 'gasC_end',
+      //   key: 'gasC_end',
+      // },
+      // {
+      //   title: '瓦斯抽采混量',
+      //   dataIndex: 'gasMixMass_end',
+      //   key: 'gasMixMass_end',
+      // },
+      // {
+      //   title: '瓦斯抽采纯量',
+      //   dataIndex: 'gasMass_end',
+      //   key: 'gasMass_end',
+      // },
+      {
+        title: '累计抽采量',
+        dataIndex: 'gasTotalMass_end',
+        key: 'gasTotalMass_end',
+      },
+      {
+        title: '管道流量',
+        dataIndex: 'gdlyVal_end',
+        key: 'gdlyVal_end',
+      },
+      {
+        title: '管道绝对温度',
+        dataIndex: 'gdjdwdVal_end',
+        key: 'gdjdwdVal_end',
+      },
+      // {
+      //   title: '是否泄露',
+      //   dataIndex: 'isLeakage_end',
+      //   key: 'isLeakage_end',
+      // },
+    ],
+  },
+];