mky-vent-base/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: 'id' }"
        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: 'id' }"
        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.tData"
          valueFormat="YYYY-MM-DD"
          placeholder="请选择查询日期"
          size="small"
          style="position: absolute; z-index: 99; left: 254px; width: 150px; top: 2px"
        />
        <a-time-range-picker
          v-model:value="historyParams.ttime"
          valueFormat="HH:mm:ss"
          size="small"
          style="position: absolute; z-index: 99; left: 406px; width: 200px; top: 2px"
        />
        <a-select
          ref="select"
          v-model:value="historyParams.skip"
          placeholder="请选择间隔时间"
          size="small"
          style="position: absolute; z-index: 99; top: 2px; left: 608px; width: 150px"
        >
          <a-select-option value="1">5秒</a-select-option>
          <a-select-option value="2">10秒</a-select-option>
          <a-select-option value="3">30秒</a-select-option>
          <a-select-option value="4">1分钟</a-select-option>
          <a-select-option value="5">5分钟</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.startTime"
          valueFormat="YYYY-MM-DD HH:mm:ss"
          placeholder="开始时间"
          size="small"
          style="position: absolute; z-index: 99; left: 254px; width: 150px; top: 2px"
        />
        <a-date-picker
          v-model:value="historyParams.endTime"
          valueFormat="YYYY-MM-DD HH:mm:ss"
          placeholder="结束时间"
          size="small"
          style="position: absolute; z-index: 99; left: 406px; width: 150px; top: 2px"
        />
        <a-select
          ref="select"
          v-model:value="historyParams.interval"
          placeholder="请选择间隔时间"
          size="small"
          style="position: absolute; z-index: 99; top: 2px; left: 558px; 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: () => [],
      },
      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/list', params });
      }else{
        historyList = (params) => defHttp.post({ url: '/ventanaly-device/history/getHistoryData', params });
      }
      const chartsType = ref('listMonitor');
      const deviceId = ref('');
      const options = ref([]);
      const historyParams = reactive(History_Type == 'vent'?{
        tData: dayjs(),
        ttime: ['', ''],
        ttime_begin: dayjs.startOf('date')('HH:mm:ss'),
        ttime_end: dayjs('HH:mm:ss'),
        skip: '1',
      }: {
        startTime: dayjs().startOf('date'),
        endTime: dayjs(),
        interval: '10s'
      });
      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: '5px',
          bottom: '5%',
          containLabel: true,
        },
        toolbox: {
          feature: {},
        },
      };
      const echartsOption1 = {
        grid: {
          top: '70px',
          left: '10px',
          right: '5px',
          bottom: '5%',
          containLabel: true,
        },
        toolbox: {
          feature: {},
        },
      };
      const echartsOption2 = {
        grid: {
          top: '70px',
          left: '10px',
          right: '5px',
          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') {
            // 历史
            resultXAxisPropType.value = 'gcreatetime';
            if (newChartsType !== oldChartsType || newDeviceId !== oldDeviceId) {
              currentPage.value = 1;
            }
            let res;
            if(globalConfig.History_Type == 'vent'){
              resultXAxisPropType.value = 'gcreatetime';
              res = await historyList({
                ttime_begin: historyParams.ttime[0] ? historyParams.ttime[0] : null,
                ttime_end: historyParams.ttime[1] ? historyParams.ttime[1] : null,
                tData: dayjs(historyParams.tData).format('YYYY-MM-DD'),
                strtype: props.deviceType + '*',
                gdeviceid: newDeviceId,
                skip: historyParams.skip,
                pageSize: pageSize.value,
                pageNo: currentPage.value,
              });
            }else{
              resultXAxisPropType.value = 'time';
              res = await historyList({
                startTime: historyParams.startTime,
                endTime: historyParams.endTime,
                deviceId: newDeviceId,
                interval: historyParams.interval,
              });
            }
            if(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();
        if(res && res.records){
          options.value = res.records;
          deviceId.value = options.value[0]['id'];
        }
      });

      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>