src/views/vent/monitorManager/deviceMonitor/components/device/modal/fiber.modal.yjl.vue

@@ -0,0 +1,406 @@
+<template>
+  <BasicModal v-bind="$attrs" @register="register" :title="`光纤测温详情    ${currentTime}`" width="1200px" @ok="handleOk" @cancel="handleCancel">
+    <div class="fiber-modal">
+      <div class="modal-left">
+        <div
+          v-for="device in deviceList"
+          class="link-item"
+          :class="{ 'active-device-title': device.deviceID === activeDeviceID }"
+          :key="device.deviceID"
+        >
+          <span class="" @click="selectDevice(device.deviceID)">{{ device.strinstallpos }}</span>
+        </div>
+      </div>
+      <div class="modal-right">
+        <div class="right-top">
+          <div class="top-item">
+            <div class="icon">
+              <SvgIcon class="icon-style max-temperature" size="38" name="max-temperature" />
+            </div>
+            <div class="item-container">
+              <div class="title">最高温度</div>
+              <div class="value">{{ posMonitor.fmax || '--' }} <span>℃</span> </div>
+            </div>
+          </div>
+          <div class="top-item">
+            <div class="icon">
+              <SvgIcon class="icon-style min-temperature" size="38" name="min-temperature" />
+            </div>
+            <div class="item-container">
+              <div class="title">最低温度</div>
+              <div class="value">{{ posMonitor.fmin || '--' }} <span>℃</span></div>
+            </div>
+          </div>
+          <div class="top-item">
+            <div class="icon">
+              <SvgIcon class="icon-style aveg-temperature" size="38" name="aveg-temperature" />
+            </div>
+            <div class="item-container">
+              <div class="title">平均温度</div>
+              <div class="value">{{ posMonitor.favg || '--' }} <span>℃</span></div>
+            </div>
+          </div>
+          <div class="top-item warning-box">
+            <div class="icon">
+              <SvgIcon class="icon-style" size="38" name="risk-level" />
+            </div>
+            <div class="item-container">
+              <div class="title">风险等级</div>
+              <div class="warning-value">低风险</div>
+            </div>
+          </div>
+        </div>
+        <div class="right-bottom">
+          <span class="base-title">测点监测曲线</span>
+          <div class="echarts-box">
+            <BarAndLine xAxisPropType="pos" :dataSource="posList" height="100%" :chartsColumns="chartsColumns" :option="echatsOption" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </BasicModal>
+</template>
+<script lang="ts">
+  import { defineComponent, ref, watch, shallowRef, reactive } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import BarAndLine from '/@/components/chart/BarAndLine.vue';
+  import { SvgIcon } from '/@/components/Icon';
+  import { Decoration7 as DvDecoration7, ScrollBoard as DvScrollBoard } from '@kjgl77/datav-vue3';
+  import dayjs from 'dayjs';
+  import { forIn } from 'lodash-es';
+
+  export default defineComponent({
+    components: { BasicModal, BarAndLine, SvgIcon, DvScrollBoard, DvDecoration7 },
+    props: {
+      dataSource: { type: Array },
+      activeID: { type: String },
+    },
+    setup(props) {
+      const currentTime = ref(dayjs().format('YYYY-MM-DD HH:mm:ss'));
+      const modelRef = ref({});
+      const loading = ref(true);
+      const activeDeviceID = ref<any>('');
+      const deviceList = ref<any[]>([]);
+      // const posList = reactive<any[]>([]);
+      const posList = ref<any[]>([]);
+      const posMonitor = shallowRef({});
+
+      const echatsOption = {
+        grid: {
+          top: '10%',
+          left: '2px',
+          right: '10px',
+          bottom: '3%',
+          containLabel: true,
+        },
+        toolbox: {
+          feature: {},
+        },
+      };
+
+      const chartsColumns = [
+        {
+          legend: '温度',
+          seriesName: '(℃)',
+          ymax: 100,
+          yname: '℃',
+          linetype: 'line',
+          yaxispos: 'left',
+          color: '#FDB146',
+          sort: 1,
+          xRotate: 0,
+          dataIndex: 'value',
+        },
+      ];
+
+      const [register, { setModalProps, closeModal }] = useModalInner();
+
+      function handleVisibleChange(visible) {
+        if (visible) {
+          loading.value = true;
+          setModalProps({ loading: true, confirmLoading: true });
+
+          setTimeout(() => {
+            loading.value = false;
+            setModalProps({ loading: false, confirmLoading: false });
+          }, 1000);
+        }
+      }
+
+      // 选择监测
+      function selectDevice(id) {
+        loading.value = true;
+        setModalProps({ loading: true, confirmLoading: true });
+        setTimeout(() => {
+          loading.value = false;
+          activeDeviceID.value = id;
+          setModalProps({ loading: false, confirmLoading: false });
+        }, 300);
+      }
+
+      function handleOk(e) {
+        e.preventDefault();
+        closeModal();
+      }
+
+      function handleCancel(e) {
+        e.preventDefault();
+        closeModal();
+      }
+
+      watch([() => props.dataSource, () => props.activeID], ([newDataSource, newActiveID], [oldDataSource, oldActiveID]) => {
+        console.log(newDataSource, 'newDataSource--------------');
+        deviceList.value = newDataSource as any[];
+        if (newActiveID != oldActiveID) {
+          activeDeviceID.value = newActiveID as string;
+        }
+        // activeDeviceID.value = activeDeviceID.value ? activeDeviceID.value : newActiveID;
+        newDataSource?.forEach((item: any, index) => {
+          if ((!activeDeviceID.value && index == 0) || item.deviceID === activeDeviceID.value) {
+            posMonitor.value = item.readData;
+            const posArr: any[] = [];
+            forIn(item.readData, (key, value) => {
+              if (key.startsWith('TemDataPoints')) {
+                const index = Number(key.split('_')[0].split('TemDataPoints')[1]);
+                if (!posArr[index]) posArr[index] = value;
+              }
+            });
+            posMonitor.value['fmax'] = Math.max(...posArr);
+            posMonitor.value['fmin'] = Math.min(...posArr);
+            posMonitor.value['favg'] = posArr.reduce((a, b) => a + b, 0) / posArr.length;
+            const posListTemp: { pos: string; value: any }[] = [];
+            posArr.forEach((item, index) => {
+              if (item) {
+                posListTemp.push({ pos: '测点' + index, value: item });
+              }
+            });
+            posList.value = posListTemp;
+          }
+        });
+      });
+
+      return {
+        register,
+        model: modelRef,
+        currentTime,
+        handleVisibleChange,
+        selectDevice,
+        handleOk,
+        handleCancel,
+        deviceList,
+        activeDeviceID,
+        posMonitor,
+        echatsOption,
+        chartsColumns,
+        posList,
+      };
+    },
+  });
+</script>
+<style lang="less" scoped>
+  .fiber-modal {
+    width: 100%;
+    height: 650px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+
+    .modal-left {
+      width: 200px;
+      height: 100%;
+      overflow-y: auto;
+      background: #ffffff11;
+      padding: 5px;
+      border-radius: 5px;
+
+      .active-device-title {
+        color: aqua;
+      }
+
+      .link-item {
+        position: relative;
+        cursor: pointer;
+        line-height: 30px;
+        padding-left: 30px;
+
+        span:hover {
+          color: #89ffff;
+        }
+
+        &::after {
+          content: '';
+          position: absolute;
+          display: block;
+          width: 8px;
+          height: 8px;
+          top: 12px;
+          left: 10px;
+          transform: rotateZ(45deg) skew(10deg, 10deg);
+          background: #45d3fd;
+        }
+      }
+    }
+
+    .modal-right {
+      width: calc(100% - 220px);
+      overflow-y: auto;
+
+      .base-title {
+        line-height: 32px;
+        position: relative;
+        padding-left: 20px;
+
+        &::after {
+          content: '';
+          position: absolute;
+          display: block;
+          width: 4px;
+          height: 12px;
+          top: 4px;
+          left: 10px;
+          background: #45d3fd;
+          border-radius: 4px;
+        }
+      }
+
+      .right-top {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        .top-item {
+          width: 200px;
+          height: 80px;
+          display: flex;
+          flex-direction: row;
+          justify-content: center;
+          border: 1px solid rgba(25, 237, 255, 0.4);
+          box-shadow: inset 0 0 10px rgba(0, 197, 255, 0.6);
+          background: rgba(0, 0, 0, 0.06666666666666667);
+          padding-top: 16px;
+
+          .icon {
+            margin-right: 10px;
+            margin-top: 5px;
+            color: #fdb146;
+          }
+
+          .item-container {
+            width: 100px;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+
+            div {
+              text-align: center;
+            }
+
+            .title {
+              font-size: 18px;
+            }
+
+            .value {
+              text-shadow: 0 0 25px #00fbfe;
+              background: linear-gradient(0deg, #45d3fd, #45d3fd, #61ddb1, #61ddb1);
+              font-style: normal;
+              background-size: cover;
+              font-family: electronicFont;
+              font-size: 30px;
+              -webkit-background-clip: text;
+              background-clip: text;
+              -webkit-text-fill-color: transparent;
+              position: relative;
+              top: -8px;
+
+              span {
+                font-family: Arial, Helvetica, sans-serif;
+                font-size: 18px;
+                color: aliceblue;
+              }
+            }
+          }
+        }
+
+        .warning-box {
+          padding-top: 0px;
+
+          .icon {
+            margin-top: 20px;
+
+            .icon-style {
+              color: #fdb146;
+            }
+          }
+
+          .warning-value {
+            font-size: 18px;
+            color: #61ddb1;
+          }
+        }
+      }
+
+      // .right-center {
+      //   margin-top: 20px;
+      //   display: flex;
+      //   flex-direction: row;
+      //   justify-content: space-between;
+
+      //   .table-box {
+      //     position: relative;
+      //     width: 500px;
+      //     height: 250px;
+      //     :deep(.zxm-table-wrapper) {
+      //       height: 220px !important;
+      //       background: #ffffff05 !important;
+      //       border-bottom: 1px solid #91e9fe80 !important;
+      //     }
+      //   }
+
+      //   .warning-box {
+      //     width: calc(100% - 520px);
+
+      //     .warning-container {
+      //       width: 100%;
+      //       height: convert;
+      //       background: #009acd00;
+
+      //       :deep(.dv-scroll-board) {
+      //         .row-item {
+      //           height: 40px !important;
+      //           line-height: 40px !important;
+      //         }
+
+      //         .header-item {
+      //           border-top: 1px solid #91e9fe !important;
+      //           border-bottom: 1px solid #91e9fe !important;
+      //         }
+      //       }
+      //     }
+      //   }
+      // }
+
+      .right-bottom {
+        margin-top: 20px;
+        height: calc(100% - 100px);
+
+        .echarts-box {
+          width: 100%;
+          height: calc(100% - 32px);
+        }
+      }
+    }
+  }
+
+  :deep(.zxm-table-body) {
+    border: 1px solid rgba(57, 232, 255, 0.2) !important;
+
+    .zxm-table-tbody > tr > td {
+      border: none !important;
+    }
+  }
+
+  :deep(.zxm-table-cell) {
+    border-right: none !important;
+  }
+</style>

src/views/vent/monitorManager/gateMonitor/components/AlarmHistoryTableHj.vue

@@ -0,0 +1,179 @@
+<template>
+  <div class="alarm-history-table">
+    <BasicTable ref="alarmHistory" @register="registerTable">
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.dict">
+          <!-- 除了 101（蓝色预警）其他都是红色字体 -->
+          <span v-if="column.dataIndex === 'nwartype'" :class="{ 'color-#ff3823': ['102', '103', '104', '201', '1001'].includes(record.nwartype) }">
+            {{ render.renderDictText(record.nwartype, 'leveltype') || '-' }}
+          </span>
+          <span v-else>
+            {{ render.renderDictText(record[column.dataIndex], column.dict) || '-' }}
+          </span>
+        </template>
+      </template>
+    </BasicTable>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  //ts语法
+  import { watch, ref, defineExpose, inject, onMounted } from 'vue';
+  import { BasicTable, BasicColumn } from '/@/components/Table';
+  import { useListPage } from '/@/hooks/system/useListPage';
+  import { defHttp } from '/@/utils/http/axios';
+  import dayjs from 'dayjs';
+  import { getAutoScrollContainer } from '/@/utils/common/compUtils';
+  import { render } from '/@/utils/common/renderUtils';
+
+  const props = defineProps({
+    scroll: {
+      type: Object,
+      default: { y: 0 },
+    },
+    list: {
+      type: Function,
+      default: (params) => defHttp.get({ url: '/safety/ventanalyAlarmLog/getHZGateAlarmLog', params }),
+    },
+  });
+
+  const alarmHistory = ref();
+  const columns: BasicColumn[] = [
+    {
+      title: '安装地点',
+      dataIndex: 'content',
+      width: 300,
+      align: 'center',
+    },
+    {
+      title: '报警事件',
+      dataIndex: 'createTime',
+      width: 300,
+      align: 'center',
+    },
+  ];
+
+  const tableScroll = props.scroll.y ? ref({ y: props.scroll.y - 100 }) : ref({});
+
+  watch(
+    () => props.scroll.y,
+    (newVal) => {
+      if (newVal) {
+        tableScroll.value = { y: newVal - 100 };
+      } else {
+        tableScroll.value = {};
+      }
+    }
+  );
+
+  // 列表页面公共参数、方法
+  const { tableContext, onExportXls } = useListPage({
+    tableProps: {
+      api: props.list,
+      columns: columns,
+      canResize: true,
+      showTableSetting: false,
+      showActionColumn: false,
+      bordered: false,
+      size: 'small',
+      scroll: tableScroll,
+      showIndexColumn: true,
+      formConfig: {
+        showAdvancedButton: false,
+        // autoAdvancedCol: 2,
+        schemas: [
+          {
+            field: 'createTime_begin',
+            label: '开始时间',
+            component: 'DatePicker',
+            defaultValue: dayjs().add(-30, 'day').format('YYYY-MM-DD HH:mm:ss'),
+            required: true,
+            componentProps: {
+              showTime: true,
+              valueFormat: 'YYYY-MM-DD HH:mm:ss',
+              getPopupContainer: getAutoScrollContainer,
+            },
+            colProps: {
+              span: 4,
+            },
+          },
+          {
+            field: 'createTime_end',
+            label: '结束时间',
+            component: 'DatePicker',
+            defaultValue: dayjs(),
+            required: true,
+            componentProps: {
+              showTime: true,
+              valueFormat: 'YYYY-MM-DD HH:mm:ss',
+              getPopupContainer: getAutoScrollContainer,
+            },
+            colProps: {
+              span: 4,
+            },
+          },
+          {
+            label: '查询设备',
+            field: 'deviceid',
+            component: 'Input',
+            colProps: {
+              span: 4,
+            },
+          },
+        ],
+      },
+      fetchSetting: {
+        listField: 'records',
+      },
+      pagination: {
+        current: 1,
+        pageSize: 10,
+        pageSizeOptions: ['10', '30', '50', '100'],
+      },
+    },
+  });
+  //注册table数据
+  const [registerTable, { setLoading }] = tableContext;
+
+  onMounted(async () => {});
+
+  defineExpose({ setLoading });
+</script>
+
+<style scoped lang="less">
+  @ventSpace: zxm;
+
+  :deep(.ventSpace-table-body) {
+    height: auto !important;
+  }
+  :deep(.zxm-picker) {
+    height: 30px !important;
+  }
+  .alarm-history-table {
+    width: 100%;
+    :deep(.jeecg-basic-table-form-container) {
+      .@{ventSpace}-form {
+        padding: 0 !important;
+        border: none !important;
+        margin-bottom: 0 !important;
+        .@{ventSpace}-picker,
+        .@{ventSpace}-select-selector {
+          width: 100% !important;
+          background: #00000017;
+          border: 1px solid #b7b7b7;
+          input,
+          .@{ventSpace}-select-selection-item,
+          .@{ventSpace}-picker-suffix {
+            color: #fff;
+          }
+          .@{ventSpace}-select-selection-placeholder {
+            color: #ffffffaa;
+          }
+        }
+      }
+      .@{ventSpace}-table-title {
+        min-height: 0 !important;
+      }
+    }
+  }
+</style>