Merge branch 'master' of http://182.92.126.35:3000/hrx/mky-vent-base

src/views/vent/monitorManager/balancePressMonitor/components/balancePressHistory.vue

@@ -7,12 +7,12 @@
       designScope="pressurefan_history"
       :scroll="{ y: 650 }"
       :only-bouned-devices="true"
-      :show-history-curve="showHistoryCurve"
+      :show-history-curve="true"
     />
   </div>
 </template>
 <script setup lang="ts">
-  import { defineProps, computed } from 'vue';
+  import { defineProps } from 'vue';
   import HistoryTable from '../../comment/HistoryTable.vue';
   // import { getTableList } from '../balancePress.api'
 
@@ -26,11 +26,6 @@
       required: true,
     },
   });
-
-  const showHistoryCurve = computed(() => {
-    const arr = ['safetymonitor', 'windrect'];
-    return arr.some((e) => props.deviceType.startsWith(e));
-  });
 </script>
 <style lang="less" scoped>
   .history-box {

src/views/vent/monitorManager/balancePressMonitor/index1.vue

@@ -1,232 +1,289 @@
 <template>
-  <customHeader :fieldNames="{ label: 'systemname', value: 'id', options: 'children' }" :options = 'options' @change="getSelectRow" :optionValue="optionValue">均压与低氧管控</customHeader>
+  <customHeader
+    :fieldNames="{ label: 'systemname', value: 'id', options: 'children' }"
+    :options="options"
+    @change="getSelectRow"
+    :optionValue="optionValue"
+    >均压与低氧管控</customHeader
+  >
 
   <div class="scene-box">
     <div class="center-container">
-      <balancePressHome2 v-if="activeKey == 'monitor'" :deviceId = 'optionValue' />
+      <balancePressHome2 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
+            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>      
+          <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"/>
+    <BottomMenu
+      :nav-list="[
+        {
+          title: '监控界面',
+          pathName: 'monitor',
+          isHover: false,
+        },
+        {
+          title: '历史监测记录',
+          pathName: 'monitor_history',
+          isHover: false,
+        },
+        {
+          title: '操作历史记录',
+          pathName: 'handler_history',
+          isHover: false,
+        },
+      ]"
+      @change="changeActive"
+    />
   </div>
-  <Vent2dModal v-if="activeKey == 'monitor'" style="width: 100%; height: 100%; position: fixed; top: 0px; left: 0px;" />
+  <Vent2dModal v-if="activeKey == 'monitor'" style="width: 100%; height: 100%; position: fixed; top: 0px; left: 0px" />
 </template>
 
 <script setup lang="ts">
-import customHeader from '/@/components/vent/customHeader.vue';
-import { onBeforeMount, ref, onMounted, onUnmounted, reactive, onBeforeUnmount } from 'vue';
-import { list, getTableList } from './balancePress.api';
-import BottomMenu from '/@/views/vent/comment/components/bottomMenu.vue';
-import balancePressHome2 from './components/balancePressHome2.vue';
-import balancePressHistory from './components/balancePressHistory.vue';
-import balancePressHandleHistoryVue from './components/balancePressHandleHistory.vue';
-import balancePressAlarmHistory from './components/balancePressAlarmHistory.vue';
-import { useRouter } from 'vue-router';
-import { unmountMicroApps } from '/@/qiankun';
-import Vent2dModal from '/@/components/vent/micro/ventModal2D.vue';
-import { getActions } from '/@/qiankun/state';
-
-type DeviceType = { deviceType: string, deviceName: string, datalist: any[] };
-const actions = getActions();
-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()
-    }
+  import customHeader from '/@/components/vent/customHeader.vue';
+  import { onBeforeMount, ref, onMounted, onUnmounted, reactive, onBeforeUnmount } from 'vue';
+  import { list, getTableList } from './balancePress.api';
+  import BottomMenu from '/@/views/vent/comment/components/bottomMenu.vue';
+  import balancePressHome2 from './components/balancePressHome2.vue';
+  import balancePressHistory from './components/balancePressHistory.vue';
+  import balancePressHandleHistoryVue from './components/balancePressHandleHistory.vue';
+  import balancePressAlarmHistory from './components/balancePressAlarmHistory.vue';
+  import { useRouter } from 'vue-router';
+  import { unmountMicroApps } from '/@/qiankun';
+  import Vent2dModal from '/@/components/vent/micro/ventModal2D.vue';
+  import { getActions } from '/@/qiankun/state';
+
+  type DeviceType = { deviceType: string; deviceName: string; datalist: any[] };
+  const actions = getActions();
+  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);
   }
-};
-
-// 切换检测数据
-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()
-  actions.onGlobalStateChange((newState) => {
-    const isMounted = newState['isMounted'];
-    if (isMounted) {
-      actions.setGlobalState({ isMounted: false, pageObj:{modalId: '1922122318615515138'} });
-      loading.value = false;
+
+  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();
+    actions.onGlobalStateChange((newState) => {
+      const isMounted = newState['isMounted'];
+      if (isMounted) {
+        actions.setGlobalState({ isMounted: false, pageObj: { modalId: '1922122318615515138' } });
+        loading.value = false;
+      }
+    });
+  });
+
+  onUnmounted(() => {});
+  onBeforeUnmount(() => {
+    unmountMicroApps(['/micro-vent-2dModal']);
   });
-  
-});
-
-onUnmounted(() => {
- 
-});
-onBeforeUnmount(() => {
-  unmountMicroApps(['/micro-vent-2dModal']);
-});
 </script>
 <style lang="less" scoped>
-@import '/@/design/vent/modal.less';
-@ventSpace: zxm;
-.scene-box{
-  width: 100%;
-  height: 100%;
-  margin-top: 20px;
-  pointer-events: none;
-  // position: relative;
-  // margin: 0 !important;
-  // padding:0 !important;
-
-  :deep(.left-box){
-    margin-top: 0px;
-  }
-  :deep(.right-box){
-    margin-top: 0px;
-  }
-  .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;
+  @import '/@/design/vent/modal.less';
+  @ventSpace: zxm;
+
+  @{theme-deepblue} {
+    .scene-box {
+      --image-border: url('/@/assets/images/themify/deepblue/fire/border.png');
     }
   }
-  .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;
+
+  .scene-box {
+    --image-border: url('/@/assets/images/fire/border.png');
+    width: 100%;
+    height: 100%;
+    margin-top: 20px;
+    pointer-events: none;
+    // position: relative;
+    // margin: 0 !important;
+    // padding:0 !important;
+
+    :deep(.left-box) {
+      margin-top: 0px;
     }
-    .device-button{
-      padding: 4px 15px;
-      position: relative;
+    :deep(.right-box) {
+      margin-top: 0px;
+    }
+    .history-group {
+      padding: 0 20px;
+      .history-container {
+        position: relative;
+        background: #6195af1a;
+        width: calc(100% + 10px);
+        top: 5px;
+        left: -10px;
+        // border: 1px solid #00fffd22;
+        padding: 10px 20px;
+        box-shadow: 0 0 20px #44b4ff33 inset;
+        background: var(--image-border) no-repeat center;
+        background-size: 100% 100%;
+        height: 692px;
+      }
+    }
+    .device-button-group {
+      // margin: 0 20px;
       display: flex;
-      justify-content: center;
-      align-items: center;
-      font-size: 14px;
-      
-      color: #fff;
-      cursor: pointer;
-      margin: 0 3px;
-
-      &::before{
-        content: '';
+      pointer-events: auto;
+      position: relative;
+      margin-top: 90px;
+      &::after {
         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;
+        content: '';
+        width: calc(100% + 10px);
+        height: 2px;
+        top: 30px;
+        left: -10px;
+        // border-bottom: 1px solid #0efcff;
       }
-    }
-    .device-active{
-      // color: #0efcff;
-      &::before{
-        border-color: #0efcff;
-        box-shadow: 1px 1px 3px 1px #0efcff inset;
+      .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);
-}
+  .center-container {
+    width: 100%;
+    height: calc(100% - 200px);
+  }
 
+  .input-box {
+    display: flex;
+    align-items: center;
+    padding-left: 10px;
 
-.input-box {
-  display: flex;
-  align-items: center;
-  padding-left: 10px;
+    .input-title {
+      color: #73e8fe;
+      width: auto;
+    }
 
-  .input-title {
-    color: #73e8fe;
-    width: auto;
-  }
+    .@{ventSpace}-input-number {
+      border-color: #ffffff88 !important;
+    }
 
-  .@{ventSpace}-input-number {
-    border-color: #ffffff88 !important;
+    margin-right: 10px;
   }
-
-  margin-right: 10px;
-}
 </style>

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

@@ -1,6 +1,6 @@
 <template>
   <div class="history-table" v-if="loading">
-    <BasicTable ref="historyTable" @register="registerTable" :data-source="dataSource">
+    <BasicTable ref="historyTable" @register="registerTable" :data-source="dataSource" :scroll="tableScroll">
       <template #bodyCell="{ column, record }">
         <a-tag v-if="column.dataIndex === 'warnFlag'" :color="record.warnFlag == '0' ? 'green' : 'red'">{{
           record.warnFlag == '0' ? '正常' : '报警'
@@ -22,18 +22,26 @@
         <a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXlsFn"> 导出</a-button>
       </template>
     </BasicTable>
-    <BarAndLine
-      v-if="showHistoryCurve"
-      :charts-columns="chartsColumns"
-      :option="{
-        legend: {
-          top: '5',
-        },
-      }"
-      :data-source="dataSource"
-      height="250px"
-      x-axis-prop-type="ttime"
-    />
+    <div class="history-chart">
+      <BarAndLine
+        v-if="showCurve"
+        :charts-columns="chartsColumns"
+        :option="{
+          legend: {
+            top: '5',
+          },
+          grid: {
+            top: 50,
+            left: 100,
+            right: 100,
+            bottom: 50,
+          },
+        }"
+        :data-source="dataSource"
+        height="290px"
+        x-axis-prop-type="ttime"
+      />
+    </div>
   </div>
 </template>
 
@@ -50,6 +58,8 @@
   import { render } from '/@/utils/common/renderUtils';
   import { useMethods } from '/@/hooks/system/useMethods';
   import BarAndLine from '/@/components/chart/BarAndLine.vue';
+  import { getDictItemsByCode } from '/@/utils/dict';
+  import { get } from 'lodash-es';
 
   const globalConfig = inject('globalConfig');
   const props = defineProps({
@@ -129,7 +139,6 @@
   const historyType = ref('');
   const deviceKide = ref('');
   const columns = ref([]);
-  const tableScroll = props.scroll.y ? ref({ y: props.scroll.y - 100 }) : ref({});
   let deviceOptions = ref([]);
   const deviceTypeStr = ref('');
   const deviceTypeName = ref('');
@@ -137,6 +146,17 @@
   const chartsColumns = ref([]);
   loading.value = true;
 
+  const selectedOption = computed<Record<string, any> | undefined>(() => {
+    let idval: string | undefined = getForm()?.getFieldsValue()?.gdeviceids;
+    if (VENT_PARAM.historyIsMultiple && idval) {
+      const arr = idval.split(',');
+      idval = arr[arr.length - 1];
+    }
+    return deviceOptions.value.find((e: any) => {
+      return e.value === idval;
+    });
+  });
+
   watch(
     () => {
       return props.columnsType;
@@ -188,21 +208,45 @@
     }
     if (props.showHistoryCurve) {
       const arr = type.split('_');
-      chartsColumns.value = getTableHeaderColumns(arr[0] + '_chart');
+      // 没错，又是安全监控。安全监控的单位无法一次定好，所以根据返回的数据协定单位
+      if (props.deviceType.startsWith('safetymonitor')) {
+        chartsColumns.value = getTableHeaderColumns(arr[0] + '_chart').map((e) => {
+          const unit = get(selectedOption.value, 'readData.unit', e.unit);
+          return {
+            ...e,
+            unit: unit,
+            seriesName: unit,
+          };
+        });
+      } else {
+        chartsColumns.value = getTableHeaderColumns(arr[0] + '_chart');
+      }
     }
     setColumns(columns.value);
   });
 
-  watch(
-    () => props.scroll.y,
-    (newVal) => {
-      if (newVal) {
-        tableScroll.value = { y: newVal - 100 };
-      } else {
-        tableScroll.value = {};
-      }
-    }
-  );
+  // 是否显示历史曲线，在devices_shows_history_curve字典里可以配置哪些设备类型需要显示曲线
+  // 字典内的字段可以是前缀，例如fanlocal之于fanlocal_normal
+  // 安全监控设备需要更多的配置，除去配置safetymonitor，还需要配置哪些安全监控设备需要曲线
+  // 因此可以配置例如A1001的dataTypeName代码（可以查看真实数据参考）
+  const historyCurveDicts = getDictItemsByCode('devices_shows_history_curve') || [];
+  const findDict = (str) => historyCurveDicts.some(({ value }) => str.startsWith(value));
+  const showCurve = computed(() => {
+    if (!props.showHistoryCurve) return false;
+    const dt = props.deviceType; // 依赖项
+
+    if (!findDict(dt)) return false;
+    if (!dt.startsWith('safetymonitor')) return true;
+
+    // 和字典的设备类型匹配后，如果是安全监控设备，需要额外的匹配安全监控类型
+    const dtns = get(selectedOption.value, 'readData.dataTypeName', ''); // 依赖项
+    return findDict(dtns);
+  });
+  const tableScroll = computed(() => {
+    if (props.scroll.y && showCurve.value) return { y: props.scroll.y - 450 };
+    if (props.scroll.y) return { y: props.scroll.y - 100 };
+    return {};
+  });
 
   // watch(stationType, (type) => {
   //   if (type) {
@@ -266,6 +310,7 @@
           strinstallpos: item['strinstallpos'],
           devicekind: item['devicekind'],
           stationtype: item['stationtype'],
+          readData: item['readData'],
         };
       });
 
@@ -362,7 +407,6 @@
       showActionColumn: false,
       bordered: false,
       size: 'small',
-      scroll: tableScroll,
       showIndexColumn: true,
       tableLayout: 'auto',
       formConfig: {
@@ -425,9 +469,12 @@
                     },
                     options: deviceOptions,
                     onChange: (e, option) => {
-                      if (option && (option['strinstallpos'] || option['strtype'] || option['devicekind']))
+                      if (option && (option['strinstallpos'] || option['strtype'] || option['devicekind'])) {
                         historyType.value = option['strtype'] || option['devicekind'];
-                      if (option['strtype']) deviceTypeStr.value = option['strtype'];
+                      }
+                      if (option['strtype']) {
+                        deviceTypeStr.value = option['strtype'];
+                      }
                       stationType.value = option['stationtype'];
                       nextTick(async () => {
                         await getDataSource();
@@ -609,4 +656,9 @@
       }
     }
   }
+
+  .history-chart {
+    background-color: #0090d822;
+    margin: 0 10px;
+  }
 </style>