vent-template/src/views/vent/monitorManager/sensorMonitor/index.vue

<template>
  <div class="sensor-container">
    <a-spin :spinning="loading">
      <a-tabs class="tabs-box" type="card" v-model:activeKey="activeKey" @change="tabChange">
        <a-tab-pane key="1" tab="实时监测">
          <div class="box-bg table-box" style="margin-bottom: 10px">
            <div>
              <label style="color: var(--vent-font-color)">设备类型：</label>
              <Select
                @change="handleSensorChange"
                :options="deviceTypeOption"
                :fieldNames="{ label: 'label', value: 'value' }"
                v-model:value="deviceKind"
                style="width: 200px; margin-bottom: 5px; color: black"
                placeholder="请选择设备类型"
                :allowClear="true"
              />
              <template v-if="deviceKind === 'modelsensor_multi' && sysOrgCode != 'hnjmypmk'">
                <a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXlsFns"> 导出</a-button>
              </template>
              <!--hnjmypmk 崖坪 特有 -->
              <template v-if="deviceKind === 'modelsensor_multi' && sysOrgCode === 'hnjmypmk'">
                <a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXlsFn"> 导出</a-button>
              </template>
              <MonitorTable
                ref="SensorMonitorRef"
                :is-show-select="true"
                :columnsType="deviceKind + '_monitor'"
                :dataSource="dataSource"
                design-scope="modelsensor_monitor"
                @select-row="getSelectRow"
                :deviceType="deviceKind"
                :scroll="{ y: chartsColumns.length > 0 ? 600 : 600 }"
                size="''"
                title="传感器监测"
              >
                <template #filterCell="{ column, record }">
                  <a-tag v-if="column.dataIndex === 'warnFlag'" :color="record.warnFlag == '0' ? 'green' : 'red'">{{
                    record.warnFlag == '0' ? '正常' : '报警'
                  }}</a-tag>
                  <a-tag v-if="column.dataIndex === 'netStatus'" :color="record.netStatus == '0' ? 'default' : 'green'">{{
                    record.netStatus == '0' ? '断开' : '连接'
                  }}</a-tag>
                </template>
              </MonitorTable>
            </div>
            <!-- v-if="chartsColumns.length > 0" -->
            <div class="charts-box" v-if="false">
              <BarAndLine
                :chartsColumnsType="selectData.deviceType"
                xAxisPropType="readTime"
                :dataSource="detailDataSource"
                height="300px"
                :chartsColumns="chartsColumns"
                chartsType="detail"
                :option="echartsOption"
                @refresh="refreshEchatrs"
              />
            </div>
          </div>
        </a-tab-pane>
        <a-tab-pane key="2" tab="历史数据">
          <div class="tab-item table-box box-bg padding-0" v-if="activeKey == '2'">
            <HistoryTable
              :columns-type="deviceKind"
              :device-type="deviceKind"
              :device-list-api="list.bind(null, { devicetype: selectData.deviceType })"
              @change="historyDataSourceChange"
              designScope="modelsensor-history"
              :scroll="{ y: chartsColumns.length > 0 ? 300 : 600 }"
            />
            <div class="charts-box" v-if="chartsColumns.length > 0">
              <!-- <BarAndLine
                :chartsColumnsType="selectData.deviceType"
                xAxisPropType="ttime"
                :dataSource="historyDataSource"
                height="300px"
                :chartsColumns="chartsColumns"
                chartsType="history"
                :option="echartsOption1"
                @refresh="refreshEchatrs"
              /> -->
              <!-- 设备历史数据组件测试代码 -->
              <DeviceHistoryChart
                :chartsColumnsType="selectData.deviceType"
                xAxisPropType="ttime"
                :dataSource="historyDataSource"
                height="300px"
                :chartsColumns="chartsColumns"
                chartsType="history"
                :option="echartsOption1"
                @refresh="refreshEchatrs"
              />
            </div>
          </div>
        </a-tab-pane>
        <a-tab-pane key="5" tab="近一月数据分析" v-if="!hasPermission('ventanalyAlarmAnalysis:noShow')">
          <div class="tab-item box-bg" style="margin-bottom: 10px">
            <div style="margin-top: 20px">
              <label style="color: var(--vent-font-color); margin-left: 20px">查询设备：</label>
              <Select
                :options="deviceTypeOption"
                :fieldNames="{ label: 'label', value: 'value' }"
                v-model:value="deviceKind"
                style="width: 200px; margin-bottom: 5px; color: black"
                placeholder="请选择传感器类型"
                :allowClear="true"
              />
              <Select
                @change="handleSensorChange1"
                :options="FxData"
                :fieldNames="{ label: 'strinstallpos', value: 'deviceID' }"
                v-model:value="strinstallpos"
                style="width: 200px; margin-bottom: 5px; margin-left: 5px; color: black"
                placeholder="请选择查询设备"
                :allowClear="true"
              />
              <a-button type="primary" style="margin-left: 5px" preIcon="ant-design:export-outlined" @click="onExportXlsFnFx">导出分析数据</a-button>
            </div>
            <div class="charts-box" v-if="chartsColumnsFx.length > 0">
              <BarAndLine
                :chartsColumnsType="selectData.deviceType"
                xAxisPropType="ttime"
                :dataSource="historyDataSource1"
                height="300px"
                :chartsColumns="chartsColumnsFx"
                chartsType="history"
                :option="echartsOption1"
                @refresh="refreshEchatrs"
              />
            </div>
            <div class="charts-box" v-else> <span style="color: aliceblue"> 暂无数据 </span> </div>
          </div>
        </a-tab-pane>
        <a-tab-pane key="3" tab="报警历史">
          <div class="tab-item box-bg" v-if="activeKey == '3'">
            <AlarmHistoryTable columns-type="alarm" device-type="modelsensor" designScope="alarm-history" />
          </div>
        </a-tab-pane>
        <a-tab-pane key="4" tab="报警分析">
          <div class="tab-item box-bg" v-if="activeKey == '4'">
            <warnAnalysis device-type="modelsensor" />
          </div>
        </a-tab-pane>
        <!-- <a-tab-pane key="4" tab="操作历史">
          <div class="tab-item box-bg">
            <HandlerHistoryTable columns-type="operator_history" device-type="modelsensor" designScope="alarm-history" />
          </div>
        </a-tab-pane> -->
      </a-tabs>
      <div class="title-text">
        {{ selectData.strinstallpos || selectData.strname }}
      </div>
    </a-spin>
  </div>
</template>

<script setup lang="ts">
import BarAndLine from '/@/components/chart/BarAndLine.vue';
import DeviceHistoryChart from '/@/components/chart/DeviceHistoryChart.vue';
import { Select } from 'ant-design-vue';
import { onBeforeMount, computed, ref, onMounted, onUnmounted, toRaw, reactive, nextTick, unref } from 'vue';
import MonitorTable from '../comment/MonitorTable.vue';
import HistoryTable from '../comment/HistoryTable.vue';
import AlarmHistoryTable from '../comment/AlarmHistoryTable.vue';
import warnAnalysis from '../comment/warnAnalysis.vue';
import { list, getTableList } from './sensor.api';
import { deviceList } from '../../deviceManager/comment/pointTabel/point.api';
import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
import { cloneDeep } from 'lodash-es';
import { useMethods } from '/@/hooks/system/useMethods';
import { useGlobSetting } from '/@/hooks/setting';
import { useRouter } from 'vue-router';
import { getDictItemsByCode } from '/@/utils/dict';
import { device } from '../../gas/gasPipeNet/gasPipeNet.api';
import { defHttp } from '/@/utils/http/axios';
import { usePermission } from '/@/hooks/web/usePermission';

const router = useRouter();
const { sysOrgCode } = useGlobSetting();
const { exportXlsPostBlob, exportXlsGetBlob } = useMethods();
const { hasPermission } = usePermission();
const SensorMonitorRef = ref();
const deviceBaseList = ref([]);
const activeKey = ref('1');
const deviceKind = ref('');
const deviceId = ref('');
const FxId = ref('');
const IDvalue = ref('');
const deviceTypeOption = ref([]);
// 默认初始是第一行
const selectRowIndex = ref(0);
const dataSource = ref([]);
interface DeviceItem {
  deviceID: string;
  strinstallpos: string;
}
const FxData = ref<any[]>([]);
const detailDataSource = ref<any[]>([]);
const historyDataSource = ref<any[]>([]);
const historyDataSource1 = ref<any[]>([]);
const chartsColumns = ref<any[]>([]);
const chartsColumnsFx = ref<any[]>([]);
const loading = ref(true);

const echartsOption = {
  grid: {
    top: '20%',
    left: '10px',
    right: '5px',
    bottom: '5%',
    containLabel: true,
  },
  toolbox: {
    feature: {},
  },
};
const echartsOption1 = {
  grid: {
    top: '20%',
    left: '10px',
    right: '5px',
    bottom: '10%',
    containLabel: true,
  },
  toolbox: {
    feature: {},
  },
};

const selectData = reactive({
  strname: '',
  deviceType: '',
  deviceID: '',
});

const tabChange = (activeKeyVal) => {
  activeKey.value = activeKeyVal;
  detailDataSource.value = [];
  if (activeKeyVal == 1) {
    nextTick(() => {
      SensorMonitorRef.value.setSelectedRowKeys([selectData.deviceID]);
    });
  }
};
// https获取监测数据
let timer: null | NodeJS.Timeout = null;
const getMonitor = (flag?) => {
  if (Object.prototype.toString.call(timer) === '[object Null]') {
    timer = setTimeout(
      async () => {
        await getDataSource(deviceKind.value);
        if (timer) {
          timer = null;
        }
        getMonitor();
      },
      flag ? 0 : 1000
    );
  }
};

const getDataSource = async (devicetype) => {
  const type = devicetype ? devicetype : 'modelsensor';
  const res = await list({ devicetype: type, pagetype: 'normal' });
  dataSource.value = res.msgTxt[0].datalist || [];
  dataSource.value.map((data: any) => {
    const readData = data.readData;
    data = Object.assign(data, readData);
    return data;
  });
  FxData.value = [];
  dataSource.value.forEach((item: DeviceItem) => {
    FxData.value.push({
      strinstallpos: item.strinstallpos, // 无报错
      deviceID: item.deviceID, // 无报错
    });
    IDvalue.value = item.strinstallpos;
  });
  const data: any = toRaw(dataSource.value[selectRowIndex.value]); //maxarea
  Object.assign(selectData, data);

  // if (chartsColumns.value.length <= 0 && selectData.deviceType) {
  //   handleChange(selectData.deviceType);
  // }a

  // 如果当前为监测tab
  if (activeKey.value === '1') {
    // const isHas = detailDataSource.value.find((item) => item['readTime'] === selectData['readTime']);
    // // 获取选中数据
    // if (!isHas) {
    //   if (detailDataSource.value.length < 15) {
    //     detailDataSource.value.push({ ...selectData });
    //   } else {
    //     detailDataSource.value.shift();
    //     detailDataSource.value.push({ ...selectData });
    //   }
    // }
    const dataList = cloneDeep(detailDataSource.value);
    if (dataList.length < 15) {
      dataList.push({ ...selectData });
    } else {
      dataList.shift();
      dataList.push({ ...selectData });
    }
    detailDataSource.value = dataList;
  }

  if (loading.value) {
    loading.value = false;
  }
  return data;
};

const getSelectRow = (selectRow, index) => {
  if (!selectRow) return;
  selectRowIndex.value = index;
  const baseData: any = deviceBaseList.value.find((baseData: any) => baseData.id === selectRow.deviceID);
  Object.assign(selectData, selectRow, baseData);
  if (selectData.deviceType) {
    // if (timer) {
    //   clearTimeout(timer);
    //   timer = undefined;
    // }
    if (activeKey.value === '1') detailDataSource.value = [];
    if (activeKey.value === '2') historyDataSource.value = [];
    handleChange(selectData.deviceType);
  }
};

// 获取设备基本信息列表
const getDeviceBaseList = () => {
  getTableList({ pageSize: 1000 }).then((res) => {
    deviceBaseList.value = res.records;
  });
};

function handleChange(type) {
  chartsColumns.value = getTableHeaderColumns(type + '_chart');
  console.log('[ type ] >', type, chartsColumns.value);
}
function handleChangeFx(type) {
  chartsColumnsFx.value = getTableHeaderColumns(type + '_chart-Fx');
  console.log('[ type ] >', type, chartsColumnsFx.value);
}
function handleSensorChange(type) {
  loading.value = true;
  handleChange(type);
  FxData.value = [];
  timer = null;
  dataSource.value = [];
  detailDataSource.value = [];
}
async function handleSensorChange1(id) {
  FxId.value = id;
  const result = await defHttp.get({
    url: '/safety/ventanalyMonitorData/getDeviceAvgData',
    params: {
      deviceId: id,
    },
  });
  result.forEach((item) => {
    handleChangeFx(item.deviceKind);
    item.ttime = item.createTime;
  });
  historyDataSource1.value = result || [];
}

function refreshEchatrs() {
  timer = null;
  // getMonitor(true);
  console.log('echarts 刷新');
}
function historyDataSourceChange(dataSource) {
  historyDataSource.value = dataSource;
  if (historyDataSource.value.length > 0) handleChange(historyDataSource.value[0].gdevicetype);
}

//导出
function onExportXlsFns() {
  // 判断时间间隔和查询时间区间，数据量下载大时进行提示
  const url = '/ventanaly-device/monitor/exportAllDeviceInfo';
  return exportXlsPostBlob('多参数报表', url, {
    devicetype: deviceKind.value,
    pagetype: 'normal',
  });
}

function onExportXlsFn() {
  // 判断时间间隔和查询时间区间，数据量下载大时进行提示
  const url = '/ventanaly-device/safety/reportInfo/expComReportByParam';
  return exportXlsPostBlob('多参数报表', url, {
    deviceKind: deviceKind.value.split('_')[0],
    deviceType: deviceKind.value,
    tempName: 'dcsbb',
  });
}
function onExportXlsFnFx() {
  // 判断时间间隔和查询时间区间，数据量下载大时进行提示
  const url = '/safety/ventanalyMonitorData/exportDeviceAvgData';
  return exportXlsGetBlob('分析数据报表', url, {
    deviceId: FxId.value,
  });
}

onBeforeMount(() => {
  getDeviceBaseList();
});

onMounted(async () => {
  let dictName = 'modelsensorkind';
  const route = unref(router.currentRoute);
  if (route.name) {
    const nameStrList = route.name.split('-');
    if (nameStrList.length > 0 && nameStrList[nameStrList.length - 1] !== 'sensorMonitor') {
      dictName = nameStrList[nameStrList.length - 1];
    }
  }
  const res = getDictItemsByCode(dictName);
  deviceTypeOption.value = res;
  deviceKind.value = deviceTypeOption.value[0]['value'];
  handleChange(deviceKind.value);
  await getMonitor(true);
});
onUnmounted(() => {
  if (timer) {
    clearTimeout(timer);
    timer = undefined;
  }
});
</script>
<style lang="less" scoped>
@import '/@/design/theme.less';
@import '/@/design/vent/modal.less';

.padding-0 {
  padding: 10px 0 !important;
}

.sensor-container {
  height: 100%;
  position: relative;
  top: 65px;
  padding: 10px;
  z-index: 999;

  // max-height: calc(100vh - 150px);
  .@{ventSpace}-tabs {
    max-height: calc(100% - 100px);

    .tab-item {
      max-height: calc(100% - 170px);
      overflow-y: auto;
    }
  }

  .title-text {
    position: absolute;
    top: -24px;
    left: 0;
    width: 100%;
    text-align: center;
    color: var(--vent-font-color);
  }

  .table-box {
    // height: calc(60% - 150px);
    height: 780px;
    padding: 20px 10px;
    overflow-y: auto;
  }

  .box-bg {
    // border: 1px solid #4d7ad855;
    // border-radius: 2px;
    // // background-color: #001d3055;
    // -webkit-backdrop-filter: blur(8px);
    // backdrop-filter: blur(8px);
    // box-shadow: 0 0 10px #5984e055 inset;
    // background-color: #00b3ff12;
    padding-bottom: 10px;
    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;
  }

  .table-box-content {
    height: 430px;
    background-color: #ffffff03;
    border-bottom: 1px solid #44d3ff70;
  }

  .charts-box {
    height: 300px;
    padding: 5px 10px;
    margin-top: 10px;
  }
}

:deep(.@{ventSpace}-tabs-tabpane-active) {
  height: 100%;
}

:deep(.@{ventSpace}-tabs-card) {
  .@{ventSpace}-tabs-tab {
    background: var(--vent-device-manager-control-btn-hover);
    border-color: #74e9fe;
    border-radius: 0%;

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

  .@{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%;
    background: #00000017 !important;
    border: 1px solid @vent-form-item-border !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: var(--vent-font-color) !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: var(--vent-base-border) !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;
    }
  }

  :deep(.vent-form) {
    .@{ventSpace}-select-dropdown {
      color: #000000 !important;
    }
  }
}
</style>