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">
          <MonitorTable ref="monitorTable" :columnsType="`${deviceType}_monitor`" :dataSource="dataSource"
            design-scope="device_monitor" :isShowPagination="false" :isShowActionColumn="isHaveAction.includes(deviceType.split('_')[0]) ? false : true" :is-show-select="false" title="设备监测"
            :form-config="deviceType == 'safetymonitor' ? 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 ? 'default' : 'green'">{{
                record.netStatus == 0 ? '断开' : '连接'
              }}</a-tag>
            </template>
          </MonitorTable>
        </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" :device-list-api="getDeviceList.bind(null, { devicekind: deviceType })"
            designScope="device-history" @change="changeHis" />
        </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="报警历史">
        <div class="tab-item">
          <AlarmHistoryTable ref="alarmHistoryTable" v-if="activeKey == '3'" columns-type="alarm"
            :device-type="deviceType" :device-list-api="getDeviceList.bind(null, { devicekind: deviceType })"
            designScope="alarm-history" />
        </div>
      </a-tab-pane>
      <a-tab-pane key="4" tab="操作历史" v-if="deviceType !== 'safetymonitor'">
        <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 })"
            designScope="operator-history" />
        </div>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, shallowRef, defineProps, watch, nextTick, unref } from 'vue'
import BarAndLine from '/@/components/chart/BarAndLine.vue';
import { list, getDeviceList } from './safety.api'
import AlarmHistoryTable from '../comment/AlarmHistoryTable.vue';
import HistoryTable from '../comment/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, isHaveAction } from './safety.data'
import { getDictItemsByCode } from '/@/utils/dict';

// 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 = []
    const dataArr = res.msgTxt[0].datalist || [];
    dataArr.filter((data: any) => {
      const readData = data.readData;
      return Object.assign(data, readData);
    });
    if(deviceType.value == 'safetymonitor'){
      // 如果是安全监控的数据时需要过滤常见设备数据，根据设定的常用安全监控字典去匹配
      const dictCodes = getDictItemsByCode('safetynormal')
      const searchForm = formData.getFieldsValue()
      if(!searchForm['dataTypeName'] && dictCodes && dictCodes.length){
        for(let i=0; i< dictCodes.length; i++){
          const dict = dictCodes[i]
          dataArr.forEach((item) => {
            if(dict['value'] == item['dataTypeName']){
              dataSource.value.push(item)
            }
          })
        }
      }else{
        dataSource.value = dataArr
      }
    }else{
      dataSource.value = dataArr
    }
    

  } else {
    dataSource.value = []
  }
}

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);
    }
  }
}

: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>