mky-vent-base/src/views/vent/monitorManager/safetyMonitor/index.vue

<template>
  <div class="device-box" id="monitorBox">
    <a-tabs class="tabs-box" type="card" v-model:activeKey="activeKey" @change="tabChange" id="tabsBox" v-if="isRefresh">
      <a-tab-pane key="1" tab="实时监测">
        <template v-if="deviceType == 'fan' && activeKey == '1'">
          <GroupMonitorTable :dataSource="dataSource" :columnsType="`${deviceType}_monitor`" />
        </template>
        <template v-else-if="activeKey == '1' && deviceType">
          <template v-if="hasPermission('btn:noGb')">
            <MonitorTable
              ref="monitorTable"
              :columnsType="`${deviceType}_monitor`"
              :dataSource="dataSource"
              design-scope="device_monitor"
              :isShowPagination="false"
              :isShowActionColumn="isHaveNoAction.includes(deviceType.split('_')[0]) ? false : true"
              :is-show-select="false"
              title="设备监测"
              :scroll="{ y: 650 }"
            >
              <template #filterCell="{ column, record }">
                <template v-if="deviceType.startsWith('safetymonitor')">
                  <div v-if="!record.devicename && column.dataIndex === 'devicename'">-</div>
                  <div v-if="!record.V && column.dataIndex === 'V'">-</div>
                  <div v-if="!record.PointUnit && column.dataIndex === 'PointUnit'">-</div>
                  <div v-if="!record.highRange && column.dataIndex === 'highRange'">-</div>
                  <div v-if="!record.lowRange && column.dataIndex === 'lowRange'">-</div>
                  <div v-if="!record.dataTypeName && column.dataIndex === 'dataTypeName'">-</div>
                </template>
                <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
                >
                <a-tag v-if="column.dataIndex === 'netStatus'" :color="record.netStatus == '0' ? '#f00' : 'green'">{{
                  record.netStatus == '0' ? '断开' : '连接'
                }}</a-tag>
              </template>
            </MonitorTable>
          </template>
          <template v-else>
            <MonitorTable
              ref="monitorTable"
              :columnsType="`${deviceType}_monitor`"
              :dataSource="dataSource"
              design-scope="device_monitor"
              :isShowPagination="false"
              :isShowActionColumn="isHaveNoAction.includes(deviceType.split('_')[0]) ? false : true"
              :is-show-select="false"
              title="设备监测"
              :form-config="deviceType == 'safetymonitor' && sysOrgCode != 'zjtzqctmk' ? formConfig : undefined"
              :scroll="{ y: 650 }"
            >
              <template #filterCell="{ column, record }">
                <template v-if="deviceType.startsWith('gate')">
                  <template v-if="record.frontGateOpenCtrl == 1 || record.frontGateOpenCtrl === true">
                    <a-tag v-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == 0 && record.frontGateClose == 0" color="red"
                      >正在打开</a-tag
                    >
                    <a-tag v-else-if="column.dataIndex === 'frontGateOpen'" color="processing">打开</a-tag>
                  </template>
                  <template v-else-if="record.frontGateOpenCtrl == 0 || record.frontGateOpenCtrl === false">
                    <a-tag v-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == 0 && record.frontGateClose == 0" color="red"
                      >正在关闭</a-tag
                    >
                    <a-tag v-else-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == 0 && record.frontGateClose == 1" color="default"
                      >关闭</a-tag
                    >
                    <a-tag v-else-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == 1 && record.frontGateClose == 0" color="default"
                      >打开</a-tag
                    >
                  </template>
                  <template v-if="record.rearGateOpenCtrl == 1 || record.rearGateOpenCtrl === true">
                    <a-tag v-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == 0 && record.rearGateClose == 0" color="red"
                      >正在打开</a-tag
                    >
                    <a-tag v-else-if="column.dataIndex === 'rearGateOpen'" color="processing">打开</a-tag>
                  </template>
                  <template v-else-if="record.rearGateOpenCtrl == 0 || record.rearGateOpenCtrl === false">
                    <a-tag v-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == 0 && record.rearGateClose == 0" color="red"
                      >正在关闭</a-tag
                    >
                    <a-tag v-else-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == 0 && record.rearGateClose == 1" color="default"
                      >关闭</a-tag
                    >
                    <a-tag v-else-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == 1 && record.rearGateClose == 0" color="default"
                      >打开</a-tag
                    >
                  </template>
                </template>
                <template v-if="deviceType.startsWith('windrect')">
                  <a-tag v-if="column.dataIndex === 'sign'" :color="record.sign == '0' ? '#95CF65' : record.sign == 1 ? '#4590EA' : '#9876AA'">
                    {{ record.sign == '0' ? '高位' : record.sign == 1 ? '中位' : '低位' }}</a-tag
                  >
                  <template v-if="record && column && column.dataIndex === 'isRun' && record.isRun">
                    <a-tag v-if="record.isRun == -2 || record.isRun == -1" :color="record.isRun == -2 ? '#95CF65' : '#ED5700'">{{
                      record.isRun == -2 ? '空闲' : '等待'
                    }}</a-tag>
                    <a-tag v-else-if="record.isRun == 100" color="#4693FF">完成</a-tag>
                    <Progress v-else :percent="Number(record.isRun)" size="small" status="active" />
                  </template>
                </template>
                <template v-if="deviceType.startsWith('safetymonitor')">
                  <div v-if="!record.devicename && column.dataIndex === 'devicename'">-</div>
                  <div v-if="!record.V && column.dataIndex === 'V'">-</div>
                  <div v-if="!record.PointUnit && column.dataIndex === 'PointUnit'">-</div>
                  <div v-if="!record.highRange && column.dataIndex === 'highRange'">-</div>
                  <div v-if="!record.lowRange && column.dataIndex === 'lowRange'">-</div>
                  <div v-if="!record.dataTypeName && column.dataIndex === 'dataTypeName'">-</div>
                </template>
                <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
                >
                <a-tag v-if="column.dataIndex === 'netStatus'" :color="record.netStatus == '0' ? '#f00' : 'green'">{{
                  record.netStatus == '0' ? '断开' : '连接'
                }}</a-tag>
              </template>
            </MonitorTable>
          </template>
          <!-- <MonitorTable
            ref="monitorTable"
            :columnsType="`${deviceType}_monitor`"
            :dataSource="dataSource"
            design-scope="device_monitor"
            :isShowPagination="false"
            :isShowActionColumn="isHaveNoAction.includes(deviceType.split('_')[0]) ? false : true"
            :is-show-select="false"
            title="设备监测"
            :form-config="deviceType == 'safetymonitor' && sysOrgCode != 'zjtzqctmk' ? formConfig : undefined"
            :scroll="{ y: 650 }"
          > -->
        </template>
        <!-- 图表 -->
        <!-- <div style="width:100%;height:280px;margin: 20px 0px;">
          <BarAndLine v-if="deviceType == 'windrect'" xAxisPropType="strname" :dataSource="dataSource" height="100%"
            :chartsColumns="chartsColumnsRect" chartsType="" :option="echartsOption" />
          <BarAndLine v-else-if="deviceType == 'fanlocal'" xAxisPropType="strname" :dataSource="dataSource" height="100%"
            :chartsColumns="chartsColumnsFan" chartsType="" :option="echartsOption" />
          <BarAndLine v-else-if="deviceType == 'fanmain'" xAxisPropType="strname" :dataSource="dataSource" height="100%"
            :chartsColumns="chartsColumnsMain" chartsType="" :option="echartsOption" />
          <BarAndLine v-else-if="deviceType == 'fiber'" xAxisPropType="strname" :dataSource="dataSource" height="100%"
            :chartsColumns="chartsColumnsFiber" chartsType="" :option="echartsOption" />
          <BarAndLine v-else-if="deviceType == 'obfurage'" xAxisPropType="strname" :dataSource="dataSource" height="100%"
            :chartsColumns="chartsColumnsObf" chartsType="" :option="echartsOption" />
          <BarAndLine v-else-if="deviceType == 'bundletube'" xAxisPropType="strname" :dataSource="dataSource"
            height="100%" :chartsColumns="chartsColumnsBun" chartsType="" :option="echartsOption" />
          <BarAndLine v-else xAxisPropType="strname" :dataSource="dataSource" height="100%"
            :chartsColumns="chartsColumnsreal" chartsType="" :option="echartsOption" />
        </div> -->
      </a-tab-pane>
      <a-tab-pane key="2" tab="历史数据">
        <div class="tab-item">
          <HistoryTable
            ref="historyTable"
            v-if="activeKey == '2'"
            :columns-type="`${deviceType}`"
            :device-type="deviceType"
            designScope="device-history"
          />
        </div>
        <!-- 图表 -->
        <!-- <div v-if="alive" style="width:100%;height:280px;margin: 20px 0px;">

          <BarAndLine v-if="deviceType == 'windrect'" xAxisPropType="gdevicename" :dataSource="dataSourceHis"
            height="100%" :chartsColumns="chartsColumnsRect" chartsType="" :option="echartsOption" />
          <BarAndLine v-else-if="deviceType == 'fanlocal'" xAxisPropType="gdevicename" :dataSource="dataSourceHis"
            height="100%" :chartsColumns="chartsColumnsFan" chartsType="" :option="echartsOption" />
          <BarAndLine v-else-if="deviceType == 'fanmain'" xAxisPropType="gdevicename" :dataSource="dataSourceHis"
            height="100%" :chartsColumns="chartsColumnsMain" chartsType="" :option="echartsOption" />
          <BarAndLine v-else-if="deviceType == 'fiber'" xAxisPropType="gdevicename" :dataSource="dataSourceHis"
            height="100%" :chartsColumns="chartsColumnsFiber" chartsType="" :option="echartsOption" />
          <BarAndLine v-else-if="deviceType == 'obfurage'" xAxisPropType="gdevicename" :dataSource="dataSourceHis"
            height="100%" :chartsColumns="chartsColumnsObf" chartsType="" :option="echartsOption" />
          <BarAndLine v-else-if="deviceType == 'bundletube'" xAxisPropType="gdevicename" :dataSource="dataSourceHis"
            height="100%" :chartsColumns="chartsColumnsBun" chartsType="" :option="echartsOption" />
          <BarAndLine v-else xAxisPropType="gdevicename" :dataSource="dataSourceHis" height="100%"
            :chartsColumns="chartsColumnsreal" chartsType="" :option="echartsOption" />
        </div> -->
      </a-tab-pane>

      <a-tab-pane key="3" tab="报警历史" v-if="!hasPermission('safety:hideWarning')">
        <div class="tab-item">
          <AlarmHistoryTable
            ref="alarmHistoryTable"
            v-if="globalConfig.History_Type == 'remote' && activeKey == '3'"
            columns-type="alarm"
            :list="safetyList"
            :device-type="deviceType"
            :device-list-api="getDeviceList.bind(null, { devicekind: deviceType, pageSize: 10000 })"
            designScope="alarm-history"
          />
          <AlarmHistoryCommentTable
            ref="alarmHistoryTable"
            v-else-if="activeKey == '3'"
            columns-type="alarm"
            :device-type="deviceType"
            :device-list-api="getDeviceList.bind(null, { devicekind: deviceType, pageSize: 10000 })"
            designScope="alarm-history"
          />
        </div>
      </a-tab-pane>
      <a-tab-pane key="4" tab="操作历史" v-if="deviceType !== 'safetymonitor' && deviceType !== 'wasichoufang'">
        <div class="tab-item">
          <HandlerHistoryTable
            ref="handlerHistoryTable"
            v-if="activeKey == '4'"
            columns-type="operator_history"
            :device-type="deviceType"
            :device-list-api="getDeviceList.bind(null, { devicekind: deviceType, pageSize: 10000 })"
            designScope="operator-history"
          />
        </div>
      </a-tab-pane>
    </a-tabs>
    <div class="export-btn"><div class="btn btn1" @click="exportData">一键导出</div></div>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted, onUnmounted, shallowRef, defineProps, watch, inject, unref } from 'vue';
  import BarAndLine from '/@/components/chart/BarAndLine.vue';
  import { list, getDeviceList, safetyList, getExportUrl } from './safety.api';
  import AlarmHistoryCommentTable from '../comment/AlarmHistoryTable.vue';
  import AlarmHistoryTable from './AlarmHistoryTable.vue';
  import HistoryTable from './HistoryTable.vue';
  import HandlerHistoryTable from '../comment/HandlerHistoryTable.vue';
  import MonitorTable from '../comment/MonitorTable.vue';
  import GroupMonitorTable from '../comment/GroupMonitorTable.vue';
  import { Progress } from 'ant-design-vue';
  import { useRouter } from 'vue-router';
  import { formConfig, isHaveNoAction } from './safety.data';
  import { getDictItemsByCode } from '/@/utils/dict';
  import { usePermission } from '/@/hooks/web/usePermission';
  import { useGlobSetting } from '/@/hooks/setting';
  import { useMethods } from '/@/hooks/system/useMethods';

  const { sysOrgCode } = useGlobSetting();
  const { hasPermission } = usePermission();
  const globalConfig = inject('globalConfig');

  const { handleExportXls } = useMethods();

  // import { BorderBox8 as DvBorderBox8 } from '@kjgl77/datav-vue3';

  // const echartsOption = {
  //   grid: {
  //     top: '60px',
  //     left: '10px',
  //     right: '25px',
  //     bottom: '5%',
  //     containLabel: true,
  //   },
  //   toolbox: {
  //     feature: {},
  //   },
  // };
  // let alive = ref(true)

  type DeviceType = { deviceType: string; deviceName: string; datalist: any[] };

  const props = defineProps({
    pageData: {
      type: Object,
      default: () => {},
    },
  });

  const scroll = {
    y: 360,
  };
  const monitorTable = ref();
  const historyTable = ref();
  const alarmHistoryTable = ref();
  const handlerHistoryTable = ref();

  const isRefresh = ref(true);

  const activeKey = ref('1'); // tab key
  const dataSource = shallowRef([]); // 实时监测数据
  const deviceType = ref(''); // 监测设备类型

  // let dataSourceHis = shallowRef([])//历史数据

  //历史数据
  async function changeHis(data) {
    // alive.value = false
    // nextTick(() => {
    //   dataSourceHis = data
    //   alive.value = true
    // })
  }

  async function tabChange(activeKeyVal) {
    activeKey.value = activeKeyVal;
    if (activeKey.value != '1') {
      if (timer != undefined) {
        clearTimeout(timer);
        timer = undefined;
      }
    } else {
      timer = null;
      await getMonitor(true);
    }
  }

  // https获取监测数据
  let timer: null | NodeJS.Timeout = null;
  function getMonitor(flag?) {
    if (deviceType.value) {
      if (timer) timer = null;
      if (Object.prototype.toString.call(timer) === '[object Null]') {
        timer = setTimeout(
          async () => {
            await getDataSource();
            if (timer) {
              getMonitor();
            }
          },
          flag ? 0 : 1000
        );
      }
    }
  }

  async function getDataSource() {
    const formData = monitorTable.value.getForm();
    const res = await list({ devicetype: deviceType.value, filterParams: { ...formData.getFieldsValue() } });
    if (res.msgTxt.length > 0) {
      dataSource.value = [];
      let dataArr = res.msgTxt[0].datalist || [];
      dataArr.filter((data: any) => {
        const readData = data.readData;
        return Object.assign(data, readData);
      });
      if (deviceType.value == 'safetymonitor') {
        // 如果是安全监控的数据时需要过滤常见设备数据，根据设定的常用安全监控字典去匹配
        let dictCodes = getDictItemsByCode('safetynormal');
        const searchForm = formData.getFieldsValue();
        if (searchForm && !searchForm['dataTypeName'] && dictCodes && dictCodes.length > 0) {
          const tempData = [];
          const tempData1 = [];
          for (let i = 0; i < dataArr.length; i++) {
            const item = dataArr[i];
            let flag = false;
            for (let i = 0; i < dictCodes.length; i++) {
              const dict = dictCodes[i];
              if (dict['value'] == item['dataTypeName']) {
                flag = true;
              }
            }
            if (flag) {
              tempData.push(item);
            } else {
              tempData1.push(item);
            }
          }
          if (sysOrgCode == 'zjtzqctmk' || hasPermission('btn:noGb')) {
            dataSource.value = [...tempData, ...tempData1];
          } else {
            dataSource.value = [...tempData];
          }
        } else {
          dataSource.value = dataArr;
        }
      } else {
        dataSource.value = dataArr;
      }
    } else {
      dataSource.value = [];
    }
  }

  function exportData() {
    handleExportXls('安全监控导出', getExportUrl);
  }

  onMounted(async () => {
    const { currentRoute } = useRouter();
    if (unref(currentRoute)) {
      const path = unref(currentRoute).path;
      if (path) {
        deviceType.value = path.substring(path.lastIndexOf('/') + 1);
      }
      await getMonitor(true);
    }
  });

  onUnmounted(() => {
    if (timer) {
      clearTimeout(timer);
    }
    timer = undefined;
  });
</script>

<style lang="less" scoped>
  @import '/@/design/vent/color.less';
  @import '/@/design/vent/modal.less';
  @ventSpace: zxm;

  .device-box {
    width: 100%;
    height: calc(100% - 100px);
    padding-bottom: 10px;
    margin-top: 20px;
    display: flex;
    justify-content: center;

    .tabs-box {
      width: calc(100% - 12px) !important;
      height: 100% !important;
      bottom: 3px !important;
    }

    .device-button-group {
      position: absolute;
      top: -30px;
      display: flex;
      width: 100%;

      .device-button {
        height: 26px;
        padding: 0 20px;
        background: linear-gradient(45deg, #04e6fb55, #0c5cab55);
        clip-path: polygon(10px 0, 0 50%, 10px 100%, 100% 100%, calc(100% - 10px) 50%, 100% 0);
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        position: relative;
        cursor: pointer;

        &:nth-child(1) {
          left: calc(-6px * 1);
        }

        &:nth-child(2) {
          left: calc(-6px * 2);
        }

        &:nth-child(3) {
          left: calc(-6px * 3);
        }

        &:nth-child(4) {
          left: calc(-6px * 4);
        }

        &:nth-child(5) {
          left: calc(-6px * 5);
        }

        &:nth-child(6) {
          left: calc(-6px * 6);
        }

        &:nth-child(7) {
          left: calc(-6px * 7);
        }

        &:nth-child(8) {
          left: calc(-6px * 8);
        }

        &:nth-child(9) {
          left: calc(-6px * 9);
        }

        &:nth-child(10) {
          left: calc(-6px * 10);
        }

        &:nth-child(11) {
          left: calc(-6px * 11);
        }

        &:nth-child(12) {
          left: calc(-6px * 12);
        }

        &:nth-child(13) {
          left: calc(-6px * 13);
        }

        &:nth-child(14) {
          left: calc(-6px * 14);
        }

        &:nth-child(15) {
          left: calc(-6px * 15);
        }

        &:first-child {
          clip-path: polygon(0 0, 10px 50%, 0 100%, 100% 100%, calc(100% - 10px) 50%, 100% 0);
        }
      }

      .device-active {
        background: linear-gradient(45deg, #04e6fb, #0c5cab);

        &::before {
          border-color: #0efcff;
          box-shadow: 1px 1px 3px 1px #0efcff inset;
        }
      }
    }

    .enter-detail {
      color: #fff;
      cursor: pointer;
      position: absolute;
      right: 120px;
      top: -6px;
      padding: 5px;
      border-radius: 5px;
      margin-left: 8px;
      margin-right: 8px;
      width: auto;
      height: 33px !important;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      padding: 5px 15px 5px 15px;
      cursor: pointer;

      &:hover {
        background: linear-gradient(#2cd1ff55, #1eb0ff55);
      }

      &::before {
        width: calc(100% - 6px);
        height: 27px;
        content: '';
        position: absolute;
        top: 3px;
        right: 0;
        left: 3px;
        bottom: 0;
        z-index: -1;
        border-radius: inherit;
        /*important*/
        background: linear-gradient(#1fa6cb, #127cb5);
      }
    }
  }
  .export-btn {
    position: absolute;
    color: #fff;
    right: 20px;
    .btn {
      padding: 8px 20px;
      position: relative;
      border-radius: 2px;
      color: #fff;
      width: fit-content;
      cursor: pointer;

      &::before {
        position: absolute;
        display: block;
        content: '';
        width: calc(100% - 4px);
        height: calc(100% - 4px);
        top: 2px;
        left: 2px;
        border-radius: 2px;
        z-index: -1;
      }
    }

    .btn1 {
      border: 1px solid #5cfaff;

      &::before {
        background-image: linear-gradient(#2effee92, #0cb1d592);
      }

      &:hover {
        border: 1px solid #5cfaffaa;

        &::before {
          background-image: linear-gradient(#2effee72, #0cb1d572);
        }
      }
    }
  }

  :deep(.@{ventSpace}-tabs-tabpane-active) {
    height: 100%;
    border: 1px solid #44d3ff70;
    border-radius: 2px;
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 0 20px #44b4ff33 inset;
    background-color: #ffffff11;
    overflow-y: auto;
  }

  :deep(.@{ventSpace}-tabs-card) {
    .@{ventSpace}-tabs-tab {
      background: linear-gradient(#2cd1ff55, #1eb0ff55);
      border-color: #74e9fe;
      border-radius: 0%;

      &:hover {
        color: #64d5ff;
      }
    }

    .@{ventSpace}-tabs-content {
      height: 100% !important;
    }

    .@{ventSpace}-tabs-tab.@{ventSpace}-tabs-tab-active .@{ventSpace}-tabs-tab-btn {
      color: aqua;
    }

    .@{ventSpace}-tabs-nav::before {
      border-color: #74e9fe;
    }

    .@{ventSpace}-picker,
    .@{ventSpace}-select-selector {
      width: 100% !important;
      background: #00000017 !important;
      border: 1px solid @vent-form-item-boder !important;

      input,
      .@{ventSpace}-select-selection-item,
      .@{ventSpace}-picker-suffix {
        color: #fff !important;
      }

      .@{ventSpace}-select-selection-placeholder {
        color: #b7b7b7 !important;
      }
    }

    .@{ventSpace}-pagination-next,
    .action,
    .@{ventSpace}-select-arrow,
    .@{ventSpace}-picker-separator {
      color: #fff !important;
    }

    .@{ventSpace}-table-cell-row-hover {
      background: #264d8833 !important;
    }

    .@{ventSpace}-table-row-selected {
      background: #00c0a311 !important;

      td {
        background-color: #00000000 !important;
      }
    }

    .@{ventSpace}-table-thead {
      // background: linear-gradient(#004a8655 0%, #004a86aa 10%) !important;
      background: #3d9dd45d !important;

      & > tr > th,
      .@{ventSpace}-table-column-title {
        // color: #70f9fc !important;
        border-color: #84f2ff !important;
        border-left: none !important;
        border-right: none !important;
        padding: 7px;
      }
    }

    .@{ventSpace}-table-tbody {
      tr > td {
        padding: 12px;
      }
    }

    .@{ventSpace}-table-tbody > tr:hover.@{ventSpace}-table-row > td {
      background-color: #26648855 !important;
    }

    .jeecg-basic-table-row__striped {
      // background: #97efff11 !important;
      td {
        background-color: #97efff11 !important;
      }
    }
  }
</style>