[Feat 0000] 瓦斯管网系统页面初步开发完成

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

@@ -15,7 +15,7 @@
       :device-type="cfg.deviceType"
       :data="pumpDataSource"
       :visible="true"
-      :style="{ zIndex: 3 }"
+      :style="{ zIndex: 1 }"
     />
     <div class="scene-box">
       <div class="bottom-tabs-box" @mousedown="setDivHeight($event, 175, scroll, 0)">
@@ -38,6 +38,10 @@
                 <template #action="{ record }">
                   <TableAction
                     :actions="[
+                      {
+                        label: '控制',
+                        onClick: () => controlHandler(record),
+                      },
                       {
                         label: '定位',
                         onClick: goLocation.bind(null, record),
@@ -69,13 +73,16 @@
         </DvBorderBox8>
       </div>
     </div>
+    <BasicModal @register="registerModal" @ok="submitHandler">
+      <BasicForm @register="registerForm" />
+    </BasicModal>
   </div>
 </template>
 
 <script setup lang="ts">
   import CustomHeader from '/@/components/vent/customHeader.vue';
   import { setDivHeight } from '/@/utils/event';
-  import { onMounted, ref } from 'vue';
+  import { onMounted, ref, nextTick } from 'vue';
   import { BorderBox8 as DvBorderBox8 } from '@kjgl77/datav-vue3';
   import ModuleCommon from '../../home/configurable/components/ModuleCommon.vue';
   import { moduleConfigs } from './gasPipeNet.data';
@@ -86,6 +93,9 @@
   import { get } from 'lodash-es';
   import { getActions } from '/@/qiankun/state';
   import { TableAction } from '/@/components/Table';
+  import { BasicModal, useModal } from '/@/components/Modal';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { message } from 'ant-design-vue';
 
   const scroll = ref<{ x: true; y: number }>({ x: true, y: 202 });
   const activeKey = ref('1');
@@ -110,6 +120,38 @@
     actions.setGlobalState({ locationId: record.deviceID, locationObj: null, pageObj: null });
   }
 
+  const [registerModal, { openModal, closeModal }] = useModal();
+  const [registerForm, { setFieldsValue, validate }] = useForm({
+    showActionButtonGroup: false,
+    schemas: [
+      {
+        label: '开度',
+        component: 'Input',
+        field: 'degree',
+      },
+      {
+        label: '密码',
+        component: 'InputPassword',
+        field: 'pwd',
+        required: true,
+      },
+    ],
+  });
+
+  function submitHandler() {
+    validate().then((val) => {
+      message.success('VAL:' + JSON.stringify(val));
+      closeModal();
+    });
+  }
+
+  function controlHandler(record) {
+    openModal();
+    nextTick(() => {
+      setFieldsValue(record);
+    });
+  }
+
   onMounted(() => {
     getSysDataSource();
   });

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

@@ -7,14 +7,15 @@
     :isShowActionColumn="true"
     :isShowSelect="false"
     title="设备监测"
-    :scroll="{ y: scroll.y - 30 }"
+    :scroll="{ y: scroll.y - 60 }"
   >
     <template #action="{ record }">
       <TableAction
         :actions="[
           {
+            ifShow: () => showDetailButton,
             label: '详情',
-            onClick: (e) => deviceEdit(e, 'reportInfo', record),
+            onClick: () => $emit('detail', record),
           },
           {
             label: '定位',
@@ -42,35 +43,41 @@
       </a-tag>
     </template>
   </MonitorTable>
-  <DeviceBaseInfo @register="registerModal" device-type="gaspipe" />
+  <!-- <DeviceBaseInfo @register="registerModal" device-type="gaspipe" /> -->
 </template>
 
 <script lang="ts" setup>
   import MonitorTable from './MonitorTable.vue';
-  import DeviceBaseInfo from './components/DeviceBaseInfo.vue';
+  // import DeviceBaseInfo from './components/DeviceBaseInfo.vue';
   import { TableAction } from '/@/components/Table';
-  import { useModal } from '/@/components/Modal';
+  // import { useModal } from '/@/components/Modal';
   import { onMounted } from 'vue';
   import { getGasDeviceInfo } from './comment.api';
   import { gasPipeColumns } from './comment.data';
   import { ref } from 'vue';
   import { forEach, get } from 'lodash-es';
 
-  defineProps<{
-    scroll: { y: number };
-  }>();
+  withDefaults(
+    defineProps<{
+      scroll: { y: number };
+      showDetailButton?: boolean;
+    }>(),
+    {
+      showDetailButton: false,
+    }
+  );
 
-  defineEmits(['locate']);
+  defineEmits(['locate', 'detail']);
 
-  const [registerModal, { openModal }] = useModal();
+  // const [registerModal, { openModal }] = useModal();
 
-  function deviceEdit(e: Event, type: string, record) {
-    e.stopPropagation();
-    openModal(true, {
-      type,
-      deviceId: record['deviceID'],
-    });
-  }
+  // function deviceEdit(e: Event, type: string, record) {
+  //   e.stopPropagation();
+  //   openModal(true, {
+  //     type,
+  //     deviceId: record['deviceID'],
+  //   });
+  // }
 
   const dataSource = ref<any[]>([]);
 

src/views/vent/monitorManager/deviceMonitor/components/device/index.vue

@@ -385,7 +385,7 @@
             </template>
             <!-- 瓦斯管网 -->
             <template v-else-if="deviceType.startsWith('gaspipe') && activeKey == '1'">
-              <GasPipeTable :dataSource="dataSource" :deviceType="deviceType" :scroll="scroll" @locate="goLocation" />
+              <GasPipeTable :showDetailButton="true" :scroll="scroll" @detail="goDetail($event)" @locate="goLocation" />
             </template>
             <template v-else>
               <!-- 工作面echarts图标 -->
@@ -550,14 +550,24 @@
                 <!-- HistoryTableNew 没有监测deviceType 进行动态查询表头导致数据不显示 -->
                 <!-- <HistoryTableNew class="w-100% h-100%" :device-code="`${deviceType}`" :scroll="scroll"
                   dict-code="fan_dict" /> -->
-                  <HistoryTable ref="historyTable" :columns-type="`${deviceType}`"
-                  :device-type="deviceType" designScope="device-history" :scroll="scroll" />
+                <HistoryTable
+                  ref="historyTable"
+                  :columns-type="`${deviceType}`"
+                  :device-type="deviceType"
+                  designScope="device-history"
+                  :scroll="scroll"
+                />
               </template>
               <template v-else-if="deviceType.startsWith('fanlocal')">
                 <!-- HistoryTableNew 没有监测deviceType 进行动态查询表头导致数据不显示 -->
                 <!-- <HistoryTableNew class="w-100% h-100%" :device-code="`${deviceType}`" :scroll="scroll" dict-code="fanlocal_dict" /> -->
-                 <HistoryTable ref="historyTable" :columns-type="`${deviceType}`"
-                  :device-type="deviceType" designScope="device-history" :scroll="scroll" />
+                <HistoryTable
+                  ref="historyTable"
+                  :columns-type="`${deviceType}`"
+                  :device-type="deviceType"
+                  designScope="device-history"
+                  :scroll="scroll"
+                />
               </template>
               <template v-else>
                 <HistoryTable
@@ -571,9 +581,20 @@
               </template>
             </div>
           </a-tab-pane>
-          <a-tab-pane key="5" :tab="deviceType.startsWith('gasmonitor') ? '曲线监测': '历史曲线'" v-if="haveHistoryEcharts.find((item) => deviceType.startsWith(item))">
+          <a-tab-pane
+            key="5"
+            :tab="deviceType.startsWith('gasmonitor') ? '曲线监测' : '历史曲线'"
+            v-if="haveHistoryEcharts.find((item) => deviceType.startsWith(item))"
+          >
             <div class="tab-item">
-              <HistoryTableMajorPath v-if="deviceType.startsWith('majorpath')" class="w-100% h-100%" :sysId="`${systemID}`" :scroll="scroll" columnsType="sys_majorpath" type="chart" />
+              <HistoryTableMajorPath
+                v-if="deviceType.startsWith('majorpath')"
+                class="w-100% h-100%"
+                :sysId="`${systemID}`"
+                :scroll="scroll"
+                columnsType="sys_majorpath"
+                type="chart"
+              />
               <DeviceEcharts
                 chartsColumnsType="gasmonitor_chart"
                 xAxisPropType="strname"
@@ -664,7 +685,7 @@
     getMonitorComponent,
     vehicleFormConfig,
     noLocationArr,
-    haveHistoryEcharts
+    haveHistoryEcharts,
   } from './device.data';
   import mainPath from './modal/mainPath.vue';
   import { formConfig } from '../../../safetyMonitor/safety.data';