[Wip 0000] 瓦斯管网相关页面开发，包括监控系统、监测表格等页面

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

@@ -0,0 +1,100 @@
+import { defHttp } from '/@/utils/http/axios';
+
+enum Api {
+  addGasMainApproval = '/ventanaly-jingtaifengliang/productionApprovalController/addGasMainApproval',
+  addGasMainpipesystem = '/ventanaly-jingtaifengliang/productionApprovalController/addGasMainpipesystem',
+  addGasPumpstation = '/ventanaly-jingtaifengliang/productionApprovalController/addGasPumpstation',
+  deleteGasMain = '/ventanaly-jingtaifengliang/productionApprovalController/deleteGasMain',
+  deleteGasMainpipesystem = '/ventanaly-jingtaifengliang/productionApprovalController/deleteGasMainpipesystem',
+  deleteGasPumpstation = '/ventanaly-jingtaifengliang/productionApprovalController/deleteGasPumpstation',
+  getGasMainAllInfo = '/ventanaly-jingtaifengliang/productionApprovalController/getGasMainAllInfo',
+  getGasMainpipesystemAllInfo = '/ventanaly-jingtaifengliang/productionApprovalController/getGasMainpipesystemAllInfo',
+  getGasPumpstationAllInfo = '/ventanaly-jingtaifengliang/productionApprovalController/getGasPumpstationAllInfo',
+  updateGasMain = '/ventanaly-jingtaifengliang/productionApprovalController/updateGasMain',
+  updateGasMainpipesystem = '/ventanaly-jingtaifengliang/productionApprovalController/updateGasMainpipesystem',
+  updateGasPumpstation = '/ventanaly-jingtaifengliang/productionApprovalController/updateGasPumpstation',
+}
+
+// const addGasMainApproval = (data) => {
+//   return defHttp.post({
+//     url: Api.addGasMainApproval,
+//     params: data,
+//   });
+// };
+
+// const addGasMainpipesystem = (data) => {
+//   return defHttp.post({
+//     url: Api.addGasMainpipesystem,
+//     params: data,
+//   });
+// };
+
+// const addGasPumpstation = (data) => {
+//   return defHttp.post({
+//     url: Api.addGasPumpstation,
+//     params: data,
+//   });
+// };
+
+export const deleteGasMain = (data) => {
+  return defHttp.post({
+    url: Api.deleteGasMain,
+    params: data,
+  });
+};
+
+export const deleteGasMainpipesystem = (data) => {
+  return defHttp.post({
+    url: Api.deleteGasMainpipesystem,
+    params: data,
+  });
+};
+
+export const deleteGasPumpstation = (data) => {
+  return defHttp.post({
+    url: Api.deleteGasPumpstation,
+    params: data,
+  });
+};
+
+export const getGasMainAllInfo = (data) => {
+  return defHttp.post({
+    url: Api.getGasMainAllInfo,
+    params: data,
+  });
+};
+
+export const getGasMainpipesystemAllInfo = (data) => {
+  return defHttp.post({
+    url: Api.getGasMainpipesystemAllInfo,
+    params: data,
+  });
+};
+
+export const getGasPumpstationAllInfo = (data) => {
+  return defHttp.post({
+    url: Api.getGasPumpstationAllInfo,
+    params: data,
+  });
+};
+
+export const updateGasMain = (data) => {
+  return defHttp.post({
+    url: data.id ? Api.updateGasMain : Api.addGasMainApproval,
+    params: data,
+  });
+};
+
+export const updateGasMainpipesystem = (data) => {
+  return defHttp.post({
+    url: data.id ? Api.updateGasMainpipesystem : Api.addGasMainpipesystem,
+    params: data,
+  });
+};
+
+export const updateGasPumpstation = (data) => {
+  return defHttp.post({
+    url: data.id ? Api.updateGasPumpstation : Api.addGasPumpstation,
+    params: data,
+  });
+};

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

@@ -0,0 +1,186 @@
+import { Config } from '../../deviceManager/configurationTable/types';
+
+/** 模块配置项，为了快速开发使用了可配置首页的组件 */
+export const moduleConfigs: Config[] = [
+  {
+    deviceType: '',
+    moduleName: '抽采泵',
+    pageType: '',
+    moduleData: {
+      header: {
+        show: false,
+        readFrom: '',
+        selector: {
+          show: false,
+          value: '',
+        },
+        slot: {
+          show: false,
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'image',
+        link: '',
+      },
+      layout: {
+        direction: 'column',
+        items: [
+          {
+            name: 'board',
+            basis: '50%',
+          },
+          {
+            name: 'list',
+            basis: '50%',
+          },
+        ],
+      },
+      board: [
+        {
+          type: 'I',
+          readFrom: '',
+          layout: 'label-top',
+          items: [
+            {
+              label: '电压(kV)',
+              value: '${flow_merge}',
+            },
+            {
+              label: '电流(A)',
+              value: '${fy_merge}',
+            },
+            {
+              label: '功率(kW)',
+              value: '${leakage}',
+            },
+            {
+              label: '频率(Hz)',
+              value: '${leakage}',
+            },
+          ],
+        },
+      ],
+      list: [
+        {
+          type: 'J',
+          readFrom: '',
+          items: [
+            {
+              label: '阀门1开度',
+              value: '${flow_merge}',
+              color: 'blue',
+            },
+            {
+              label: '阀门2开度',
+              value: '${flow_merge}',
+              color: 'blue',
+            },
+            {
+              label: '阀门3开度',
+              value: '${flow_merge}',
+              color: 'blue',
+            },
+          ],
+        },
+      ],
+      chart: [],
+      table: [],
+      gallery: [],
+      complex_list: [],
+      gallery_list: [],
+      preset: [],
+      to: '',
+    },
+    showStyle: {
+      size: 'width:344px;height:490px;',
+      version: '原版',
+      position: 'top:80px;left:10px;',
+    },
+  },
+  {
+    deviceType: '',
+    moduleName: '视频1',
+    pageType: '',
+    moduleData: {
+      header: {
+        show: false,
+        readFrom: '',
+        selector: {
+          show: false,
+          value: '',
+        },
+        slot: {
+          show: false,
+          value: '',
+        },
+      },
+      background: {
+        show: true,
+        type: 'video',
+        link: '/video/fanlocal.mp4',
+      },
+      layout: {
+        direction: 'column',
+        items: [],
+      },
+      board: [],
+      list: [],
+      chart: [],
+      table: [],
+      gallery: [],
+      complex_list: [],
+      gallery_list: [],
+      preset: [],
+      to: '',
+    },
+    showStyle: {
+      size: 'width:344px;height:240px;',
+      version: '原版',
+      position: 'top:80px;right:10px;',
+    },
+  },
+  {
+    deviceType: '',
+    moduleName: '视频2',
+    pageType: '',
+    moduleData: {
+      header: {
+        show: false,
+        readFrom: '',
+        selector: {
+          show: false,
+          value: '',
+        },
+        slot: {
+          show: false,
+          value: '',
+        },
+      },
+      background: {
+        show: true,
+        type: 'video',
+        link: '/video/fanlocal.mp4',
+      },
+      layout: {
+        direction: 'column',
+        items: [],
+      },
+      board: [],
+      list: [],
+      chart: [],
+      table: [],
+      gallery: [],
+      complex_list: [],
+      gallery_list: [],
+      preset: [],
+      to: '',
+    },
+    showStyle: {
+      size: 'width:344px;height:240px;',
+      version: '原版',
+      position: 'top:330px;right:10px;',
+    },
+  },
+];

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

@@ -0,0 +1,60 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <div class="gas-pipe-net">
+    <CustomHeader> 瓦斯管网监控系统 </CustomHeader>
+    <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">
+            <a-tab-pane key="1" tab="瓦斯管道监测"> <GasPipeNetTable :deviceType="deviceType" :dataSource="[]" :scroll="scroll" /> </a-tab-pane>
+            <a-tab-pane key="2" tab="瓦斯网络解算" disabled> 1212312312313321 </a-tab-pane>
+            <a-tab-pane key="3" tab="管道阀门监控"> assasdsdsdsdds </a-tab-pane>
+          </a-tabs>
+        </DvBorderBox8>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import CustomHeader from '/@/components/vent/customHeader.vue';
+  import { setDivHeight } from '/@/utils/event';
+  import { ref } from 'vue';
+  import { BorderBox8 as DvBorderBox8 } from '@kjgl77/datav-vue3';
+  import ModuleCommon from '../../home/configurable/components/ModuleCommon.vue';
+  import { moduleConfigs } from './gasPipeNet.data';
+  import GasPipeNetTable from '../../monitorManager/comment/GasPipeNetTable.vue';
+
+  const scroll = ref<{ x: true; y: number }>({ x: true, y: 202 });
+  const activeKey = ref('1');
+  const deviceType = 'gasPipeNet';
+</script>
+
+<style scoped lang="less">
+  @import '/@/design/theme.less';
+  @import '/@/design/vent/modal.less';
+
+  @{theme-deepblue} {
+    .gas-pipe-net {
+    }
+  }
+
+  .gas-pipe-net {
+  }
+</style>

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

@@ -0,0 +1,72 @@
+<template>
+  <MonitorTable
+    ref="monitorTable"
+    :columnsType="`${deviceType}_monitor`"
+    :dataSource="dataSource"
+    design-scope="device_monitor"
+    :isShowActionColumn="true"
+    :isShowSelect="false"
+    title="设备监测"
+    :scroll="{ y: scroll.y - 30 }"
+  >
+    <template #action="{ record }">
+      <TableAction
+        :actions="[
+          {
+            label: '啥来着？',
+            onClick: (e) => deviceEdit(e, 'reportInfo', record),
+          },
+          {
+            label: '定位',
+            onClick: () => $emit('locate', record),
+          },
+        ]"
+      />
+    </template>
+    <template #filterCell="{ column, record }">
+      <a-tag v-if="column.dataIndex === 'warnFlag'" :color="record.warnFlag == 0 ? 'green' : record.warnFlag == 1 ? '#FF5812' : 'gray'">
+        {{ record.warnFlag == 0 ? '正常' : record.warnFlag == 1 ? '报警' : record.warnFlag == 2 ? '断开' : '未监测' }}
+      </a-tag>
+      <template v-else-if="column.dataIndex === 'warnLevel'">
+        <a-tag v-if="record.warnLevel == '101'" color="green">低风险</a-tag>
+        <a-tag v-else-if="record.warnLevel == '102'" color="#FF5812">一般风险</a-tag>
+        <a-tag v-else-if="record.warnLevel == '103'" color="#FF5812">较大风险</a-tag>
+        <a-tag v-else-if="record.warnLevel == '104'" color="#FF5812">重大风险</a-tag>
+        <a-tag v-else-if="record.warnLevel == '201'" color="#FF0000">报警</a-tag>
+        <a-tag v-else-if="record.warnLevel == '10000'" color="#FF5812">数据超限</a-tag>
+        <a-tag v-else-if="record.warnLevel == '1001'" color="default">网络中断</a-tag>
+        <a-tag v-else color="green">正常</a-tag>
+      </template>
+      <a-tag v-if="column.dataIndex === 'netStatus'" :color="record.netStatus == '0' ? '#f00' : 'green'">
+        {{ record.netStatus == '0' ? '断开' : '连接' }}
+      </a-tag>
+    </template>
+  </MonitorTable>
+  <DeviceBaseInfo @register="registerModal" :device-type="deviceType" />
+</template>
+
+<script lang="ts" setup>
+  import MonitorTable from './MonitorTable.vue';
+  import DeviceBaseInfo from './components/DeviceBaseInfo.vue';
+  import { TableAction } from '/@/components/Table';
+  import { useModal } from '/@/components/Modal';
+  //   import { ref } from 'vue';
+
+  defineProps<{
+    deviceType: string;
+    dataSource: any[];
+    scroll: { y: number };
+  }>();
+
+  defineEmits(['locate']);
+
+  const [registerModal, { openModal }] = useModal();
+
+  function deviceEdit(e: Event, type: string, record) {
+    e.stopPropagation();
+    openModal(true, {
+      type,
+      deviceId: record['deviceID'],
+    });
+  }
+</script>