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

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

@@ -1,100 +1,24 @@
 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',
+  list = '/monitor/system',
+  baseList = '/safety/ventanalyManageSystem/list',
+  deviceList = '/safety/ventanalyManageSystem/linkdevicelist',
 }
-
-// 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,
-  });
-};
+/**
+ * 列表接口
+ * @param params
+ */
+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 });

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

@@ -26,9 +26,49 @@
       <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="瓦斯管道监测"> <GasPipeTable :deviceType="deviceType" :dataSource="[]" :scroll="scroll" /> </a-tab-pane>
+            <a-tab-pane key="1" tab="瓦斯管道监测">
+              <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="管道阀门监控"> <GasPipeTable :deviceType="deviceType" :dataSource="[]" :scroll="scroll" /> </a-tab-pane>
+            <a-tab-pane key="3" tab="管道阀门监控">
+              <MonitorTable
+                ref="monitorTable"
+                columnsType="gasvalve_monitor"
+                :dataSource="dataSource"
+                design-scope="device_monitor"
+                :isShowActionColumn="true"
+                :isShowSelect="false"
+                title="设备监测"
+                :scroll="{ y: scroll.y - 30 }"
+              >
+                <template #action="{ record }">
+                  <TableAction
+                    :actions="{
+                      label: '定位',
+                      onClick: goLocation.bind(null, 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>
+            </a-tab-pane>
           </a-tabs>
         </DvBorderBox8>
       </div>
@@ -39,16 +79,73 @@
 <script setup lang="ts">
   import CustomHeader from '/@/components/vent/customHeader.vue';
   import { setDivHeight } from '/@/utils/event';
-  import { ref } from 'vue';
+  import { onMounted, 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 GasPipeTable from '../../monitorManager/comment/GasPipeTable.vue';
+  import MonitorTable from '../../monitorManager/comment/MonitorTable.vue';
   import VentModal from '/@/components/vent/micro/ventModal.vue';
+  import { getTableList, list } from './gasPipeNet.api';
+  import { get } from 'lodash-es';
+  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 deviceType = 'gaspipe';
+
+  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;
+  }
+
+  async function getSysDataSource() {
+    const res = await getTableList({ strtype: 'sys_gaspipenet', pagetype: 'normal' });
+
+    getDeviceList(get(res, 'records[0].id', ''));
+  }
+
+  const actions = getActions();
+  function goLocation(record) {
+    // debugger;
+    actions.setGlobalState({ locationId: record.deviceID, locationObj: null, pageObj: null });
+  }
+
+  onMounted(() => {
+    getSysDataSource();
+    getDataSource();
+  });
 </script>
 
 <style scoped lang="less">

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

@@ -1,7 +1,7 @@
 <template>
   <MonitorTable
     ref="monitorTable"
-    :columnsType="`${deviceType}_monitor`"
+    columnsType="gaspipe_monitor"
     :dataSource="dataSource"
     design-scope="device_monitor"
     :isShowActionColumn="true"
@@ -13,7 +13,7 @@
       <TableAction
         :actions="[
           {
-            label: '啥来着？',
+            label: '详情',
             onClick: (e) => deviceEdit(e, 'reportInfo', record),
           },
           {
@@ -42,7 +42,7 @@
       </a-tag>
     </template>
   </MonitorTable>
-  <DeviceBaseInfo @register="registerModal" :device-type="deviceType" />
+  <DeviceBaseInfo @register="registerModal" device-type="gaspipe" />
 </template>
 
 <script lang="ts" setup>
@@ -50,11 +50,12 @@
   import DeviceBaseInfo from './components/DeviceBaseInfo.vue';
   import { TableAction } from '/@/components/Table';
   import { useModal } from '/@/components/Modal';
-  //   import { ref } from 'vue';
+  import { onMounted } from 'vue';
+  import { getGasDeviceInfo } from './comment.api';
+  import { ref } from 'vue';
+  import { get } from 'lodash-es';
 
   defineProps<{
-    deviceType: string;
-    dataSource: any[];
     scroll: { y: number };
   }>();
 
@@ -69,4 +70,16 @@
       deviceId: record['deviceID'],
     });
   }
+
+  const dataSource = ref<any[]>([]);
+
+  function getDataSource() {
+    getGasDeviceInfo({ devicetype: 'gasmonitor', pagetype: 'normal' }).then((res) => {
+      dataSource.value = get(res, 'msgTxt[0].datalist');
+    });
+  }
+
+  onMounted(() => {
+    getDataSource();
+  });
 </script>

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

@@ -8,6 +8,7 @@ enum Api {
   sysInput = '/safety/ventanalyManageSystem/input',
   getInfo = '/safety/reportLocalData/queryReportData',
   getFileList = '/safety/reportLocalData/list',
+  getGasDeviceInfo = '/monitor/getGasDeviceInfo',
 }
 
 /**
@@ -27,3 +28,4 @@ export const sysList = (params) => defHttp.get({ url: Api.sysList, params });
 export const sysInput = (params) => defHttp.put({ url: Api.sysInput, params });
 export const getInfoList = (params) => defHttp.post({ url: Api.getInfo, params });
 export const getAllFileList = (params) => defHttp.get({ url: Api.getFileList, params });
+export const getGasDeviceInfo = (params) => defHttp.post({ url: Api.getGasDeviceInfo, params });