vent-template/src/views/vent/monitorManager/comment/DeviceEcharts.vue

<template>
  <div class="charts-container">
    <a-select ref="select" v-model:value="chartsType" size="small" style="position: absolute; z-index: 99; top: 2px; left: 2px; width: 98px">
      <a-select-option value="listMonitor">实时监测</a-select-option>
      <a-select-option value="detail">详情监测</a-select-option>
      <a-select-option value="history">历史记录</a-select-option>
    </a-select>

    <div class="charts-box" v-if="chartsType === 'listMonitor'" style="position: absolute; top: 20px">
      <BarAndLine
        :chartsColumnsType="chartsColumnsType"
        :xAxisPropType="xAxisPropType"
        :dataSource="dataSource"
        height="100%"
        chartsType="listMonitor"
        :option="echartsOption"
        :chartsColumns="chartsColumns"
      />
    </div>
    <div class="charts-box" v-else-if="chartsType === 'detail' && deviceListApi">
      <Select
        :options="options"
        :fieldNames="{ label: 'strname', value: 'deviceID' }"
        v-model:value="deviceId"
        placeholder="请选择查看的设备"
        size="small"
        style="position: absolute; z-index: 99; left: 102px; width: 150px; top: 2px"
      />
      <BarAndLine
        :chartsColumnsType="chartsColumnsType"
        :xAxisPropType="resultXAxisPropType"
        :dataSource="detailDataSource"
        height="100%"
        :option="echartsOption2"
        chartsType="detail"
        :chartsColumns="chartsColumns"
      />
    </div>
    <div class="charts-box" v-else-if="chartsType === 'history'">
      <Select
        :options="options"
        :fieldNames="{ label: 'strname', value: 'deviceID' }"
        v-model:value="deviceId"
        placeholder="请选择查看的设备"
        size="small"
        style="position: absolute; z-index: 99; left: 102px; width: 150px; top: 2px"
      />
      <template v-if="globalConfig.History_Type == 'vent'">
        <a-date-picker
          v-model:value="historyParams.ttime_begin"
          valueFormat="YYYY-MM-DD HH:mm:ss"
          placeholder="请选择开始日期"
          size="small"
          :showTime="true"
          style="position: absolute; z-index: 99; left: 254px; width: 170px; top: 2px"
        />
        <a-date-picker
          v-model:value="historyParams.ttime_end"
          valueFormat="YYYY-MM-DD HH:mm:ss"
          placeholder="请选择结束日期"
          size="small"
          :showTime="true"
          style="position: absolute; z-index: 99; left: 426px; width: 170px; top: 2px"
        />
        <a-select
          ref="select"
          v-model:value="historyParams.skip"
          placeholder="请选择间隔时间"
          size="small"
          style="position: absolute; z-index: 99; top: 2px; left: 598px; width: 150px"
        >
          <a-select-option value="1">1秒</a-select-option>
          <a-select-option value="2">5秒</a-select-option>
          <a-select-option value="3">10秒</a-select-option>
          <a-select-option value="4">30分钟</a-select-option>
          <a-select-option value="5">1分钟</a-select-option>
          <a-select-option value="6">10分钟</a-select-option>
          <a-select-option value="7">30分钟</a-select-option>
          <a-select-option value="8">1小时</a-select-option>
        </a-select>
      </template>
      <template v-else>
        <a-date-picker
          v-model:value="historyParams.ttime_begin"
          valueFormat="YYYY-MM-DD HH:mm:ss"
          placeholder="开始时间"
          size="small"
          :showTime="true"
          style="position: absolute; z-index: 99; left: 254px; width: 170px; top: 2px"
        />
        <a-date-picker
          v-model:value="historyParams.ttime_end"
          valueFormat="YYYY-MM-DD HH:mm:ss"
          placeholder="结束时间"
          size="small"
          :showTime="true"
          style="position: absolute; z-index: 99; left: 426px; width: 170px; top: 2px"
        />
        <a-select
          ref="select"
          v-model:value="historyParams.interval"
          placeholder="请选择间隔时间"
          size="small"
          style="position: absolute; z-index: 99; top: 2px; left: 598px; width: 150px"
        >
          <a-select-option value="1s">1秒</a-select-option>
          <a-select-option value="5s">5秒</a-select-option>
          <a-select-option value="10s">10秒</a-select-option>
          <a-select-option value="30s">30秒</a-select-option>
          <a-select-option value="1m">1分钟</a-select-option>
          <a-select-option value="10m">5分钟</a-select-option>
          <a-select-option value="30m">10分钟</a-select-option>
          <a-select-option value="1h">1小时</a-select-option>
        </a-select>
      </template>
      <Pagination
        size="small"
        v-model:current="currentPage"
        v-model:page-size="pageSize"
        :total="total"
        :show-total="(total) => `共 ${total} 条`"
        style="position: absolute; z-index: 99; top: 2px; right: 30px"
      />
      <BarAndLine
        :chartsColumnsType="chartsColumnsType"
        :xAxisPropType="resultXAxisPropType"
        :dataSource="resultDataSource"
        height="100%"
        :option="echartsOption1"
        chartsType="history"
        style="margin-top: 20px"
        :chartsColumns="chartsColumns"
      />
    </div>
  </div>
</template>
<script lang="ts">
  import { ref, defineComponent, watch, reactive, onMounted, watchEffect, inject } from 'vue';
  import BarAndLine from '/@/components/chart/BarAndLine.vue';
  import dayjs from 'dayjs';
  import { defHttp } from '/@/utils/http/axios';
  import { Select, Pagination } from 'ant-design-vue';

  export default defineComponent({
    name: 'DeviceEcharts',
    components: { BarAndLine, Select, Pagination },
    props: {
      chartsColumns: {
        type: Array,
        default: () => [],
      },
      chartsColumnsHistory: {
        type: Array,
        default: () => [],
      },
      chartsColumnsType: {
        type: String,
        required: true,
      },
      dataSource: {
        type: Array,
        default: () => [],
      },
      deviceListApi: {
        type: Function,
        required: true,
      },
      deviceType: {
        type: String,
        required: true,
      },
      option: {
        type: Object,
        default: () => ({}),
      },
      xAxisPropType: {
        type: String,
        required: true,
      },
    },
    setup(props) {
      const globalConfig = inject('globalConfig');
      let historyList;
      if (globalConfig.History_Type == 'vent') {
        historyList = (params) => defHttp.get({ url: '/safety/ventanalyMonitorData/listdays', params });
      } else {
        historyList = (params) => defHttp.post({ url: '/monitor/history/getHistoryData', params });
      }
      const chartsType = ref('history');
      const deviceId = ref('');
      const options = ref([]);
      const historyParams = reactive({
        ttime_begin: dayjs().startOf('date').format('YYYY-MM-DD HH:mm:ss').toString(),
        ttime_end: dayjs().format('YYYY-MM-DD HH:mm:ss').toString(),
        skip: '8',
        interval: '1h',
      });
      const resultXAxisPropType = ref('');
      const resultDataSource = ref<any[]>([]);
      const detailDataSource = ref<any[]>([]);
      const currentPage = ref<number>(1);
      const pageSize = ref<number>(20);
      const total = ref(0);

      const echartsOption = {
        grid: {
          top: '60px',
          left: '10px',
          right: props.chartsColumns.length * 15 + 'px',
          bottom: '5%',
          containLabel: true,
        },
        toolbox: {
          feature: {},
        },
        xAxis: {
          axisLabel: {
            interval: 0,
          },
        },
      };
      const echartsOption1 = {
        grid: {
          top: '70px',
          left: '10px',
          right: props.chartsColumns.length * 15 + 'px',
          bottom: '45px',
          containLabel: true,
        },
        toolbox: {
          feature: {},
        },
        xAxis: {
          interval: 0,
        },
      };
      const echartsOption2 = {
        grid: {
          top: '70px',
          left: '10px',
          right: props.chartsColumns.length * 15 + 'px',
          bottom: '2%',
          containLabel: true,
        },
        toolbox: {
          feature: {},
        },
      };

      const onChange = (pageNumber: number) => {
        console.log('Page: ', pageNumber);
      };

      watch(
        [chartsType, deviceId, historyParams, pageSize, currentPage],
        async (
          [newChartsType, newDeviceId, newHistoryParams, newPageSize, newCurrentPage],
          [oldChartsType, oldDeviceId, oldHistoryParams, oldPageSize, oldCurrentPage]
        ) => {
          console.log('[ historyParams ] >', historyParams.ttime, dayjs(historyParams.ttime).format('HH:mm:ss'));
          if (newChartsType === 'listMonitor') {
            // 实时监测所有
            resultDataSource.value = props.dataSource;
          } else if (newChartsType === 'history') {
            resultDataSource.value = [];
            // 历史
            if (newChartsType !== oldChartsType || newDeviceId !== oldDeviceId) {
              currentPage.value = 1;
            }
            const device = options.value.find((device) => device['deviceID'] === newDeviceId);
            if (device) {
              let res;
              if (props.dataSource['stationtype'] !== 'redis') {
                resultXAxisPropType.value = 'ttime';

                const datas = await historyList({
                  ttime_begin: newHistoryParams.ttime_begin,
                  ttime_end: newHistoryParams.ttime_end,
                  strtype: device.deviceType,
                  gdeviceid: newDeviceId,
                  skip: newHistoryParams.skip,
                  pageSize: pageSize.value,
                  pageNo: currentPage.value,
                  column: 'createTime',
                });
                res = datas['datalist']['records'];
                if (res && res.length > 0) {
                  resultDataSource.value = res.map((item) => Object.assign(item, item.readData));
                } else {
                  resultDataSource.value = [];
                }
                total.value = datas['datalist'].total;
              } else {
                resultXAxisPropType.value = 'time';
                res = await historyList({
                  pageSize: pageSize.value,
                  pageNum: currentPage.value,
                  startTime: newHistoryParams.ttime_begin,
                  endTime: newHistoryParams.ttime_end,
                  deviceId: newDeviceId,
                  strtype: device.deviceType,
                  interval: newHistoryParams.interval,
                  column: 'createTime',
                });
                if (res && res.records && res.records.length > 0) {
                  resultDataSource.value = res.records.map((item) => Object.assign(item, item.readData));
                } else {
                  resultDataSource.value = [];
                }
                total.value = res.total;
              }
            }
          } else if (newChartsType === 'detail') {
            // 设备详情
            resultXAxisPropType.value = 'readTime';
            if (newDeviceId !== oldDeviceId) {
              detailDataSource.value = [];
            }
          }
        }
      );
      watchEffect(() => {
        if (chartsType.value === 'detail') {
          const currentData = props.dataSource.find((item: any) => item.deviceID === deviceId.value);
          if (currentData) {
            const isHas = detailDataSource.value.find((item) => item[resultXAxisPropType.value] === currentData[resultXAxisPropType.value]);
            if (!isHas) {
              if (detailDataSource.value.length < 15) {
                detailDataSource.value.push(currentData);
              } else {
                detailDataSource.value.shift();
                detailDataSource.value.push(currentData);
              }
            }
          }
        }
      });

      onMounted(async () => {
        const res = await props.deviceListApi();
        // debugger;
        if (res['msgTxt'] && res['msgTxt'][0] && res['msgTxt'][0]['datalist']) {
          options.value = res['msgTxt'][0]['datalist'];
          deviceId.value = options.value[0]['deviceID'];
        }
      });

      return {
        chartsType,
        deviceId,
        resultDataSource,
        historyParams,
        options,
        resultXAxisPropType,
        detailDataSource,
        currentPage,
        pageSize,
        total,
        echartsOption,
        echartsOption1,
        echartsOption2,
        onChange,
        globalConfig,
      };
    },
  });
</script>
<style lang="less">
  :deep(.vent-select-dropdown) {
    color: #000 !important;
    .vent-select-item {
      color: #000 !important;
    }
  }
</style>
<style lang="less" scoped>
  @import '/@/design/vent/color.less';
  .charts-container {
    position: relative;
    height: 100%;
    .charts-box {
      width: 100%;
      height: 100%;
      position: absolute;
      bottom: 0;
      top: 0px;
    }
    .@{ventSpace}-picker,
    .@{ventSpace}-select-selector {
      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}-select-arrow,
    .@{ventSpace}-picker-separator {
      color: #fff !important;
    }
  }
  :deep(.@{ventSpace}-select-dropdown) {
    color: #000 !important;
    .@{ventSpace}-select-item {
      color: #000 !important;
    }
  }
</style>