gasInjection-project/src/views/vent/monitorManager/comment/DeviceHistoryEcharts.vue

<template>
  <div class="charts-container">
    <a-form
      class="form-container"
      :model="historyParams"
      layout="inline"
      :label-col="{ style: { width: '100px' } }"
      :wrapper-col="{ span: 8 }"
      autocomplete="off"
      @submit.prevent="handleQuery"
    >
      <a-form-item v-if="isShowChildType" label="设备类型">
        <a-select v-model:value="deviceKind" style="width: 200px" @change="deviceKindChange">
          <a-select-option v-for="d in deviceKindOptions" :key="d.value" :value="d.value">{{ d.label }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="查询设备">
        <a-select v-model:value="historyParams.selectedDeviceId" style="width: 200px">
          <a-select-option v-for="d in deviceOptions" :key="d.deviceID" :value="d.deviceID">{{ d.strname }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="分析点位">
        <a-select v-model:value="historyParams.selectedValueCode" style="width: 200px" @change="handleChartColumn">
          <a-select-option v-for="item in chartsColumnList" :key="item.legend" :value="item.dataIndex">
            {{ item.legend }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="开始时间">
        <a-date-picker
          v-model:value="historyParams.startTime"
          style="width: 200px"
          show-time
          valueFormat="YYYY-MM-DD HH:mm:ss"
          placeholder="请选择开始时间"
        />
      </a-form-item>
      <a-form-item label="结束时间">
        <a-date-picker
          v-model:value="historyParams.endTime"
          style="width: 200px"
          show-time
          valueFormat="YYYY-MM-DD HH:mm:ss"
          placeholder="请选择结束时间"
        />
      </a-form-item>
      <a-form-item>
        <a-button type="primary" html-type="submit">查询</a-button>
      </a-form-item>
    </a-form>

    <Pagination
      v-if="isShowPagination"
      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"
    />
    <template v-if="chartData.length > 0 && historyParams.selectedValueCode">
      <BarAndLine
        class="device-history-echarts"
        :xAxisPropType="resultXAxisPropType"
        :dataSource="chartData"
        height="580px"
        :option="echartsOption"
        chartsType="history"
        :chartsColumns="currentChartsColumnList"
      />
    </template>
    <template v-else>
      <div class="no-data"> </div>
    </template>
  </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 { Select, Pagination, message } from 'ant-design-vue';
  import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
  import { getDictItemsByCode } from '/@/utils/dict';
  import { defHttp } from '/@/utils/http/axios';
  import { getDeviceHistoryData } from '@/views/vent/monitorManager/deviceMonitor/components/device/device.api';
  const deviceList = (params) => defHttp.post({ url: '/monitor/device', params });
  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: () => [],
      },
      deviceType: {
        type: String,
        required: true,
      },
      isShowChildType: {
        type: Boolean,
        default: false,
      },
      isShowPagination: {
        type: Boolean,
        default: false,
      },
    },
    setup(props) {
      const globalConfig = inject('globalConfig');
      const deviceKind = ref('');
      const chartsType = ref('history');
      const deviceId = ref('');
      const deviceOptions = ref([]);
      const historyParams = reactive({
        startTime: dayjs().startOf('date').format('YYYY-MM-DD HH:mm:ss').toString(),
        endTime: dayjs().format('YYYY-MM-DD HH:mm:ss').toString(),
        skip: '8',
        interval: '1h',
        selectedDeviceId: '',
        selectedValueCode: '',
      });
      const deviceKindOptions = ref([]);
      const chartsColumnList = ref([]);
      const currentChartsColumnList = ref([]);
      const resultXAxisPropType = ref('createtime');
      const chartData = ref<any[]>([]);
      const currentPage = ref<number>(1);
      const pageSize = ref<number>(20);
      const total = ref(0);
      const baseChartColumn = [
        {
          legend: '最大值',
          seriesName: '',
          ymax: 100,
          yname: '',
          linetype: 'line',
          yaxispos: 'left',
          color: '#DA3914',
          sort: 1,
          xRotate: 0,
          dataIndex: 'max',
        },
        {
          legend: '最小值', // average，max，median，min
          seriesName: '',
          ymax: 100,
          yname: '',
          linetype: 'line',
          yaxispos: 'left',
          color: '#00FFA8',
          sort: 1,
          xRotate: 0,
          dataIndex: 'min',
        },
        {
          legend: '平均值',
          seriesName: '',
          ymax: 100,
          yname: '',
          linetype: 'line',
          yaxispos: 'left',
          color: '#AE19FF',
          sort: 1,
          xRotate: 0,
          dataIndex: 'average',
        },
        {
          legend: '中位数',
          seriesName: '',
          ymax: 100,
          yname: '',
          linetype: 'line',
          yaxispos: 'left',
          color: '#749f83',
          sort: 1,
          xRotate: 0,
          dataIndex: 'median',
        },
      ];
      const echartsOption = {
        grid: {
          top: '80px',
          left: '20px',
          right: '20px',
          bottom: '5%',
          containLabel: true,
        },
        legend: {
          top: '0px',
        },
        toolbox: {
          feature: {},
        },
        xAxis: {
          axisLabel: {
            interval: 0,
          },
        },
      };

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

      const handleChartColumn = () => {
        const column = chartsColumnList.value.find((item) => item['dataIndex'] === historyParams.selectedValueCode);
        if (column) {
          const tempColumn = JSON.parse(JSON.stringify(column));
          tempColumn['legend'] = '实时值';
          tempColumn['sort'] = 1;
          tempColumn['linetype'] = 'line';
          tempColumn['yaxispos'] = 'left';
          tempColumn['yname'] = '';

          currentChartsColumnList.value = [tempColumn, ...baseChartColumn];
        }
      };

      const getDeviceList = async () => {
        const columnType = deviceKind.value ? deviceKind.value : props;
        const res = await deviceList({ devicetype: columnType, pagetype: 'normal' });
        // debugger;
        if (res['msgTxt'] && res['msgTxt'][0] && res['msgTxt'][0]['datalist']) {
          deviceOptions.value = res['msgTxt'][0]['datalist'];
          if (deviceOptions.value && deviceOptions.value.length > 0) historyParams.selectedDeviceId = deviceOptions.value[0]['deviceID'];
        }
      };

      const deviceKindChange = async (deviceTypeValue) => {
        const columnType = deviceTypeValue ? deviceTypeValue + '_chart' : props.deviceType + '_chart';
        chartsColumnList.value = getTableHeaderColumns(columnType) || [];
        if (chartsColumnList.value && chartsColumnList.value.length && chartsColumnList.value.length > 0) {
          historyParams.selectedValueCode = chartsColumnList.value[0].dataIndex;
        } else {
          historyParams.selectedValueCode = '';
        }
        handleChartColumn();
        await getDeviceList();
      };

      watch(
        () => props.deviceType,
        async (deviceTypeValue) => {
          const columnType = deviceKind.value ? deviceKind.value + '_chart' : deviceTypeValue + '_chart';
          deviceKindOptions.value = getDictItemsByCode(deviceTypeValue + 'kind');
          chartsColumnList.value = getTableHeaderColumns(columnType);
          if (chartsColumnList.value && chartsColumnList.value.length && chartsColumnList.value.length > 0) {
            historyParams.selectedValueCode = chartsColumnList.value[0].dataIndex;
          }
          deviceKind.value = deviceKindOptions.value[0].value;
          handleChartColumn();
          await getDeviceList();
        },
        { immediate: true }
      );

      async function handleQuery() {
        if (!historyParams.selectedDeviceId || !historyParams.selectedValueCode) {
          message.warning('请选择设备和分析点位');
          return;
        }
        try {
          chartData.value = [];
          const res = await getDeviceHistoryData({
            deviceId: historyParams.selectedDeviceId,
            valueCode: historyParams.selectedValueCode,
            startTime: historyParams.startTime,
            endTime: historyParams.endTime,
          });
          if (res && Array.isArray(res.list)) {
            // average，max，median，min
            chartData.value = res.list.map((item) => ({
              ...item,
              [historyParams.selectedValueCode]: Number(item.val),
              average: Number(res.average),
              max: Number(res.max),
              median: Number(res.median),
              min: Number(res.min),
            }));
          } else {
            chartData.value = [];
          }
        } catch (e) {
          chartData.value = [];
        }
      }

      onMounted(async () => {
        await getDeviceList();
        await handleQuery();
      });

      return {
        chartsType,
        deviceId,
        chartData,
        historyParams,
        deviceOptions,
        resultXAxisPropType,
        currentPage,
        pageSize,
        total,
        echartsOption,
        onChange,
        globalConfig,
        deviceKind,
        chartsColumnList,
        deviceKindOptions,
        currentChartsColumnList,
        handleQuery,
        handleChartColumn,
        deviceKindChange,
      };
    },
  });
</script>
<style lang="less">
  :deep(.vent-select-dropdown) {
    color: #000 !important;
    .vent-select-item {
      color: #000 !important;
    }
  }
  label {
    color: #fff !important;
  }
</style>
<style lang="less" scoped>
  @import '/@/design/theme.less';

  .charts-container {
    --image-no-camera_bg: url('/@/assets/images/vent/no-data.png');
    position: relative;
    height: 100%;
    .form-container {
      display: flex;
      // justify-content: center;
      margin-top: 50px !important;
      margin-bottom: 80px !important;
    }
    .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-border !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;
    }
  }
  .no-data {
    width: 100%;
    height: 475px;
    padding-top: 80px;
    background: var(--image-no-camera_bg) no-repeat;
    background-position: center;
    display: flex;
    justify-content: center;
    font-size: 50px;
    color: var(--vent-text-base);
  }
  :deep(.@{ventSpace}-select-dropdown) {
    color: #000 !important;
    .@{ventSpace}-select-item {
      color: #000 !important;
    }
  }
</style>