[Wip 0000] 喷淋系统页面开发

src/views/vent/monitorManager/sprayMonitor/component.vue

@@ -14,7 +14,9 @@
   </div>
   <div class="scene-box">
     <div class="center-container">
-      <balancePressHome v-if="activeKey == 'monitor'" :deviceId="optionValue" />
+      <template v-if="activeKey == 'monitor'">
+        <!-- <balancePressHome v-if="activeKey == 'monitor'" :deviceId="optionValue" /> -->
+      </template>
       <div v-else class="history-group">
         <div class="device-button-group" v-if="deviceList.length > 0">
           <div
@@ -34,8 +36,8 @@
             :device-type="deviceType"
             :sysId="optionValue"
             :scroll="{ y: 650 }"
-            :only-bouned-devices="onlyBounedDevices"
-            :show-history-curve="showHistoryCurve"
+            :only-bouned-devices="monitorHistoryConfig.onlyBounedDevices"
+            :show-history-curve="monitorHistoryConfig.showHistoryCurve"
           />
           <HandlerHistoryTable
             v-if="activeKey == 'handler_history'"
@@ -45,8 +47,15 @@
             :device-list-api="getHandlerList"
           />
 
-          <balancePressHandleHistoryVue :deviceId="optionValue" :device-type="deviceType" />
-          <balancePressAlarmHistory v-if="activeKey == 'faultRecord'" class="vent-margin-t-20" :deviceId="optionValue" :device-type="deviceType" />
+          <AlarmHistoryTable
+            v-if="activeKey == 'faultRecord'"
+            columns-type="alarm"
+            :device-type="deviceType"
+            :list="getAlarmList"
+            :sys-id="optionValue"
+            :device-list-api="workFaceDeviceList.bind(null, { id: optionValue })"
+            designScope="alarm-history"
+          />
         </div>
       </div>
     </div>
@@ -59,12 +68,13 @@
   import { ref, onMounted, onUnmounted } from 'vue';
   import { getDevice, sysList } from '../comment/comment.api';
   import BottomMenu from '/@/views/vent/comment/components/bottomMenu.vue';
-  import balancePressHome from './components/balancePressHome.vue';
-  import balancePressAlarmHistory from './components/balancePressAlarmHistory.vue';
+  // import balancePressHome from './components/balancePressHome.vue';
   import HistoryTable from '../comment/HistoryTable.vue';
   import HandlerHistoryTable from '../comment/HandlerHistoryTable.vue';
   import { useRouter } from 'vue-router';
   import { Config } from '../../deviceManager/configurationTable/types';
+  import { defHttp } from '/@/utils/http/axios';
+  import { workFaceDeviceList } from '../../deviceManager/comment/warningTabel/warning.api';
 
   type DeviceType = { deviceType: string; deviceName: string; datalist: any[] };
 
@@ -72,7 +82,7 @@
     defineProps<{
       mainTitle: string;
       /** 获取各表格配置时依赖的设备类型 */
-      deviceType: string;
+      // deviceType: string;
       /** 主要模块配置 */
       mainConfig: {
         configs: Config[];
@@ -80,7 +90,7 @@
       /** 历史数据配置 */
       monitorHistoryConfig: {
         /** 请求历史数据时传入的类型字符 */
-        historyColumns: string;
+        columnsType: string;
         /** 仅展示已绑定设备，选择是则从系统中获取sysId下已绑定设备。仅能查询到已绑定设备的历史数据 */
         onlyBounedDevices: boolean;
         /** 显示历史数据曲线图 */
@@ -89,10 +99,13 @@
       /** 操作历史配置 */
       handlerHistoryConfig: {
         /** 请求操作历史时传入的类型字符 */
-        handlerColumns: string;
+        columnsType: string;
       };
       /** 报警历史配置 */
-      alarmHistoryConfig: {};
+      alarmHistoryConfig: {
+        /** 请求报警历史时传入的类型字符 */
+        columnsType: string;
+      };
       /** 请求场景数据传入的类型字符 */
       strtype: string;
       /** 请求场景数据传入的页面类型字符 */
@@ -168,7 +181,11 @@
 
   /** 获取操作历史 */
   function getHandlerList() {
-    return sysList({ strtype: props.deviceType });
+    return sysList({ strtype: deviceType.value });
+  }
+
+  function getAlarmList() {
+    return (params) => defHttp.get({ url: '/safety/managesysAutoLog/list', params });
   }
 
   onMounted(() => {

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

@@ -1,223 +1,6 @@
 <template>
-  <customHeader :fieldNames="{ label: 'systemname', value: 'id', options: 'children' }" :options = 'options' @change="getSelectRow" :optionValue="optionValue">均压与低氧管控</customHeader>
-  <div class="bg"
-    style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden">
-    <a-spin :spinning="loading" />
-    <div id="balancePress3D" v-show="!loading" style="width: 100%; height: 100%; position: absolute; overflow: hidden"> </div>
-    <!-- <div id="damper3DCSS" v-show="!loading" style="width: 100%; height: 100%; top:0; left: 0; position: absolute; overflow: hidden;">
-      <div>
-        <div ref="elementContent" class="elementContent">
-          <p><span class="data-title">压力(Pa)：</span>{{selectData.frontRearDP}}</p>
-          <p><span class="data-title">动力源压力(MPa)：</span>{{selectData.sourcePressure}}</p>
-          <p><span class="data-title">故障诊断：</span>
-            <i
-              :class="{'state-icon': true, 'open': selectData.messageBoxStatus, 'close': !selectData.messageBoxStatus}"
-            ></i>{{selectData.fault}}</p>
-        </div>
-      </div>
-    </div> -->
-  </div>
-  <div class="scene-box">
-    <div class="center-container">
-      <balancePressHome v-if="activeKey == 'monitor'" :deviceId = 'optionValue' />
-      <div v-else class="history-group">
-        <div class="device-button-group" v-if="deviceList.length > 0">
-          <div class="device-button" :class="{ 'device-active': deviceActive == device.deviceType }" v-for="(device, index) in deviceList" :key="index" @click="deviceChange(index)">{{ device.deviceName }}</div>
-        </div>
-        <div class="history-container">
-          <balancePressHistory v-if="activeKey == 'monitor_history'" ref="historyTable" class="vent-margin-t-20" :deviceId = 'optionValue' :device-type="deviceType"/>
-          <balancePressHandleHistoryVue v-if="activeKey == 'handler_history'" ref="alarmHistoryTable" class="vent-margin-t-20" :deviceId = 'optionValue' :device-type="deviceType" />
-          <balancePressAlarmHistory v-if="activeKey == 'faultRecord'" ref="handlerHistoryTable" class="vent-margin-t-20" :deviceId = 'optionValue' :device-type="deviceType"/>
-        </div> 
-      </div>      
-    </div>
-    <BottomMenu @change="changeActive"/>
-  </div>
-  
+  <div></div>
 </template>
+<script setup lang="ts"></script>
 
-<script setup lang="ts">
-import customHeader from '/@/components/vent/customHeader.vue';
-import { onBeforeMount, ref, onMounted, onUnmounted, reactive, toRaw } from 'vue';
-import { list, getTableList } from './balancePress.api';
-import BottomMenu from '/@/views/vent/comment/components/bottomMenu.vue';
-import balancePressHome from './components/balancePressHome.vue';
-import balancePressHistory from './components/balancePressHistory.vue';
-import balancePressHandleHistoryVue from './components/balancePressHandleHistory.vue';
-import balancePressAlarmHistory from './components/balancePressAlarmHistory.vue';
-import { useRouter } from 'vue-router';
-
-type DeviceType = { deviceType: string, deviceName: string, datalist: any[] };
-
-const { currentRoute } = useRouter();
-const activeKey = ref('monitor');
-const loading = ref(false);
-
-const historyTable = ref()
-const alarmHistoryTable = ref()
-const handlerHistoryTable = ref()
-
-
-//关联设备
-const deviceList = ref<DeviceType[]>([])
-const deviceActive = ref('')
-const deviceType = ref('')
-
-const options = ref()
-const optionValue = ref('')
-
-
-function changeActive(activeValue) {
-  activeKey.value = activeValue
-}
-
-function deviceChange(index) {
-  deviceActive.value = deviceType.value = deviceList.value[index].deviceType
-}
-
-// 查询关联设备列表
-async function getDeviceList() {
-  const res = await list({ devicetype: 'sys', systemID: optionValue.value });
-  
-  const result = res.msgTxt;
-  const deviceArr = <DeviceType[]>[]
-  result.forEach(item => {
-    const data = item['datalist'].filter((data: any) => {
-      const readData = data.readData;
-      return Object.assign(data, readData);
-    })
-    if (item.type != 'sys') {
-      deviceArr.unshift({ deviceType: item.type, deviceName: item['typeName'] ? item['typeName'] : item['datalist'][0]['typeName'], datalist: data })
-    }
-  })
-  deviceList.value = deviceArr
-  deviceActive.value = deviceArr[0].deviceType
-  deviceChange(0)
-};
-
-async function getSysDataSource () {
-  const res = await getTableList({ strtype: 'sys_surface_junya', pagetype: 'normal' });
-  if (!options.value) {
-    // 初始时选择第一条数据
-    options.value = res.records || [];
-    if (!optionValue.value) {
-      optionValue.value = options.value[0]['id']
-      getDeviceList()
-    }
-  }
-};
-
-// 切换检测数据
-function getSelectRow(deviceID){
-  // const currentData = options.value.find((item: any) => {
-  //   return item.id == deviceID
-  // })
-  optionValue.value = deviceID
-  getDeviceList()
-}
-
-onBeforeMount(() => {
-
-});
-
-onMounted(async() => {
-  if (currentRoute.value && currentRoute.value['query'] && currentRoute.value['query']['id']) optionValue.value = currentRoute.value['query']['id']
-  await getSysDataSource()
-  
-});
-
-onUnmounted(() => {
- 
-});
-</script>
-<style lang="less" scoped>
-@import '/@/design/vent/modal.less';
-@ventSpace: zxm;
-.scene-box{
-  margin-top: 20px;
-  pointer-events: none;
-  .history-group{
-    padding: 0 20px;
-    .history-container{
-      position: relative;
-      background: #6195af1a;
-      width: calc(100% + 10px);
-      top: 0px;
-      left: -10px;
-      border: 1px solid #00fffd22;
-      padding: 10px 0;
-      box-shadow: 0 0 20px #44b4ff33 inset;
-    }
-  }
-  .device-button-group{
-    // margin: 0 20px;
-    display: flex;
-    pointer-events: auto;
-    position: relative;
-    margin-top: 90px;
-    &::after{
-      position:absolute;
-      content: '';
-      width: calc(100% + 10px);
-      height: 2px;
-      top: 30px;
-      left: -10px;
-      border-bottom: 1px solid #0efcff;
-    }
-    .device-button{
-      padding: 4px 15px;
-      position: relative;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      font-size: 14px;
-      
-      color: #fff;
-      cursor: pointer;
-      margin: 0 3px;
-
-      &::before{
-        content: '';
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        border: 1px solid #6176AF;
-        transform: skewX(-38deg);
-        background-color: rgba(0, 77, 103,85%);
-        z-index: -1;
-      }
-    }
-    .device-active{
-      // color: #0efcff;
-      &::before{
-        border-color: #0efcff;
-        box-shadow: 1px 1px 3px 1px #0efcff inset;
-      }
-    }
-  }
-}
-.center-container{
-  width: 100%;
-  height: calc(100% - 200px);
-}
-
-
-.input-box {
-  display: flex;
-  align-items: center;
-  padding-left: 10px;
-
-  .input-title {
-    color: #73e8fe;
-    width: auto;
-  }
-
-  .@{ventSpace}-input-number {
-    border-color: #ffffff88 !important;
-  }
-
-  margin-right: 10px;
-}
-</style>
+<style lang="scss" scoped></style>